HTMLはHypertext Markup Languageの略で、Webページを記述するために利用されているマークアップ言語です。HTMLでは"<"と">"の記号を用いて「タグ」と呼ばれる特殊な文字列を作り、文字や画像を装飾することでwebページであるHTMLファイルを作成していきます。一つ一つのタグがそれぞれ特定の役割を持ち、コンピュータがwebページの構造を理解できるようになっています。
HTMLを練習しようにもいきなりwebページなんて作れな〜い、めんどくさ〜い、と悩んでるそこのアナタ！なんとメモ帳（Macユーザーならテキストエディット）でHTMLファイルが作れちゃうんです。早速以下の手順に沿って作ってみましょう。
これが下の「ファイル1（text）」になります。
最後に拡張子を".text"から".html"に変更すれば完成です！ファイルをブラウザで開くことができます！
先ほどこのガイドのソース（htmlコード）を見た人は「なんだこの文字列は!?」と思ったかもしれません。HTMLはコーディングにより装飾された文書を組み上げていきます。そしてコーディングには規定があります。HTMLにおける特徴として様々な「タグ」を使用することが挙げられます。タグはプログラミング言語の命令に相当するもので、要素を含むタグでコンテンツ（文章）を挟むことでタグの効果範囲を指定します。
……挟む？
そう、HTMLでは要素の効果範囲を指定するためにコンテンツの最後に「/」を付加した終了タグを挿入してあげる必要があります。具体的には
<aaaa> ~ </aaaa> （aaaaは同じタグ名）といった具合です。
以下、挟む必要がある要素は上記のように表記して解説しますね。
ということで、基本的なタグを見てみましょう。タグ名は大文字でも小文字でも構いませんが、混乱を招かないように小文字に統一しています。
<!doctype html>は文書がHTMLで記述されていることを宣言するタグです。Webページが正しいHTMLで記述されているとみなされるために、必ず頭に置きましょう。（不要なのでは？と言われれば不要かもしれませんが、ブラウザが識別に迷わないためにも書きましょう。）
htmlはすべての要素の上位に位置し、<html>が決めるルールに下位の要素（タグ）は従います。例えば、文章に日本語しか用いないのであれば<html lang="ja">と記述することで英語やその他の言語で書かれた文書としての誤認を避けることができます。（とは言っても必要性はあまりなく、実際は<html>のみでかまいません。）
headはコンピュータに処理してもらう内容を含める要素です。実際にwebページに表示するための内容ではなく、例えばwebページのタイトルであったり、下記の<meta>要素や後述するCSSを含みます。
meta要素 は<head>内で様々な説明のための情報（メタデータ）を記述するために使われます。頻度としては文字コードの指定が多いです。webページに使われている文書にはそれぞれの文字コード（様々な文字や記号を表示するために文字に番号が振られたもの）があり、日本語ではほぼすべての文字と記号を含む「UTF-8」や「Shift_JIS」などが使用されています。ではこの文字コードが異なると何が起こるのか。試しに九大のキャッチコピーを遊んで文字化けさせてみましょうか。
世界へ飛躍する九大新世紀（UTF-8）
↓
荳也阜縺ｸ鬟幄ｺ阪☆繧倶ｹ晏､ｧ譁ｰ荳也ｴ?（Shift_JIS）
はい、こうなりました。これは文書に使用されている文字コード（UTF-8）とコンピュータが解釈した文字コード（Shift_JIS）が異なるために起きる現象です。実際にはwebページの9割以上はUTF-8で記述されていますし、コンピュータも毎回解釈を間違う訳ではありません。しかしコンピュータに正しく文字コードを認識させるためにも、<head>内に<meta charset="UTF-8">を置いておきましょう。
ここで <meta charset="UTF-8"> というタグの構造を見ると、metaが要素名になります。要素名の後ろに続くのは属性で、ここではcharsetが属性名になります。属性の後にイコール（=）で繋いでダブルクォーテーション（" "）で挟んでいるのは属性値であり、ここではcharset属性に対して"UTF-8"という属性値を与えています。正しく認識されるためにも、属性値は必ずダブルクォーテーションで挟みましょう。
属性値にはそれぞれデフォルト値が与えられているため、変更しない属性を記述する必要はありません。一つの要素に対して複数の属性を設定したい時は、A要素のBとC、D属性に対して <A B="~~~" C="~~~~~" D="~~"> のように並べて記述できます。
もう一つ記述しておきたいメタデータがname属性です。name属性にはいくつかの属性値があり、Webページを説明するために使われます。しかしメタデータなので表示はされません。
ではなぜこれらのメタデータを記述するのか？それは検索エンジンに情報を伝えるためです。例えばWebページの説明を文章で入力する場合、name="description"を指定し、content属性を続けて説明を記述します。
<meta name="description" content="このページでは九州大学の魅力について説明します。">
Webページを説明するキーワードを与える場合は、name="keywords"を指定します。
<meta name="keywords" content="九州大学,大学院,文学部,工学部">
これらのメタデータを情報源として検索エンジンは検索結果を表示します。検索結果にメタデータが表示されることもあります。しかし、これを逆手に取ると自分のWebページと無関係な内容をメタデータに数多く加えることで、様々な検索ワードに対して自分のWebページを検索結果に表示させることが可能となってしまいます。そのため最近は対策が進み、Google検索がWebページの内容とmeta nameの内容が無関係だと判断した場合、検索結果に反映されないようになっています。
titleはwebページのタイトルを記述する要素です。ブラウザのタブやブックマーク（お気に入り）を追加した際のタイトルとして表示されます。時々タイトルが「1」や「page」のようなwebページが見られますが、ユーザーがブックマーク追加時にタイトルを付け直すことになるのでちゃんと設定してあげましょう。
bodyがwebページコンテンツの本体部分です。ここに記述された文章・画像・動画等が実際にwebページに表示されることになります。webページの訪問者に見てほしい情報はすべてここに記述しましょう。
それではここまで出たタグを使って以下のようにHTMLで記述してみましょう。下記のようにコードを記述すると下の画像のようにhtmlファイルが出力されます。PCでこのガイドを見ている方は左上枠の「メモ帳を用いたHTML文書の作成」を参考にHTMLファイルを作成してみましょう。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>九州大学の紹介</title> <meta name="description" content="九大について"> </head> <body> <h1>九州大学伊都キャンパス</h1> <p>糸島半島に位置しています</p> </body> </html>
シンプルですがwebページのようなものができましたね。<body>~</body>内のコンテンツはしっかりページに表示されていますし、<head>~</head>内のタイトルもタブ名として見えています。<meta name="description" content="~">の内容はページ内には見えませんが、ページの内容を説明する文書として隠れて存在しています。これを記述しておけば検索エンジンの検索結果にwebページの説明文として表示され、情報が欲しい人に見つけてもらいやすくなります。
もう一つのポイントとして、この<meta>にはタグの終わりを示す閉じタグ、つまり</meta>が記述されていませんよね？これは閉じタグがない要素を「void要素」と言います。HTML5においては以下のタグをvoid要素として扱います。
このほかにもvoid要素はありますが、主なものは上に示しているタグになります。これらvoid要素では閉じタグを記述しないようにしましょう。誤って記述するとエラーが出る可能性があります。これらvoid要素のタグについては後ろのページで説明します。
ちなみに、「閉じタグはあるけれども省略可能である要素」も存在します。ややこしいですね。詳しくは以下のページで解説されています。