まずは、簡単なHTMLファイルを作成し、HTMLの文法を理解しましょう。HTMLを使って書かれたHTMLファイルの中身をソースコードといいます。それでは、実際にソースコードを書いてみましょう。
Sublime textを開きます。
ソースコードは、タグと言うものを使って書いていきます。タグというのは< と > で囲まれたものを指します。
<header>←のようにタグを書きます。
タグは基本的に開始タグと終了タグに分かれています。開始のタグは<header>のように書き、終了タグは</header>のように</（スラッシュ）>で閉じます。
開始タグと終了タグでひとつのセットになります。
<> は必ず半角文字で書いてください。開始タグと終了タグの間に内容を書いていきます。
<header>表示させたい内容（要素と呼びます）</header>
上記を header要素 headerタグと呼びます。
では、実際のHTMLの構造を見て、Sublime textに書き込んでいきましょう。
DOCTYPE宣言
HTMLファイルに書き込むHTMLのバージョンを指定するための表記です。<>で囲まれていますが、HTMLのタグではありません。終了タグは必要ありません。このDOCTYPE宣言は、文書の一番最初（html開始タグよりも前）に記述します。
今回はHTML5で記述するので
<!DOCTYPE html>
上記のように記述します。
HTMLのバージョンとDOCTYPE宣言は下記があります。
「DTD（文書型定義）」とは、そのバージョンのHTMLで使用することができる要素と属性、要素の配置に関するルールなどを定義しているものです。
このDTDには、Strict（厳密型）、Transitional（移行型）、Frameset（フレーム設定用）の3種類があり、それぞれの記述方法や意味は次のようになります。
HTML4.01 Strict（HTML4.01のルールに厳密かつ正確に従う指定）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML4.01 Transitional（Strictより緩やかな指定（フレームは不可））
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTML4.01 Frameset（Transitionalにフレームを加えた指定）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
このほかにもXHTML1.0がありますが、現在はHTML5が主流になりつつあるため、これから制作するサイトはHTML5のDOCTYPE宣言をするといいでしょう。
XHTMLやHTML4.01 でのサイト制作もあることを理解しておきましょう。XHTMLやHTML4.01を使用する場合、Transitionalを利用することが多いです。
html要素
DOCTYPE宣言の次にhtml要素を記入します。
<!doctype html> <html></html>
html要素はHTMLファイルの一番外側の要素でその他の要素はすべてこのhtml要素の中に記載します。
head要素
head要素はHTMLファイルに関するいろいろな情報（メタデータ）を書き込むための要素です。
<!doctype html> <html> <head></head> </html>
※HTMLファイルやCSSファイルを記載する際、見やすいように改行しその間に要素を書くようにしておくと、ミスが減ります。
HTMLの文法では、半角スペースやタブは無視されますが、要素を見やすくするためにtabキーを使って字下げし、見やすくすることをお勧めします。
head要素の中には
- Webページのタイトル（title要素）
- 文字コード（charset属性）
- 関連づけるcss、javascript等のファイル名（link要素）
などのメタデータをいろいろ書き込んでいきます。head要素はtitle要素を除きブラウザには表示されません。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Web Design Lesson</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> </html>
body要素
head要素の次に書くのがbody要素です。body要素の内容からがブラウザ表示される部分になります。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Web Design Lesson</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body></body> </html>
要素には関係性があります。head要素とbody要素はhtml要素の中に含まれています。このとき、html要素はhead要素とbody要素の親要素であるといいます。また、head要素とbody要素はhtml要素の子要素であるといいます。
他にも要素同士で、head要素とbody要素は兄弟要素でもあるといい、先祖要素、子孫要素という風に人間の家系図のような要素関係を示すことがあります。
この要素関係はCSSでデザインを考える際に樹形図として使う場合があります。
言語の種類の指定
title要素の内容やbody要素の内容であるコンテンツの言語を伝える属性がlang属性になります。ここでいう言語は、私たちが普通に使っている日本語や英語という言語になります。
コンテンツを日本語で作成する場合は、html要素のlang属性の値に「ja」と指定します。
<html lang="ja">
htmlのソースコードを書く場合、要素などの指定は ＝（イコール）と””（ダブルクォーテー
ションマーク）で指定をします。
他の言語のlang属性の値は en（英語） zh（中国語） ko（韓国語） it（イタリア語） fr（フランス語）などがあります。
コメント追記
半角の
<!--
と
-->
で囲んだ文字列がコメントとして扱われ、ブラウザには表示されません。コメントは複数行にまたがって作成できます。
<!doctype html> <html lang="ja"> <!-- ここからhead要素 --> <head> <meta charset="utf-8"> <title>Web Design Lesson</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <!-- head要素終わり --> <body></body> </html>
ただし、「<!–」のすぐあとに「>」や「->」と書いてはいけません。また、コメントの中に「-」「–」（ハイフン）を書いてはいけません。
meta要素とcharset属性
日本語にはいくつかの文字コードがあります。文字コードを指定しないと、ブラウザで表示したときに文字化けといわれる現象が起こります。あるサイトを表示して、文字ではなく、謎の記号が羅列されている状態が文字化けしている状態です。
どの文字コードを使うのかという指定をするのがmeta要素のcharset属性になります。
コンピューターの内部では、文字は数字に置き換えて処理されています。Webページで文字を表示するときに、文字コードに従って、文字から数字に変換することをエンコードといいます。
そのため文字化けの解消にエンコードを指定しなおすということがあります。ブラウザの設定画面などでのエンコードの指定という項目でエンコードを指定すると文字化けが解消します。
現在主流のWebページは「UTF-8」という文字コードが使われています。今回もUTF-8で指定しています。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- エンコードの指定はutf-8 --> <title>Web Design Lesson</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body></body> </html>
metaとcharsetの間は必ず半角スペースで区切ってください。meta要素は終了タグのない空要素です。
title要素
head要素の中に必ず書かなくてはいけないのがtitle要素です。title要素は、検索やブックマークに登録される見出し、ブラウザのタブへの表示など様々な場所で、表示用テキストとして使われます。
ページのタイトルは、ページごとに変えて他のページと重複しないようにすることも必要です。ページのタイトルを記載する場合は、サイト名も合わせて表記するようにしましょう。
また、Googleの検索結果での表示を考えて最大で半角40文字、全角で20文字程度に収めると良いでしょう。
見出し要素（h1～h6）
body要素の中に書くテキストの見出しを設定します。見出しにはh1要素、h2要素、h3要素、h4要素、h5要素、h6要素を用います。hは「head」の略です。もっとも重要な見出しはh1要素を使って記載します。数値が小さいほど高いランクの見出しとなります。
Webページで要素を指定して文書の各要素に目印を与えて行く事をマークアップといいます。
ページの構成を考えて見出し要素をマークアップしていくようにしましょう。
HTMLの仕様に明記されてはいませんが、階層構造の点からもh1は1ページに1つだけ記述するようにしてください。2014年秋仕様勧告変更がありました。
h2～h6要素は複数登場しても問題ありませんが、先に述べたように階層構造を意識してマークアップしてください。
見出しのレベルは高い順から順番に利用してください。具体的には、h1要素の次にh4要素を書いたりしないようにしましょう。h1要素の次の見出しはh2要素を、h2要素の次の見出しにはh3要素を使うようにしましょう。
これは文書構造上、見出しを配置すると暗黙的に新しいセクションを開始したことになるためです。 セクショニング・コンテンツの要素（ <article>（記事要素）・ <aside>（補足情報）・ <nav>（ナビゲーション）・ <section>（一般的なセクション） ）の中にある、 最初のヘッディング・コンテンツの要素（ <h1>・ <h2>・ <h3>・ <h4>・ <h5>・ <h6>）は、そのセクションの見出しを表します。 そのあとに低いランクの見出しが続く場合には、暗黙的にそのセクションの一部となるサブセクションを開始したものとみなされます。 また、同じランクの見出しや高いランクの見出しが続く場合には、暗黙的に別の新しいセクションを開始したものとみなされます。
段落要素
見出しの次に文章を記載していきますが、ひとまとまりの段落になっていると読みやすくなります。文章を段落にするには、p要素を使います。「p」は、英語のparagraph（段落）の頭文字です。
h1要素とp要素でマークアップすると以下のようになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- エンコードの指定はutf-8 -->
<title>Web Design Lesson</title>
</head>
<body>
<h1>はじめまして！</h1>
<p>はじめまして、〇〇と申します。HTMLを学習しはじめました。</p>
</body>
</html>
上記を書き込んだら、Sublime textでsample.htmlと名前をつけて保存します。
次にこのhtmlファイルをブラウザで表示させます。さきほど保存したsample.htmlを右クリックして、プログラムから開くを選択し、Firefoxを選択します。
htmlファイルをブラウザで確認することは今後も何度も行うので、方法を覚えてください。
h1要素の文字が大きく表示されています。文字などは特に装飾していませんが、ブラウザ自体でh1は文字の大きさを指定しますので、このような表記になります。
各要素に対して装飾をする場合は、CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）で指定していきます。