いま見ているこのページもHTMLを返しています。基本的にはウェブページはHTMLを返します。
静止画・動画・スクリプトやスタイルシートなどの他の構成要素もありますが、多くはHTMLから間接的に参照されます。
例:
タイトル
レベル１の見出し
    コンテンツ
  
テストHTML
このページはテストHTMLです。
pタグで囲った文章
表示:サムネイル|左|代替文=上のhtmlの表示結果|テストHTMLの表示
だいたいこのように表示されます。
は、DOCTYPE宣言といい、省略することも可能ですが、レイアウトが崩れる可能性もあるため、基本的には宣言しておきましょう。
(DOCTYPEは小文字大文字関係ありません)
HTML文書であることの宣言です。lang="ja"は言語が日本語であることを宣言しています。lang="ja"は、なくてもいいですが、基本ではある方がいいでしょう。
lang属性は、そのページの言語を指定できる属性です。
日本語なら「ja」、英語なら「en」を指定します。
ここに、ページの情報を書きます。head要素内には、title要素とmeta要素(meta要素は「」が必須なだけです。)が必須となっています。
名前の通り、ページのタイトルを指定します。だいたい30文字以内で収めるようにしましょう。
[https://www.google.com/search?q=文字コード&safe=active&ssui=on 文字コード]を「UTF-8」にするものです。その他文字コードは色々ありますが、全世界共通の「UTF-8」にするのが無難です。
ページにスタイルを適用したいときに使います。「rel="stylesheet"」は、変更できませんが、hrefには、[https://ja.wikibooks.org/wiki/HTML/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%AF#%E7%B5%B6%E5%AF%BE%E3%83%91%E3%82%B9%E3%81%A8%E7%9B%B8%E5%AF%BE%E3%83%91%E3%82%B9%E3%81%A8%E7%B5%B6%E5%AF%BEURL 相対パス]を入力します。
HTMLをブラウザ上で表示するところです。タグ以外の文が表示されます。これで言うと、<h1>テストHTML</h1><p>このページはテストHTMLです。</p><p>pタグで囲った文章</p>にあたります。
ここまで説明してきましたが、重要な「HTMLの書き方」について説明していなかったので、説明します。
 <開始タグ> ・・・ 
という順番を意識して、次の解説をお読みください。
今まで、「」とか、「」とか、とにかくタグを「<」「>」ではさみまくっていますが、この「<」で始まり、「>」で終わるタグを、「開始タグ」。
「」で終わるタグを、「終了タグ」と言います。HTMLのタグは、「終了タグ」が無いものもありますが、(例えば「」や「」)絶対に「開始タグ」はあります。
idとclassをつけると、いいことがたくさんあります。例えば、CSSで特定の修飾をつけることができます。
id名は少しルールがありますが、自分でつけることができます。
ルールは、
説明が難しいので、HTMLコードで説明します。
id class
2022/11/1/12:00
編集時の時刻を教えて
日付も教えて
上を見たら分かる通り、「id」は使える回数が一つのページで一回。「class」は使える回数が無いのでどこでも使うことができます。
idとclassは、開始タグの「>」の前にスペースを入れて記述します。
よく、ページでリンクを見かけることがあると思います。その中でも「目次」とかでまとめられているものは、同じページの中で「スー」と移動しています。これは、a要素のhref属性を「#id名」にしているからです。もしリンクを作って同じid名が複数存在したら、どこにリンクしたらいいのかブラウザは判別できないから、「id名を使うのは一回」と決まっているわけです。
idはなぜ一回しか使えないの?
複数使う場合は、「class」を使用してください。
ここにしるしている要素は、全てbody要素内で使う要素です。注意してください。
ページの段落をつくるのに使われる。p要素の上下に少し余白ができる。
見出しを作成する要素。h1はメインとなる見出し。それ以降は主にサブの見出しで使われる。
ハイパーリンク(つまりリンク)を作成する要素。 テキストと入力するとリンクが作成できる。
見本のページ
ul要素の子要素としてliを使う。なので構成は、
コンテンツ
   ︙
というふうになる。
この場合、「コンテンツ」の前に「・」がつく。
ol要素の子要素としてliを使う。なので構成は、
コンテンツ
というふうになる。
この場合、「コンテンツ」の前に「1からの番号」がつく。
画像を表示させるときに使う要素。要素の属性に「src」と「alt」があり、中でも「src」は必須の属性。altは画像がうまく読み込まれなかったときのテキストを設定する。
表を作成する要素。子要素は、caption, colgroup, thead, tbody, tfoot あるいは tr（thead, tbody, tfoot が省略された場合）。
表のキャプションを記述します。
テーブルのセル行を定義する。
子要素は、th要素あるいはtd要素。
セルをテーブル・セル群のヘッダーとして定義する表の見出しを作成する要素。
終了タグ省略可。
データを含むテーブルのセルを定義する。
終了タグ省略可。
それだけでは確立できないことをまとめるのに使います。sectionには、「章」といった意味があり、複数の項目があります。基本的に「h1 ~ h6要素」が入ります。
それだけで独立できる内容のときに使います。中に、「h1 ~ h6要素」が入ります。
なにかの要素にはまとめるのは難しいときに使います。子要素をグループ化してくれますが、全くCSSなどは無いため必要に応じて追加する必要があります。
div要素と同じようになにかの要素にはまとめるのは難しいときに使います。span要素はインライン要素のため、p要素等と同じように扱われますが、
全くCSSなどは無いため必要に応じて追加する必要があります。
主に、ページのタイトルやナビゲーションを囲むのに使われます。
ページのナビゲーション(メニュー部分)を囲むのに使われます。
「main」という言葉でも分かるように、ページの一番重要な部分を記述するのに使います。中に、div・article要素などを使ってコンテンツを構造化します。
ページの未尾に配置され、主に著作権やページに関する情報、連絡先など入れます。
改行するための要素。終了タグは必要ない。
重要なところに使われ、太字で表示される。
フォームを作成する。「id」を付与しJavaScriptで実行すると、フォーム内の情報が取得できる。中には「[https://developer.mozilla.org/ja/docs/Web/HTML/Element/input input要素]」などが子要素になる。
input要素のtype属性がtextのときよりも横縦に長い入力欄を作る。cols属性とrows属性で、この要素の大きさを指定できます。colsは平均的な文字幅で、一行に入る文字数を設定します。
CSSを直接HTMLに記述するときに使う要素。この要素内で記述したCSSは、そのHTMLでしか適用できない。
(ただし、最近のWindowsには「Microsoft Edge」が搭載されています)