HTML Living Standard

HTML「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」は、WEBページ（ホームページ）を作成するためのマークアップ言語です。
今では多くのWebシステム、ホームページで利用されています。

HTMLは主に文書を意味的に記述するための言語として作られ、文章が構成されている要素がどのような役割を持っているかを指定しています。 この指定に利用されているのがタグと呼ばれ、文字列（コンテンツ）をタグで囲い、タグが持つ役割からその文字列（コンテンツ）がどのようなものかを示します。
HTMLとは、文章の構成要素が付与されたタグの集合体ともいえます。

タグが持つ役割などを決めている仕様は、2019年6月以降、WHATWG により作成され、それがW3C勧告となる流れになっています。

基本構文

                    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Sample page</title>
    </head>
    <body>
        <h1>Sample page</h1>
        <p>This is a <a href="demo.html">simple</a> sample.</p>
        <!-- this is a comment -->
    </body>
    </html>

HTMLドキュメントは、<!DOCTYPE html>の文書型定義（DTD）を記載してから始めます。文書型定義は必ず<html>タグより前に宣言し、これから先はHTMLであることをコンピュータに知らせています。

<html>はHTML文書のルート要素となり、<html>と</html>で囲った中がHTML文章であることを示します。<html>は、開始タグと呼ばれ、</html>は終了タグと呼ばれています。この開始タグから終了タグまでを○○○要素と呼びます。

<head>は、文章に関する情報を記載します。<head>と</head>で囲った内容は直接は表示されません。

<body>は、文章の本文を記載します。<body>と</body>で囲った内容は指示がない限り表示されます。

<!-- this is a comment -->の <!-- はコメントの始まりとなり、-->で囲った内容は表示されません。

以下にHTMLの基本テンプレートを置いておきます。HTMLを作成する場合によく利用しています。

    
        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">

            <title>ページのタイトル</title>

            <link rel="stylesheet" href="/assets/css/styles.css">
            <link rel="stylesheet" href="/assets/css/print.css" media="print">

            <meta name="description" content="ページの説明文">
            <meta property="og:title" content="ページのタイトル">
            <meta property="og:description" content="ページの説明文">
            <meta property="og:image" content="https://mywebsite.com/image.jpg">
            <meta property="og:image:alt" content="画像の説明文">
            <meta property="og:locale" content="ja_JP">
            <meta property="og:type" content="website">
            <meta name="twitter:card" content="summary_large_image">
            <meta property="og:url" content="https://mywebsite.com/page">
            <link rel="canonical" href="https://mywebsite.com/page">

            <link rel="icon" href="/favicon.ico">
            <link rel="icon" href="/favicon.svg" type="image/svg+xml">
            <link rel="apple-touch-icon" href="/apple-touch-icon.png">
            <link rel="manifest" href="/my.webmanifest">
            <meta name="theme-color" content="#FF00FF">
            </head>

            <body>
                <!-- コンテンツ -->
                <script src="/assets/js/script.js"></script>
            </body>
        </html>

Tag Reference

要素 説明 カテゴリ
aハイパーリンクフロー; フレージング*; インタラクティブ; パルパブル
abbr略語フロー; フレージング; パルパブル
addressページまたはarticle要素の連絡先情報フロー; パルパブル
areaイメージマップ上のハイパーリンクまたはデッドエリアフロー; フレージング
article自己完結型のシンジケーションや再利用可能な文書フロー; セクショニング; パルパブル
asideわずかに関連するコンテンツのためのサイドバーフロー; セクショニング; パルパブル
audioオーディオプレーヤーフロー; フレージング; エンベディッド; インタラクティブ; パルパブル*
bキーワードフロー; フレージング; パルパブル
baseハイパーリンクとフォームのための基底URLとデフォルトターゲットブラウジングコンテキストメタデータ
bdiテキスト方向の分離フロー; フレージング; パルパブル
bdoテキスト方向形式フロー; フレージング; パルパブル
blockquote別の情報源から引用されるセクションフロー; セクショニングルート; パルパブル
body文書の本体セクショニングルート
br詩や住所などにおける改行フロー; フレージング
buttonボタンコントロールフロー; フレージング; インタラクティブ; 記載; ラベル付け可能; 送信可能; フォーム関連; パルパブル
canvasスクリプタブルなビットマップキャンバスフロー; フレージング; エンベディッド; パルパブル
caption表題none
cite作品のタイトルフロー; フレージング; パルパブル
codeコンピューターコードフロー; フレージング; パルパブル
col表列none
colgroup表における列のグループnone
data等価な機械可読形式フロー; フレージング; パルパブル
datalistコンボボックスコントロールに対するオプションのためのコンテナーフロー; フレージング
dddt要素に対応するコンテンツnone
del文書から除去フロー; フレージング*
details詳細を隠すための公開コントロールフロー; >セクショニングルート; インタラクティブ; パルパブル
dfn定義例フロー; フレージング; パルパブル
dialogダイアログボックスまたはウィンドウフロー; セクショニングルート
div一般的なフローコンテナー、またはdl要素内の名前-値グループのためのコンテナーフロー; パルパブル
dl0個以上の名前-値グループから成る連想リストフロー; パルパブル
dtdd要素に対応するキャプションnone
em強調フロー; フレージング; パルパブル
embedプラグインフロー; フレージング; エンベディッド; インタラクティブ; パルパブル
fieldsetフォームコントロールのグループフロー; セクショニングルート; 記載; フォーム関連; パルパブル
figcaptionfigureのためのキャプションnone
figureオプションでキャプションをもつ図フロー; セクショニングルート; パルパブル
footerページまたはセクションのフッターフロー; パルパブル
formユーザー送信可能フォームフロー; パルパブル
h1, h2, h3, h4, h5, h6セクションの見出しフロー; ヘディング; パルパブル
head文書メタデータのためのコンテナーnone
headerページまたはセクションのための入門やナビゲーション補助フロー; パルパブル
hgroup見出しグループフロー; ヘディング; パルパブル
hr主題の変化フロー
htmlルート要素none
i代替音声フロー; フレージング; パルパブル
iframeネストされたブラウジングコンテキストフロー; フレージング; エンベディッド; インタラクティブ; パルパブル
img画像フロー; フレージング; エンベディッド; インタラクティブ*; フォーム関連; パルパブル
inputフォームのコントロールフロー; フレージング; インタラクティブ*; 記載; ラベル付け可能; 送信可能; リセット可能; フォーム関連; パルパブル*
ins文書への追加フロー; フレージング*; パルパブル
kbdユーザー入力フロー; フレージング; パルパブル
labelフォームコントロールのためのキャプションフロー; フレージング; インタラクティブ; パルパブル
legendfieldsetのためのキャプションnone
liリストの項目none
linkメタデータをリンクメタデータ; フロー*; フレージング*
main文書の主要なコンテンツのためのコンテナーフロー; パルパブル
mapイメージマップフロー; フレージング*; パルパブル
markハイライトフロー; フレージング; パルパブル
MathML mathMathMLルートフロー; フレージング; エンベディッド; パルパブル
menuコマンドのメニューフロー; パルパブル*
metaテキストメタデータメタデータ; フロー*; フレージング*
meterゲージフロー; フレージング; ラベル付け可能; パルパブル
navナビゲーションリンクをもつセクションフロー; セクショニング; パルパブル
noscriptスクリプトに対するフォールバックコンテンツメタデータ; フロー; フレージング
object画像、ネストされたブラウジングコンテキスト、またはプラグインflow; phrasing; embedded; interactive*; listed; form-associated; palpable
ol順序付きのリストフロー; パルパブル*
optgroupリストボックス内のオプションのグループnone
optionリストボックスまたはコンボボックスコントロール内のオプションnone
output計算された出力値フロー; フレージング; 記載; ラベル付け可能; リセット可能; フォーム関連; パルパブル
p段落フロー; パルパブル
paramobjectに対するパラメーターnone
picture画像フロー; フレージング; エンベディッド
pre整形済みテキストのブロックフロー; パルパブル
progress進捗バーフロー; フレージング; ラベル付け可能; パルパブル
q引用文フロー; フレージング; パルパブル
rpルビ注釈テキストに対する丸括弧none
rtルビ注釈テキストnone
rubyルビ注釈フロー; フレージング; パルパブル
s正確でないテキストフロー; フレージング; パルパブル
sampコンピューター出力フロー; フレージング; パルパブル
script埋め込みスクリプトメタデータ; フロー; フレージング; スクリプトサポート
section汎用の文書またはアプリケーションのセクションフロー; セクショニング; パルパブル
selectリストボックスコントロールフロー; フレージング; インタラクティブ*; 記載; ラベル付け可能; 送信可能; リセット可能; フォーム関連; パルパブル*
slotシャドウツリールートフロー; フレージング
smallサイドコメントフロー; フレージング; パルパブル
sourceimgの画像ソース、またはvideoもしくはaudioのメディアソースnone
span汎用フレージングコンテナーフロー; フレージング; パルパブル
strong重要フロー; フレージング; パルパブル
style埋め込みスタイル情報メタデータ
sub下付き文字フロー; フレージング; パルパブル
summarydetailsのためのキャプションnone
sup上付き文字フロー; フレージング; パルパブル
SVG svgSVGルートフロー; フレージング; エンベディッド; パルパブル
table表フロー; パルパブル
tbody表中の行のグループnone
td表のセルセクショニングルート
templateテンプレートメタデータ; フロー; フレージング; スクリプトサポート
textareaマルチラインテキストコントロールフロー; フレージング; インタラクティブ*; 記載; ラベル付け可能; 送信可能; リセット可能; フォーム関連; パルパブル*
tfoot表中のフッター行のグループnone
th表のヘッダーセルインタラクティブ*
thead表中のヘッダー行のグループnone
time日付または時刻関連データの等価な機械可読形式フロー; フレージング; パルパブル
title文書のタイトルメタデータ
tr表の行none
track時限テキストトラックnone
u発声されない注釈フロー; フレージング; パルパブル
ulリストフロー; パルパブル*
var変数フロー; フレージング; パルパブル
videoビデオプレーヤーフロー; フレージング; エンベディッド; インタラクティブ; パルパブル
wbr改行の機会フロー; フレージング

参考