最終更新日：11/19/2024

HTML

example.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="テスト画像" />
  </body>
</html>

要素

.html

<!DOCTYPE html>

文書型宣言
必須の前書き

昔々、 HTML がまだ出来たばかりの頃（1991 ～ 2 年）、文書型宣言は HTML ページが正しい HTML と見なされるために従わなければならない、一連のルールへのリンクとして機能することを意味していました。つまり、自動エラーチェックなどの有益なものを表すことができました。しかし、最近ではあまり機能しておらず、文書が正しく動作するために必要なだけです。今はこれだけ知っていれば大丈夫です。

引用：https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

使用するHTMLのバージョンを宣言する

HTML 文書 / ルート要素

.html

<html></html>

ページのすべてのコンテンツを囲み、ルート要素と呼ばれることもある。
文書の主要な言語を設定するlang 属性も指定することができる。

文書メタデータ（ヘッダー）要素

.html

<body></body>

ページの閲覧者に向けて表示するためのコンテンツではない、 HTML ページに含めたいものをすべて収めるための入れ物である。
検索エンジン向けのキーワードやページのディスクリプション（説明書き）、ページの見た目を変更するための CSS、文字コードの宣言などを含む。

メタデータ要素

.html

<meta charset="utf-8">

この要素は、大部分の書き言葉の文字のほとんどを含むUTF-8を文書で使用するように設定している。
基本的には、文書はどのテキストコンテンツでも扱えるようになる。
これを設定しない理由はないし、あとでいくつかの問題を回避するのに役立つ。

文書題名要素

.html

<title></title>

ページのタイトルを指定する。
このタイトルはページが読み込まれた時にブラウザーのタブに表示される。
ブックマークやお気に入りに登録した時の説明にも使われる。

ビューポート属性

.html

<meta name="viewport" content="width=device-width">

このページがある幅のビューポートで描画されることを保証し、モバイルブラウザーがビューボードより広い幅でページを描画した上で縮小して表示するのを防ぐ。

文書本体要素

.html

<body></body>

テキスト、画像、ビデオ、ゲーム、再生可能な音声トラックなど、ページを訪れたウェブの利用者に再生したいすべてのコンテンツが含まれる。

引用：https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics