PC、スマートフォンなど全ての「ウェブサイト」を作るに必要なものが「HTML（エイチティーエムエル）」です。HTMLは「タグ」や「マークアップ」などと違った呼び方がされる場面もありますが、意味としては大きな違いはありません。
HTMLとは
HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。直訳すると「テキストを超えたテキストをマークアップする言語」となります。
マークアップ（Markup）とは「文章構造」を明確に整理すること。タイトルや見出しに「タグ」と呼ばれる目印をつけると、コンピューターが認識しやすくなります。例えば、ページのタイトルを「<title>タイトル</title>」と囲む、文章を「<p>文章がここに入る</p>」といった具合です。
要するに、HTMLは「ウェブサイトを作るパーツ」くらいに、思っているくらいで良いのです。または「大まかなレイアウト構成」や「表示する規則やルール」と思っても良いかもしれません。
HTMLの歴史
HTMLの歴史は1989年、欧州12か国の共同研究機関・CERN（欧州原子核研究機構）で、ティム・バーナーズ・リー氏によって誕生しました。その後、世界標準化の推進や改善が進められています。
W3Cが世界標準化を推進
1994年には、ブラウザやサーバーを標準化を推進する非営利団体・W3C（World Wide Web Consortium）を設立。
CSSの誕生
1996年に、W3Cが「CSS1.0」を勧告。HTMLを装飾する「CSS（Cascading Style Sheets）」によって、文章構造のみだったHTMLがより見やすくなったのです。
現在では、CSSは「シーエスエス」や「スタイルシート」と一般では呼ばれています。HTMLと同様、CSSも改善が日々なされているため、書き方が数年に一度変わってきています。
HTML5の推進
2008年に草案が勧告された「HTML5」は、文章構成をより簡略化し、動画表示やアニメーションなど「リッチ化」するために考えられました。
HTMLのはじめ方
ウェブサイトを作るために「HTML」を学びたいと思っている人は「HTMLを読む」から進めると良いかも。ウェブサイト上で「右クリック＞ページのソースを表示」をすると、表示されているウェブぺーじの「文章構成」が見えてきます。
デザインは「CSS」を読む
HTMLは「文章構成」のみとなるため、憧れのサイトと同じデザインにしたい場合は「CSS」を読んでみると参考になります。
動きは「js」で作る
動きのあるアニメーションを使用したサイトの場合は「JavaScript（ジャバスクリプト）」と呼ばれるプログラム言語や、JavaScriptをより容易に使えるようにしたライブラリ「jQuery（ジェイクエリー）」を使用するのが一般的です。
HTMLの基本
初心者にありがちなのが、HTMLに「意味」を求めすぎること。まず初めに、世界のルールだと思って「定型文」を覚えます。その後「よく使うタグ」を覚えれば、90%は完了です。
HTMLは「履歴書」みたいなもの
HTMLは「とても難しい」とイメージがあるかもしれませんが、実は「文章を整理するツール」なので、全く難しくありません。
履歴書で「名前」の欄に名前を書くの逆かもしれません。例えば「見出し」には「<h1>見出し</h1>」と、文章には「<p>文章</p>」と、文章構造を明確化してばいいだけなのですから。
難しいのは、文章やデザインを考案していくこと。HTMLはあくまで「枠組み」や「箱」であり、大切なのは中身であったりします。
HTMLの定型文
- <!DOCTYPE html> ：ドキュメントタイプの宣言
- <html>：HTML文書であることの宣言
- <meta>：文書に関する情報（メタ情報）を指定
- <link>：cssファイルなど外部の関連文書を指定
- <script>：スクリプト文書の埋め込みを指定
- <head>：ヘッダー情報を表す
- <title>：文書のタイトル
- <style>：cssを指定
- <body>：文書の本体部分
HTMLの定型文は、基本的にはどのウェブサイトで使われている記述になります。プロの「マークアップエンジニア」でもテンプレートをコピーして使うことが多いため、覚えていない人もいるかもしれません。
検索エンジンに最適化（SEO）を意識する場合は「定型文」をしっかりと記述することが重要となります。
HTMLでよく使うタグ
- <div>：段落やまとまりを指定
- <h1>：大見出しを指定
- <h2>：中見出しを指定
- <h3>：小見出しを指定
- <img>：画像を表示指定
- <p>：ひとつの段落を指定
- <a>：リンクを指定
- <span>：文のまとまりを指定
- <ul><li>：リストを作成
HTMLの定型文「<body>」の中に記述するタグ。ブログやニュースサイトでは、見出し（h1）と文章（p）のセットを段落（div）にするというのが基本構造になります。
まとめ
- HTML：ウェブサイトを作るパーツ
- HTMLのはじめ方：HTMLを読んでみる
- HTMLの基本：定型文とよく使うタグを覚える