HTML辞典 html要素、head要素、body要素、title要素、meta要素の解説

HTML辞典 HTML辞典
この記事は約13分で読めます。

ルート要素を表す<html>タグ、メタデータの集まりを表す<head>タグ、文書の内容を表す<body>、文書のタイトルを表す<title>タグ、文書のメタデータを表す<meta>タグの使用方法を掲載

HTML5

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素 カテゴリー コンテンツモデル
html要素 なし

    最初の子要素としてhead要素を1つ。その後にbody要素を1つ

    head要素 なし
    • メタデータコンテンツ
    • 1個以上のメタデータコンテンツ。title要素は必須

    iframe要素のsrcdoc属性値に入れられる文書内、もしくは別の手段でタイトル情報が提供されている場合は

    0個以上のメタデータコンテンツ

    body要素

    セクショニングルート

    html要素の2番目の子要素

    title要素

    メタデータコンテンツ

    テキスト

    meta要素

    メタデータコンテンツ

    グローバル属性(共通)

    グローバル属性は、すべての要素に指定できる共通の属性のことです。

    accesskey(アクセスキー)

    要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

    autocapitallze

    入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

    内容
    offまたはnone自動的な大文字化は指定しない
    onまたはsentences最初の文字を大文字化する
    words各語の最初の文字を大文字化する
    charactersすべての文字を大文字化する

    class(クラス)

    要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

    contenteditable(コンテント・エディタブル)

    要素の内容が閲覧者による編集可能かどうか指定します。

    内容
    trueまたは、空閲覧者による編集可能。
    false閲覧者による編集不可。

    data-

    カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

    dir(ディレクショナリティ)

    要素の内容の書字方向(文字を書き進める方向)を指定します。

    内容
    ltrテキストを左から右へ書き進める。「Left to Righ」の略
    rtl要素は編集不可。「Right to Left」の略
    autoユーザーエージェントによって自動的に書字方向を決める

    draggable

    Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

    内容
    テキストを左から右へ書き進める。「Left to Righ」の略
    autoユーザーエージェントによって自動的に書字方向を決める

    hidden(ヒドゥン)

    要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

    id(アイディー)

    要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

    空白文字は使用できません。

    lang(ランゲージ)

    要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

    例:lang=”ja”

    spellcheck(スペルチェック)

    要素の内容に対するスペルチェックの可否を指定します。

    trueスペルチェックをします。
    falseスペルチェックをしません。

    style(スタイル)

    要素に直接スタイルシートを指定します。

    ※style属性でスタイルを指定する方法はあまり推奨されていません。

    tabindex(タブインデックス)

    「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

    title(タイトル)

    要素に補足情報を加えます

    translate(トランスレート)

    翻訳対象にするかどうかを指定します。

    内容
    yes翻訳対象とする
    no翻訳非対象とする

    イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

    onclick

    要素をクリックしたときにスクリプトを実行します。

    oninput

    入力コントロールにデータを入力したときにスクリプトを実行します。

    onsubmit

    入力コントロールからデータを送信するときにスクリプトを実行します。

    html要素

    書式・概要

    <html 属性="属性値">HTML文書</html>

    HTML文書におけるルート要素。トップレベルの要素になります。

    使用できる属性

    manifest(マニフェスト)

    キャッシュマニフェストファイルは、オンラインでのアクセスに備えてブラウザがあらかじめキャッシュしておく外部リソースを指定したもので、内容はテキストファイルです。

    <html manifest="xxxxx.appcache">

    xmlns

    文書をXMLとして扱う場合は、名前空間宣言を記述します。

    <html xmlns="http://www.w3.org/">

    head要素

    書式・概要

    <head>メタデータのタグ</head>

    head要素は文書のタイトルやmeta要素の情報など、メタデータの集まりを表します。html要素の最初の子要素で1つだけ設置できます。

    body要素

    書式・概要

    <body>HTML文書内容</body>

    body要素は文書の内容を表します。html要素内でbody要素は1つだけ設置できます。

    title要素

    書式・概要

    <title>HTML文書内容</title>

    title要素は文書のタイトルを表します。基本的には省略できません。また、SEO的にも重要な意味があります。同じWebサイト内で、各ページのタイトルのテキストが重複しないよう推奨されています。

    すなりん
    すなりん

    検索エンジンの結果ページなどに影響するため、適切なタイトルをつけます。

    meta要素

    書式・概要

    <meta 属性="属性値">

    meta要素は文書における様々なメタデータを表します。メタデータとは文書の文字コードや概要、キーワードなどの文書に関する情報を表します。

    使用できる属性

    name

    要素に名前を与えることでメタデータの種類を示します。内容はcontent属性に設定します。

    <meta name="xxx" content="xxx">
    content-language文書の記述言語を指定するために使用します。この指定は非推奨となり、lang属性を使用します。
    content-type文字コードを指定する
    default-style優先スタイルシートを指定する
    refresh自動更新やリダイレクトを指定する
    set-cookieCookieを設定するために使用します。この指定は非推奨であり、代わりいHTTPヘッダーを使用します。
    application-name文書がWEBアプリケーションを利用している場合は、アプリケーション名を記述する。1文書に1つだけの記述します。
    author著作者を設定します。
    description文書の概要を記述します。検索エンジンのクローラーに読み取られて検索結果などにも表示されます。
    generator文書がソフトウェアによって記述、作成されている場合に、ソフトウェア名を記述するために指定します。
    keywords文書の内容を表すキーワードを記述するために指定します、カンマ(,)で区切って複数指定できます。
    現在の検索エンジンでは考慮していないため、指定は不要となりました。
    robots検索エンジンのクローラーによるWebページのインデックスを拒否したり、Webページ内のリンク先を探査されないようにできます。
    ただし、強制力はなくクローラーによります。
    viewportスマートフォン向けの文書の表示方法を指定する。キーワードを=でつなげて、カンマ(,)で区切り複数指定できます。

    src

    【必須】

    埋め込む画像のURL

    http-equiv

    content属性と併せて使用します。HTML文書で使用する言語や文字符号化方式、スタイルシート、更新方法、クッキーを指定します。

    属性値概要
    refresh自動更新やリダイレクトさせる
    X-UA-CompatibleInternet Explorerのレンダリング方法
    default-styleデフォルトのスタイルシートを指定

    content(コンテント)

    name、http-equiv属性に必ず併記する属性となり、それらの属性のメタデータを指定します。

    charset

    head要素内に記述することで、文書の文字コードを指定します。2つ以上の文字コードは指定することはできません。

    一般的には、htmlファイルに保存した際の文字コードを指定します。

    viewport(スマートフォン向けの表示方法を指定する)

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    iPhoneやAndroidなどのスマートフォンやタブレット端末のブラウザーは、多くの場合、幅90

    content属性値役割
    initial-scaleWebページが最初に読み込まれたときの拡大・縮小を指定します。
    初期では、Webページを端末画面に合わせます。指定できる値の範囲は、minimum-scaleとmaximum-scaleの値の範囲になります。
    width表示する幅を200px~10000pxの数値の範囲で指定します。
    初期値は980pxです。「device-width」を指定することで、端末の画面幅を指定できます。
    height表示する高さを223px~10000pxの範囲で指定します。
    「device-height」を指定することで、端末の画面高さを指定できます。
    user-scalable閲覧者にWebページの拡大・縮小を許可するか「yes or no」で指定します。初期値はyesです。
    minimum-scale許可する拡大率の下限を0~10の数値で指定します。初期値は、0.25です。
    maximum-scale許可する拡大率の上限を0~10の数値で指定します。初期値は、1.6です。

    サンプル

    「width=device-width」を指定して、端末画面の幅に合わせて表示されます。同時にWebページが表示される倍率は1です。

    <meta name="viewport" content="width=device-width,initial-scale=1.0 />

    ページを更新またはリダイレクト

    http-equiv属性にrefreshを指定すると、content属性の値で指定した時間で、ページを更新及びリダイレクトすることができます。ただし、この方法はあまり好ましくはありません。未対応のブラウザやページをロード後に意図しない不具合でリダイレクトができないことがあるので、サーバーサイド側でリダイレクトさせる方法を優先しましょう。

    <!-- ページ更新 -->
    <meta http-equiv="refresh" content="600" />
    <!-- 別のページへリダイレクト -->
    <meta http-equiv="refresh" content="1;URL=top.html" />

    概要を指定する

    検索エンジンはHTML文書に関する概要文を解釈して検索結果に表示します。

    <meta name="description" content="HTML文書の概要" />

    InternetExplorerの最新バージョンの標準モードを指定

    InternetExplorerは「互換表示」と「標準表示」のレンダリング方法を持っています。バージョンごとに表示を変えることができます。InternetExplorerの最新バージョンの標準モードを指定することで、表示の差異を統一することができます。

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    電話番号のリンクを無効化

    iPhoneなど、電話番号と判断したときにWebブラウザ側でリンクを自動的に設定する場合があります。意図しない数字の羅列があった場合に、リンクになるのを防ぎます。

    <meta name="format-detection" content="telephone=no" />

    検索エンジンにページをインデックスさせない

    検索エンジンにクロール、インデックスさせたくない場合に使用します。コンテンツとして価値がないものはSEOとして不利になるので、この設定をするとよいでしょう。たとえば、管理者画面やログイン画面、問い合わせフォームなどは、訪問者に見せるコンテンツ用途ではないため、クロールされても困るため設定するとよいでしょう。

    <meta name="robots" content="noindex, nofollow, noarchive" />

    テンプレート

    日本語で書かれた文書であれば、html要素に対してlang属性で「ja」を指定します。

    <!DOCTYPE html>
    <html lang="ja">
        <head>
          <meta charset="uft-8">
          <title>すなりんのぶろぐ</title>
          <meta name="description" content="C#言語の初心者向け入門について書かれた文書" />
          <meta name="author" content="すなりん記者" />
          <meta name="viewport" content="width=device-width,initial-scale=1.0 />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        </head>
        <body>
        </body>
    </html>

    コメント

    タイトルとURLをコピーしました