Lesson 1

HTML

Lesson 1 Chapter 1

HTMLとは

Webが誕生しておよそ30年、現在では世界の半数の人がインターネットに接続して Web上に公開されたWebページを閲覧しています。皆さんもスマートフォンやPCを使って、 Web上で配信されているニュースやブログを読んだり、動画を閲覧したり、商品を購入したりと、インターネットを利用した経験があると思います。 Webの利用者は年々増加し、Webを使ったサービスの規模は拡大し続けています。日本におけるWeb業界の市場規模は2021年に2兆円※(1)を超え、さらに発展すると見込まれています。また、拡大する市場を支えるWebエンジニアの需要はますます高まっています。受講生の皆さんの中には、Web業界で働きたい、起業したいと思っている人も多いのではないでしょうか。

本レクチャーでは、Webを支える大事な技術であるHTML※(2)について学習していきます。 HTMLはWebページを作るために開発された言語です。現在公開されているほとんどのページは、HTMLで作られています。もちろん、このページもHTMLで作られています。 Web業界への第一歩として、Webページを自分で作ってみたいと思いませんか。

唐突に、HTMLやWebページを作る言語と言われても、 HTMLって何なの？なぜ必要なの？と感じる人もいると思います。 HTML項に入る前に、HTMLの簡素な説明と、なぜ必要なのかについて説明します。

まず、HTMLの正式名称は、Hypertext Markup Language※(3)と言います。ハイパーテキストを記述するマークアップ言語といった意味になります。ハイパーテキストとマークアップについてはHTML項で説明します。 HTMLは、Webサイトのコンテンツの構造をコンピュータに示します。構造とは、HTMLで記述された文書であることやブラウザに表示させたい情報であるといったことをコンピュータに認識させるための、ルールに則った形式のことです。次の図は、HTMLで記述された文書の簡素な説明図になります。

ここでは、HTMLは予め決められたルールに則って記述するものである、ということを押さえておいてください。構造の詳細については、後の章で説明します。

構造が必要な理由としては、例えば次の3つの理由が挙げられます。

コンピュータにコンテンツを正しく認識させるため
読み手にとって読みやすい文書にするため
CSSやJavaScriptでスタイルや動きを指定するため

本レクチャーでは、1と2を中心に説明をしていきます。 Webを支える大事な技術であるHTMLについて、私たちと一緒に学習を進めていきましょう。

情報

出典

※(1)経済産業省特定サービス産業動態統計調査2022年5月確報

日本語読み

※(2)エイチティーエムエル
※(3)ハイパーテキストマークアップランゲージ

HTML

HTMLは、ハイパーテキストを記述するマークアップ言語です。まず、マークアップについて説明します。マークアップとは、タグで文書を囲むことで、文書の構造をコンピュータに示すことです。タグとは、<body>といった < と > および、やまカッコで囲まれた文字のことです。文書の構造には、見出し・段落・表・リストといったものがあります。例えば、どこからどこまでが見出しなのかをタグで囲って要素として示すことで、見出しという構造をコンピュータが認識できるようになります。また、読み手にとっても視覚的に読みやすい文書になります。タグと要素については後の章で説明します。

マークアップの有無による表示の違いを確認するため、マークアップされていない文書と、マークアップされた文書を見てみましょう。次の文書はマークアップされていない文書です。

<body>
ここがタイトルです。
ここがサブタイトルです。
リスト化しています。リスト化しています。リスト化しています。
リスト化しています。リスト化しています。リスト化しています。
リスト化しています。リスト化しています。リスト化しています。
リスト化しています。リスト化しています。リスト化しています。
リスト化しています。リスト化しています。リスト化しています。
</body>

上のHTMLは、bodyタグ内に文書を記述しています。しかし、文書内にタグは使われていません。ブラウザから表示を確認してみましょう。

マークアップされていない文書

一かたまりの抑揚のない文書になっています。文書に構造を与える要素が指定されていないため、ブラウザはどれが見出しなのかといった構造を認識できません。

次の文書はマークアップされた文書です。

<body>
    <h1>ここがタイトルです。</h1>
    <h2>ここがサブタイトルです。</h2>
    <ul>
        <li>
            リスト化しています。リスト化しています。リスト化しています。
        </li>
        <li>
            リスト化しています。リスト化しています。リスト化しています。
        </li>
        <li>
            リスト化しています。リスト化しています。リスト化しています。
        </li>
        <li>
            リスト化しています。リスト化しています。リスト化しています。
        </li>
        <li>
            リスト化しています。リスト化しています。リスト化しています。
        </li>
    </ul>
</body>

上のHTMLは、文書に<h1>タグ、<h2>タグ、<li>タグを指定し、文書の構造をコンピュータに示しています。ブラウザから表示を確認してみましょう。

マークアップされた文書

どこがタイトルで、どこがサブタイトルなのかといった構造が、読み手にとってもわかりやすくなっています。

マークアップすることで、ブラウザが要素の意味を認識できるようになります。ブラウザが文書の構造を認識したことで、読み手にとっても読みやすい表示に変わります。また、検索エンジンがページの構造を理解し解析することができるようになります。

次に、ハイパーテキストについて説明します。ハイパーテキストとは、タグで囲った要素にURLを埋め込むことで、別ページへの遷移や、画像・動画といったデータファイルをサイト内に埋め込むことができるテキストのことです。テキストを超えたテキストといった意味になります。例えば次のようなコードを記述します。

<p><a href="https://www.google.com/?hl=ja">Google</a></p>

aタグはリンクを指定するタグです。 href属性でリンク先を指定します。上の例では、GoogleのWebサイトにリンクづけしています。属性については後の章で説明します。

ハイパーリンクされた文書

GoogleをクリックするとGoogleのWebサイトに遷移します。このようにして、サイト内に遷移先のURLを埋め込むことができます。

画像の埋め込みの仕方についても確認してみましょう。上のハイパーリンクされた文書の画像は次のようにして本ページに埋め込んでいます。

<p><img src=".\proq-text-image\14\14-4.png" alt="kouzou3.png" /><span>ハイパーリンクされた文書</span></p>

imgタグは文書内に画像を表示するためのタグです。 src属性で表示する画像ファイルのパスを指定します。パスとは、使用するファイルの保存先を示す文字列です。ファイルの経路を示しています。上の例の場合は、imgフォルダ内のkouzou3.pngというパスを指定しています。このようにして、画像をサイト内に埋め込むことができます。

WebページのコンテンツにURLを埋め込みリンクづけすることをハイパーリンクと言います。ハイパーテキストを使うことで、ハイパーリンクによって関連するコンテンツ同士を結びつけることができます。

ここまでで、 HTML文書は、マークアップすることでコンピュータに構造を示すことができること、ハイパーテキストとは、ページ内にリンクを埋め込むことができること、について説明してきました。この2点について理解していただくことが重要です。

情報

HTMLの歴史

1989年、スイス・ジュネーブにある欧州原子核研究機構においてティム・バーナーズ・リー氏が設計。
1994年、ティム・バーナーズ・リー氏が立ち上げたW3CがHTMLを国際標準技術として策定。
1995年、W3CがHTMLの管理団体になる。
2004年、W3Cの開発方針に不満を持った開発者がWHATWGを結成。
2014年、WHATWGが提唱したHTML Living Standardを基に、W3CがHTML5.0を策定し勧告。
2017年、W3CがHTML5.2を勧告。※(1)
2019年、W3CはHTMLとDOMの策定の権限をWHATWGに譲渡。
2022年現在、WHATWGが新技術追加の検証を継続。

※(1) 2022年7月現在の最新バージョン。

DOCTYPE宣言

HTMLファイルの先頭に記述する宣言文をDOCUTYPE宣言と言います。マークアップ言語の種類やバージョンを定義します。宣言したHTMLやXHTMLのバージョンで定められているルールに従ってソースコードを記述することになります。例えば、2022年7月現在のHTMLの最新バージョンであるHTML5では、次のように宣言します。

<!DOCTYPE html>

古いバージョンのHTMLを使う理由がなければ、最新バージョンのHTMLを使って宣言しましょう。

ブラウザに表示

さっそくHTMLファイルを作って、ブラウザに表示してみましょう。 Windowsをお使いの場合はメモ帳を使います。メモ帳が分からない人は、Windowsの検索からメモ帳を検索してみてください。※(1)　メモ帳を開いたら次のソースコードをコピー&ペーストします。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document></title>
</head>
<body>
 <p>HTML5でファイルを作りました。</p>
</body>
</html>

次のようにHTMLを貼りつけます。

メモ帳のメニューからファイルをクリックし、名前を付けて保存を選択します。名前は任意です。今回はindex.htmlと名前をつけます。拡張子は.htmlと指定してください。拡張子とは、Wordの場合は.doc、Excelの場合は.xlsxといった、ファイル名の後に続くファイルの種類を示す文字のことです。 HTMLで記述したファイルは.htmlとして保存します。デスクトップにファイルを保存します。

ブラウザを開きます。デスクトップに保存したファイルをドラッグして、ブラウザのタブにドロップします。このようにすると、ファイルをブラウザから表示することができます。

ブラウザには、HTML文書の<p></p>で囲まれたHTML5でファイルを作りました。 が表示されます。 HTMLを使ってWebページを作り、ブラウザから表示することができました。

情報

※(1)メモ帳の開き方

Windowsの検索をクリックします。

検索窓にメモ帳と入力します。

メモ帳をクリックしてアプリを開きます。

Lesson 1 Chapter 2

HTMLを構成するもの

HTMLには、見出し・段落・表・リストといった構造を表すタグが用意されています。タグを使って文書を囲むことで要素を作り、要素を作ることでコンピュータに文書の構造を示します。

本章では、タグとは何か、要素とは何か、タグと要素の違いは何か、といったタグにより構成されるもの、要素に設定できるものについて説明をしていきます。

情報

構造とは、HTMLで記述された文書であることやブラウザに表示させたい情報であるといったことをコンピュータに認識させるための、ルールに則った形式のことです。

タグとは、<p>といった < と > および、やまカッコで囲まれた文字のことを指します。やまカッコで囲まれた文字が意味を表しています。例えば、<h1>というタグは、hはHeadingの略、数字の1は一番大きな見出しを意味し、大見出しを表します。また、<p>というタグは、Paragraphの略で段落を表します。

タグには開始タグと終了ダグがあり、<開始タグ>文書<終了ダグ>といったように、意味づけしたい文書を囲みます。タグを含めてタグで囲まれた範囲を要素と言います。要素については、次の要素項で説明します。要素を作ることで、見出しや段落といった構造をコンピュータに示すことができます。次の例では段落を表す<p>タグを文書につけています。

<p>HTML5でファイルを作りました。</p>

タグを赤字で示します。

開始タグは<p>になります。終了タグは</p>というようにスラッシュを付与します。タグをつけたことにより、どこからどこまでが段落なのかを明確に表すことができます。

タグには、終了タグが存在しない場合があります。例えば、画像を表示するimgタグです。

<img src="画像のパス" alt="画像の説明">

imgタグは要素の内容が存在しませんので、終了タグがありません。要素の内容については、コンテンツ項で説明します。

要素

要素とは、タグを含め、開始タグと終了タグの間にある構成全てを指します。次の例では段落を表す<p>タグを文書につけています。

<p>HTML5でファイルを作りました。</p>

要素を赤字で示します。

タグを含め、開始タグ<p>と終了タグ</p>で囲まれたものが要素になります。タグとの違いは、タグで囲まれた文書を含むか、含まないかになります。つまり、タグで囲まれた文書を含む場合が要素、タグのみを指す場合をタグと言います。

コンテンツ

コンテンツとは、タグで囲まれた要素の内容です。次の例では段落を表す<p>タグを文書につけています。

<p>HTML5でファイルを作りました。</p>

コンテンツを赤字で示します。

タグで囲まれたHTML5でファイルを作りました というテキスト部がコンテンツになります。コンテンツは、実際にWebページ上に表示される部分になります。

属性

HTMLの要素に何かしらの設定を追加したい場合、属性を指定します。設定とは、例えば、対象の文字の色を変更したい、対象の画像の幅と高さを変更したいといった、ユーザが望む条件や動作を追加するための値のことです。次の例では、段落を表す<p>タグにclass属性をつけています。 class="content"と指定することでclass属性にcontentという属性値を与えています。

<p class="content">HTML5でファイルを作りました。</p>

属性と属性値を赤字で表示します。

class属性は、属性値を使って要素にスタイルを適用させることができます。スタイルとは、サイズ、色、レイアウトといった見た目のことです。次に示す内容は、HTML文書にCSSを適用させる内容になっています。 CSSの設定方法については、CSS章で説明します。

.content{
    font-weight: 700;
    color: red;
}

上の例は、CSSファイルへのスタイルの記述を表しています。 class属性に与えられた属性値のことをクラス名と言い、クラス名に対してスタイルを設定します。 CSSではclassを.で表します。 .contentに対して、文字色を赤色に、フォントの太さを太くする設定を追加しています。

スタイル設定前のブラウザからの表示は次の通りです。

スタイル設定後のブラウザからの表示は次の通りです。

設定した値が反映され、赤色の太字に文字が装飾されたことが確認できます。

ここまでで、タグ、要素、コンテンツ、属性の4項目を説明しました。本チャプターでは、タグ、要素、コンテンツ、属性が、それぞれどういったものなのか、きちんと区別して理解していただくことが重要です。

情報

HTMLファイルにCSSを設定して実際に表示を確認したい場合、メモ帳を開いて次のようにファイルを作成します。

CSSファイルの作成

ファイルをstyle.cssとして保存

HTMLファイルを作成して拡張子を.htmlとして保存

HTMLファイルとCSSファイルを同じフォルダに格納

HTMLファイルをブラウザのタグにドロップ＆ドラッグして表示を確認してみてください。

Lesson 1 Chapter 3

HTML文書の構造

本チャプターでは、HTMLの構造と、代表的なタグについて学習します。 HTMLの構造や代表的なタグを知ることは、HTMLの習得を早め、深い理解につながります。タグは種類が多く学習内容にボリュームがあります。分からないポイントがあれば何度でも見返し、実際にコードを書いてみてください。コードを書くことでタグの役割が分かり、理解の深化につながります。また、タグの覚え方として、目的別に一くくりにして覚えるといった工夫もありかもしれません。 Webエンジニアを目指す第一歩として、HTMLの構造とタグを理解しましょう。

まず、HTML文書に構造があることは、以前の章でも触れました。 HTML文書は、予め決められたルールに則って記述します。この決められた記述形式が文書の構造といった意味になります。次の画像は、HTML文書の大まかな構造を表しています。

緑色の枠線内がHTML文書を示しています。先頭には、DOCTYPE宣言を記述します。次に html要素を記述します。 html要素の中には、文書の情報を記述するhead要素、本文を記述するbody要素が含まれています。この要素の中に要素が含まれることを入れ子構造と言います。ここでは、HTML文書がDOCTYPE宣言、html要素、head要素、body要素といった 1つの宣言と3つの要素から成り立っていて、入れ子構造になっていることを押さえておいてください。

実際にHTML文書のひな形を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

エディタをお使いの場合は、ショートカットキーを使うと、上のひな形をすぐに作成することができます。例えば、VSCodeを使っている場合、新規作成したHTMLファイルを開き、先頭に!を記述してタブキーを押すと、上のひな形が作成されます。中身を見てみると、DOCTYPE宣言、html要素、head要素、body要素の順で記述されていることがわかります。複雑に見えるのは、head要素に見慣れないタグが記述されているからです。これらのタグを含めHTML文書の構造をなす、宣言と各要素の意味について、これから説明をしていきます。

DOCTYPE宣言

HTMLファイルの先頭に記述する宣言文を、DOCTYPE宣言と言います。要素ではなく宣言です。必ず先頭に記述するものと決められていて、マークアップ言語の種類やバージョンを指定します。指定したマークアップ言語のバージョンにより、ブラウザの表示モードが変わります。表示モードは、かつてブラウザの主流であったNetscape NavigatorとMicrosoft Internet Explorer 向けの表示モード、 Web標準が作成された以降の表示モードの2種類に大別されます。 HTML5を指定した場合は、Web標準 ※(1) に準拠した標準準拠モード ※(2) で表示されます。また、指定したHTMLやXHTMLのバージョンで定められているルールに従って、ソースコードを記述することになります。特に理由がなければ、2022年7月現在で最新のバージョンであるHTML5を指定しましょう。 HTML5でのDOCTYPE宣言は次のようになります。

<!DOCTYPE html>

情報

※(1)Web標準とは、世界的に推奨されているWebサイトに関する規格です。文章構造を正しく記述することを求めています。
※(2)標準準拠モードとは、HTMLとCSSで指定された通りの表示をブラウザが行うモードのことです。もう一つの表示モードとして、後方互換モードがあります。これはWeb標準が策定される以前のブラウザを利用する場合に使います。レイアウト崩れをおさえたりします。

html要素

html要素は、HTML文書のトップレベルの要素になり、他のすべての要素はhtml要素の子孫として配置することになります。トップレベルとは、入れ子構造の一番外側に配置するといった意味です。 html開始タグからhtml終了タグまでの間がHTML文書であることを示します。次に示すコードのように、<html lang="ja">といった、開始タグの中に属性を与えることができます。 lang属性は、どの言語で記述されているのを指定するものです。属性値として、日本語の言語コード"ja"を指定しています。

<html lang="ja">
    //省略
</html>

head要素

head要素は、文書のヘッダ部分を示すタグです。 html要素の中、body要素の前に配置することになります。次のコードのようにhead要素には、metaタグ、titleタグ、さらに、必要な場合には、linkタグ、scriptタグを使って、本文以外の情報であるメタ情報を記述します。メタ情報については、メタ情報項で説明します。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

body要素

bodyタグには、文書や画像といった実際にブラウザの画面上に表示される内容を記述します。 html要素の中、head要素の後に配置することになります。文書に意味づけするタグをつけることで、見出しや段落、画像の埋め込み、他文書へのリンクといった文章の構造をコンピュータに示すことができます。タグで囲われた文書や画像といったコンテンツがブラウザに表示されます。

<body>
    //ここに本文を記述します。
</body>

メタ情報

メタ情報には、Webサイトの本文以外の情報を記述します。記述されたメタ情報は、 Googleのスパイダーといったロボット型検索エンジンがネットワーク上を巡回した際に拾われます。拾われたメタ情報は、例えば、検索結果ページに表示されるWebサイトのタイトルや概要として使われます。 Web上に表示されるメタ情報は、title要素とdiscriptionに関連する情報のみになり、他のメタ情報は画面に表示されることはありません。次の画像は、title要素とdiscriptiont属性がブラウザで表示される例です。 titleに記述した「株式会社ヒプスター|コードで世界を変える」とdiscriptionに記述した概要が社名の下に表示されていることが確認できます。

検索結果ページに表示されたtitleとdiscription

ここからはメタ情報に記述するタグを紹介していきます。

titleタグ

titleタグには、ページの題名を記述します。ブラウザのタイトルバーやページのタブに表示されます。ページの題名は、SEOに著しい影響を与えることがあり、短い一般的な単語よりも、説明的な文書が効果が高いと言われています。

<title>Document</title>

ブラウザのタグに表示されたtitle

情報

SEOとは、検索エンジンを利用した人が自社サイトに流入する割合を増やすための施策です。特定のキーワードでの検索結果ページで、自社サイトのページを上位に表示させるため、ページの内部設計、外部サイトとのリンクといった表示に影響を及ぼす要因を調整します。

linkタグ

linkタグは、現在の文書と外部のリソースとの関係を指定します。つまり、現在の文書と、外部のファイルやページを関連づけます。ひな形に記述がないため、必要な場合に追加します。例えば、外部からCSSファイルを読み込ませたい場合、次のように外部にあるCSSファイルのパスを指定することで、ファイルを読み込ませることができます。

<link href="style.css" rel="stylesheet" type="text/css">

上の例では、読み込ませるCSSファイルのパスをhref属性で指定しています。 rel属性の属性値にはstylesheetを与えています。 rel属性は、linkタグが記述されたファイルと、href属性で指定したファイルとの関係性を示します。ブラウザがrel属性を見てファイルの種類を確認して、href属性で指定したファイルを読み込みます。つまり、rel属性は、href属性で指定したファイルがスタイルシートであることを読み込む前にブラウザに示しています。 type属性には、外部リソースのメディアタイプ ※(1) を指定します。 text/cssは、人間が読むことのできるテキストデータでCSSファイルであることを示しています。

情報

※(1)メディアタイプとは、文書やファイルの形式を示す拡張子です。拡張子とは、wordであればファイル名の後に続く.docといった、そのファイルがどのようなファイルなのかを示す記号です。 Webでは、データの形式を示す考え方として、拡張子とメディアタイプという2つの考え方があります。 WEBサーバーとWEBブラウザの間では、メディアタイプでデータ形式を指定します。

scriptタグ

scriptタグは、スクリプトを文書内に埋め込んだり外部スクリプトを読み込んだりするために使用するタグです。ひな形に記述がないため、必要な場合に追加します。例えば、外部からJavaScriptファイルを読み込ませたい場合、次のように外部にあるJavaScriptファイルのパスを指定することで、ファイルを読み込ませることができます。

<script type="text/javascript" src="sample.js"></script>

type属性には外部リソースのメディアタイプを指定します。 text/JavaScriptは、人間が読むことのできるテキストデータでJavaScriptファイルであることを示しています。 src属性には、読み込ませるJavaScriptファイルのパスを指定しています。

metaタグ

metaタグは、今まで紹介したメタ関連要素では表すことができない任意のメタ情報を記述します。例えば、Webサイトの文字エンコーディング、Webサイトの説明といった情報をブラウザや検索エンジンに示すといった場合です。さっそくどのような属性があるのか、見ていきましょう。

次の例では、charset属性に文字エンコーディングを指定しています。文字化けを防ぐために指定します。

<meta charset="utf-8">

文字エンコーディング ※(1) はメディアタイプである必要があります。 HTML5では、UTF-8を指定することが推奨されています。

情報

エンコーディングとは、データを一定の規則に従って目的の情報に変換することです。文字エンコーディングとは、文字をコード化することです。例えば「あ」という文字をUTF-8で文字エンコーデイングすると、「E38182」という文字コードに変換されます。コンピュータは文字が読めませんので、文字コードに変換して文字を認識させます。文字を認識できないと文字化けが発生します。

次の例では、http-equiv属性を使って、Interner Explorerの表示対策を指定しています。

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

簡単に説明すると、どのバージョンのInterner Explorerでブラウザを表示させるのか指定しています。 IE=edgeと指定すると、最新バージョンのInterner Explorerで表示するといった意味になります。実は2022年現在では指定する必要はありません。ひな形に記述されますが削除しても問題ありません。理由は、Interner Explorerのサポートが終了して、使われなくなってきたからです。

次の例では、name属性に属性値としてviewportを与えています。

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

viewportは、PCやスマートフォンといったデバイスごとにコンテンツの表示領域を設定するものです。 width=device-widthでは、表示幅をデバイスの幅に合わせるといった指定をしています。レスポンシブデザインを意識したレイアウトを実現するために設定します。

次の例では、name属性に属性値としてdiscriptionを与えています。ひな形に記述がないため、必要な場合に追加します。

<meta name="description" content="サイトの説明文">

discriptionは、ページのコンテンツに関する簡潔で正確な概要を示す属性値です。 content属性が持つ属性値と関連づけられ、contentの属性値がサイトの説明文になります。記述された説明文は検索エンジンに拾われ、検索結果ページにWebサイトの説明文として表示されます。

ここまでで、DOCTYPE宣言、html要素、head要素、head要素に含まれるメタ情報を説明しました。 Webサイトを正しく表示させるために、ブラウザに示す大切な情報の設定欄といった内容です。一つ一つの役割を押さえて理解して進みましょう。ここからはbody要素に記述する文書の構造を作るタグについて学習します。

テキストコンテンツ

body要素には、ブラウザに表示したい内容を記述します。文書、画像、動画、他のWebサイトの埋め込みといった記述です。これらの内容をタグを使ってブラウザに示し構造化することで、ブラウザがWebページの意味を理解でき、また、読み手にとっても読みやすい構造としてページを表示できます。テキストコンテンツ項では、テキストで書かれたコンテンツの構造をブラウザに示すタグである、見出し、段落、リストについて説明します。

見出し

文書には章、節、項といった見出しがあります。 HTMLでは見出しを示すタグとして、<h1>タグから<h6>タグまで設定できます。hはHeadingの略です。 h1が一番大きな見出しになり、数字が小さくなるにつれて下位の見出しという意味です。見出しのタグはh1から順番に使います。同じ数字のものが複数ある場合は同じランクとして扱われます。次のコードはh1からh6までのタグを指定したコードです。

<h1>見出しです 見出しです</h1>
<h2>見出しです 見出しです</h2>
<h3>見出しです 見出しです</h3>
<h4>見出しです 見出しです</h4>
<h5>見出しです 見出しです</h5>
<h6>見出しです 見出しです</h6>

ブラウザから表示を確認すると、数字の大きさにより文字のサイズと太さが変わっていることがわかります。

段落

文書には段落があります。HTMLでは段落を示すタグとして、<p>タグが指定できます。 pはParagraphの略です。 <p>タグで囲まれた文章はひとかたまりの文章を表します。次のコードはpタグを指定したコートです。

<p>見出しです 見出しです</p>
<p>見出しです 見出しです</p>

ブラウザから表示を確認すると、pタグで囲まれたコンテンツが一かたまりとなり、改行されていることがわかります。

順序ありのリスト
<ol>タグで囲むことで順序ありのリストを示します。olはordered listの略です。リストに含む項目を<li>タグで囲って記述します。 type属性は、項目の頭にふる番号を、例えば、算用数字やアルファベットで指定したい場合に使います。次の例は、順序ありのリストのコード例です。 type属性にtype="A"と指定して、アルファベットを指定しています。

<ol type="A">
    <li>データ1</li>
    <li>データ2</li>
    <li>データ3</li>
</ol>

順序なしのリスト
<ul>タグで囲むことで順序なしのリストを示します。ulはunordered listの略です。リストに含む項目を<li>タグで囲って記述します。 type属性は、項目の頭にふる記号を、例えば、黒丸や白丸で指定したい場合に使います。次の例は、順序なしのリストのコード例です。 type属性にtype="circle"と指定して、白丸を指定しています。

<ul type="circle">
    <li>データ1</li>
    <li>データ2</li>
    <li>データ3</li>
</ul>

メディアコンテンツ

Webページは文書だけでは面白くありません。興味を引く、ワクワクするようなWebページを作り上げるために、 HTMLでは、画像、動画、音声といったマルチメディアを用いることができます。メディアコンテンツ項では、メディアとして埋め込まれたコンテンツの構造をブラウザに示すタグである、画像、ビデオ、オーディオについて説明します。

画像

文書には画像を埋め込むことができます。画像を示すタグとして<img>タグを指定します。 <img>はimageの略です。次のようにして画像を埋め込むことができます。

<p><img src=".\proq-text-image\14\14-28.png" height="60" width="400" alt="サンプル画像">サンプルテキスト</p>

サンプル画像サンプルテキスト

src属性で表示する画像ファイルのパスを指定します。画像形式はGIF、JPEG、PNGが使われます。画像サイズは、高さをheight属性、幅をwidth属性で指定します。

ビデオ

文書にはビデオを埋め込むことができます。ビデオを示すタグとして<video>タグを指定します。次のようにしてビデオを埋め込むことができます。

<video src="video/Clouds - 64759.mp4" width="500" controls="controls"</video>

src属性で表示する動画ファイルのパスを指定します。 controls属性で、ブラウザー標準の動画コントロールを表示するかどうかといった情報を指定します。

オーディオ

文書にはオーディオを埋め込むことができます。オーディオを示すタグとして<audio>タグを指定します。次のようにしてオーディオを埋め込むことができます。

<audio src="audio/mondo_01.mp3" controls="controls"</audio>

src属性で音源のパスを指定します。 controls属性で、ブラウザー標準のオーディオコントロールを表示するかどうかといった情報を指定します。

表

HTMLには表組みを行うタグが準備されています。表組みには複数のタグを使いますので、まず、シンプルな表のコードを示し、コードに沿ってタグの紹介をします。その後、属性値を追加した複雑な表を作ります。

シンプルなテーブルのコードは次の通りです。

<table>
    <thead>
        <tr>
            <th>タイトル1</th>
            <th>タイトル2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>テーブルデータ1</td>
            <td>テーブルデータ2</td>
        </tr>
    </tbody>
</table>

tableタグ

<table>は <tr>、 <th>、 <td>などと組み合わせて表を作るタグです。 tableタグで囲むことで、表の範囲を示します。

theadeタグ

<theade>は表のヘッダー部分を表すタグです。 table要素の子要素として指定します。thead要素はtable要素に1つだけになるようにします。

trタグ

<tr>は表の行を表すタグです。行は横方向の並びのことです。

thタグ

<th>は表の見出しを表すタグです。

tbodyタグ

<tbody>は表の本体となる行グループを表すタグです。表のボディ部分としてグループ化されます。

tdタグ

<td>は表の内容を表すタグです。

上のコードでは、表として表示する範囲をtableタグで囲んでいます。見出しとして表示する部分をtheadタグで囲み、その子要素にtrタグを置きます。さらに、trタグの子要素としてthタグを配置して、表のタイトルを記述しています。次に、データを表示するボディ部をtbodyタグで囲み、その子要素にtrタグを置きます。さらに、trタグの子要素としてtdタグを配置して、表のデータを記述しています。ブラウザから表示を確認してみましょう。※(2)

thタグで囲まれたタイトル1とタイトル2がテーブルの見出しとして表示されます。 tdタグで囲まれたテーブルデータ1とテーブルデータ2がデータとして表示されるセルになります。

情報

※(2)テーブルの表示には以下のようなCSSを設定しています。

@charset "utf-8";
.content{
    font-weight: 700;
    color: red;
}
table,td {
    border: 1px solid #333;
}
thead,tfoot {
    background-color: #333;
    color: #fff;
}
caption {
    padding: 10px;
}

属性を追加して、複雑な表を作ってみましょう。一つ目のテーブルをベースにして、タイトル1が2列に、テーブルデータ2が2行にまたがる表を作ります。次のように記述します。

<table>
    <caption>キャプション</caption>
    <thead>
        <tr>
            <th  colspan="2">タイトル1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>テーブルデータ1</td>
            <td rowspan="2">テーブルデータ2</td>
        </tr>
        <tr>
            <td>テーブルデータ3</td>
        </tr>
    </tbody>
</table>

一つ目の表との違いは、

thタグにcolspan属性を追加し、属性値として2を追加
tdタグにrowspan属性を追加し、属性値として2を追加
captionタグにより表にキャプションを追加

colspan属性に属性値2を追加したことで、2列にまたがるセルを表すことができます。 rowspan属性に属性値2を追加したことで、2行にまたがるセルを表すことができます。ブラウザから表示を確認すると次のように表示されます。

このように属性を追加することで、複雑な表を作ることができます。セルの数を増やしたり、属性値を変更したりして、より複雑な表を作ることにチャレンジしてみてください。

ここまでで、body要素の構造を作るための、見出し、段落、リスト、画像、ビデオ、オーディオ、表について説明しました。 Webページの見せ方、見栄えをリッチにするタグになります。使い方を覚えて、ユーザがワクワクするようなWebページを作れるようになりましょう。ここからは、ユーザが情報を入力して送信するといった入力フォームを作るためのタグ、リンクや他のHTML文書を埋め込むタグ、 body要素の大まかな構造を示すタグについて学習します。

フォーム

Webサイトには、ユーザが情報や意見を入力して送信するといった、入力フォームが備え付けられています。皆さんもSNSや会員制サイトを利用する際に、ご自身に関する情報、例えば、氏名、年齢、メールアドレスといったものを登録した経験があるのではないでしょうか。これらの入力を受け付けるフォームは、フォームの外観を作るタグによって構成されています。また、入力された情報をサーバー上のプログラムにデータとして送信するといった処理をしています。本項では、入力フォームの外見を作るタグを紹介し、タグの紹介の中で、フォームに入力された情報がどのようにサーバに送信されるのか、といった仕組みについても触れていきます。

まず、シンプルなフォームのコードを示します。

<form method="get" action="form2.html">
    <p>お名前：<input type="text" name="NAME">/p>
    <p><input type="submit" value="送信する">/p>
    <input type="reset" value="取消する">
</form>

formタグ

<form>は入力フォームを作るタグです。 formタグには、action属性、method属性を属性として含めます。 2つの属性については、後で説明します。 formタグで囲むことで、フォームの範囲を示します。この範囲内にinputタグといった入力を受け付ける入力欄を作るタグを記述します。

action属性

action属性は、入力されたデータの送信先を指定するタグです。例えば、入力情報に不備がないかどうかを確認する確認ページを指定したり、入力情報をサーバに登録するためのプログラムファイルを指定します。指定したファイルに入力情報が渡されることになります。実際に情報を入力して送信してみましょう。以下のように入力して送信ボタンを押します。

<form method="get" action="form2.html">

action属性に、action="form2.html"と指定しています。つまり、送信された情報は、form2.htmlファイルに渡されます。 method="get"と指定していますので、送信された情報はURLで渡されることになります。 method属性については後の項で説明します。送信前のURLと送信後のURLを見てみましょう。

送信前のURL

送信後のURL

URLで指定したファイル名に続けて?NAME=山田太郎 の部分で、入力した山田太郎がURLに渡されていることが確認できます。

method属性

method属性を理解するためには、HTTPに触れる必要があります。 HTTPは、Hypertext Transfer Protocolの略です。ハイパーテキストをWeb上で表示する時に使われる通信に関するプロトコルといった意味です。ちょっと難しいですが、ついてきてください。ユーザのPCとサーバとの間でデータを送受信する場合に、 Web上でのデータの送受信は、予め決められている通信に関する規約を使います。この規約をプロトコルと言います。もしプロトコルが地域でバラバラであったなら、通信は成り立ちません。例えば、二人が会話をするときに、片方が日本語、もう片方がタガログ語では、会話が成り立たないのと同じです。統一したプロトコルを使うことで、HTML、画像、動画、PDFファイル、JavaScriptプログラムと言った、コンピュータで扱えるデータを送受信することができます。

このプロトコルに則り、ユーザのPCからサーバにデータを送信して、サーバ側にしてほしいことを伝える手段のことをHTTPメソッドと言います。例えば、以下の2つを使います。

getメソッド: actionで指定したURLを?で区切り、?以降にデータを追加して送信する方法
postメソッド: HTTPリクエスト ※(1) のメッセージボディ ※(2) にデータを格納して送信する方法

method属性は、どのHTTPメソッドを使ってデータを送信するのかを指定するタグになります。 HTTPメソッドは、Webシステムを作る上で頻繁に使う技術です。 HTTPメソッドをより深く理解するために、ネットワークの基礎コースの受講をお勧めします。

情報

※(1) HTTPリクエストとは、クライアントからサーバにしてほしいことを要求することを意味します。クライアントとは、ユーザのPCのことです。サーバからの返答をHTTPレスポンスと言います。

※(2) HTTPリクエストは3つの部品から構成されています。この中のメッセージボディに、入力したデータが格納されます。

inputタグ

<input>は入力欄を作ります。type属性を指定して属性値を付与することで、入力形式を指定することができます。 inputタグについて、4つの使用例を説明をしていきます。

1つ目の使用例を見てみます。

<form method="get" action="form2.html">
    <input type="text" name="name" required minlength="4" maxlength="8" size="10">
    <input type="submit" value="Submit">
</form>

1行目のinputタグの中身を説明します。 inputのtype属性に"text"を付与しています。 1行のテキスト入力フィールドを生成するといった意味です。 2行以上の入力欄を生成する場合はtextarea要素を使います。 name属性は送信データに名前に与えます。

上のURLを確認するとname=山田太郎というように、name属性で指定した属性値=送信したデータといった形でデータに名前が与えられます。この名前は送信されたデータを受け取る時に使います。データの受け取りについては、HTML章では範囲外となりますので割愛します。

required属性は入力を必須にする属性です。入力欄を空のまま送信すると入力を促すメッセージが表示されます。

minlength属性は最小文字数、maxlengthは最大文字数を指定します。 sizeは、textの場合は入力欄の幅を指定します。

続いて2行目のinputタグの中身を説明します。type属性にsubmitを与えています。submitは送信ボタンを生成します。 value属性の属性値は送信ボタンの名前を表します。

ブラウザから確認すると次のように表示されます。

2つ目の使用例を見てみます。

<form method="get" action="form2.html">
    <input type="checkbox" name="drink" value="wine"< ソフトドリンク
    <input type="checkbox" name="drink" value="beer"< ビール
    <input type="checkbox" name="drink" value="sake"< 日本酒
    <input type="submit" value="Submit">
</form>

type属性に"checkbox"を与えています。 checkboxはチェックボックスを生成します。上の例では、2行目から4行目までがチェックボックスになります。

ブラウザから確認すると次のように表示されます。

3つ目の使用例を見てみます。

<form method="get" action="form2.html">
    <input type="file" name="name" accept=".png, .jpg, .jpeg">
    <input type="submit" value="Submit">
</form>

type属性に"file"を与えています。送信するファイルの選択欄を生成します。 action属性はファイルの拡張子を指定します。つまり選択できるファイル形式を制限します。

ブラウザから確認すると次のように表示されます。

action属性の属性値に.pngを指定した場合のファイル選択画面は次のようになります。

action属性の属性値に.pngを指定しなかった場合のファイル選択画面は次のようになります。

action属性の属性値の指定によって、選択できる拡張子の制限ができていることが確認できます。

4つ目の使用例を見てみます。

<form method="get" action="form2.html">
    <select name="name" size="1">
    <option value="softdrink">ソフトドリンク</option>
    <option value="beer">ビール</option>
    <option value="sake">日本酒</option>
    </select>
    <input type="submit" value="Submit">
</form>

select要素はセレクトメニューを生成します。option要素を含めることで、今回はプルダウンメニューを作っています。選択されたメニューのvalue値は、name属性でつけた"name"というデータ名とセットで送信されます。つまり、データを受ける側からはnameという名前を指定することで、受信したデータにアクセスできるといった意味になります。

ブラウザから確認すると次のように表示されます。

ここからは、実際にフォームを作って、入力情報を送信してみましょう。次のようにフォームを記述します。

<form method="post">
    <p>
        <label>名前:
            <input type="text" name="name" required minlength="4" maxlength="8" size="20">
        </label>
    </p>
    <p>
        <label>Email:
            <input type="email" name="email" required size="20">
        </label>
    </p>
    <p>
        <label>性別:
            <input type="radio" name="gender" value="male">男性
            <input type="radio" name="gender" value="female">女性
        </label>
    </p>
    <p>
        <label>ご意見:
            <textarea name="opinion" rows="10" cols="60" placeholder="記入してください。"></textarea>
        </label>
    </p>
    <p>
        <input type="submit" value="Submit"><input type="reset" value="Reset">
    </p>
</form>

今までのフォームで学習した知識を使えば、どのような意味の記述がされているのか、概ね理解できるはずです。もし難しいと感じたら、フォーム項の冒頭に戻って読み直してください。新しく出てきたタグと属性値としては、以下の2つです。

label要素は入力フォームに文字列のラベルを指定する

属性値resetは入力した情報をリセットする

上のコードをブラウザから確認すると次のように表示されます。

次のように入力してSubmitボタンを押してみましょう。

method属性に"post"を指定して送信していますので、データはHTTPリクエストのメッセージボディに格納されます。 URLから送信内容を確認することはできません。送信内容を確認するためには、開発者ツール※(1)を使います。開発者ツールを開き、次の画像のように、 Networkのpayloadを見てみてください。送信内容が表示されていることがわかります。

次に、method属性を"post"から"get"をに変更して送信してみましょう。

<form method="get">
    //割愛
</form>

上の画像のように入力して送信すると、 URLが?で区切りられ、?以降に送信データが追加されていることが確認できます。

method属性を切り替えることで、送信方法を変更することができました。

送信したデータを受け取る場合、JavaScriptやPHPといったプログラミング言語を使って、プログラムを記述します。本レクチャーでは対象外となるため説明は割愛します。

ここまでで、フォームを構成する要素、データの送信の仕組みについて学習しました。フォームは実務でも高い頻度で使うタグになります。例えば、ユーザ情報の入力、お問い合わせフォーム、ログイン画面を作るための用途で使います。また、HTTPメソッドは、例えば、入力された情報をデータベースに書き込んだり、データベースに保存されているデータから必要なデータを検索して出力したり、といった用途で使います。この項で学習した内容は全てが重要項目になります。理解があやふやな部分があれば、何度でも読み返したり、コードを実際に書いて、理解を深めてください。

情報

※(1)開発者ツールでの確認の仕方

Googleを開きます。フォームファイルをブラウザのタブにドラッグ&ドロップしてファイルを開きます。フォームに必要事項を記入し送信ボタンを押します。送信後、ブラウザ上で右クリックします。

ブラウザ上で右クリック

メニューから検証をクリックすると、ブラウザ内の右側に開発者ツールが表示されます。リクエストの中身を確認する場合、上段のメニューからNetworkを選択します。 ctrl + R を押して再読み込みをします。左下Nameの下のformファイルをクリックします。 Name右に表示されるメニューからPayloadを選択します。

ブラウザ右側に開発者ツールが表示

埋め込みコンテンツ

ここでは、Webページでよく使う埋め込みコンテンツで使うタグを紹介します。

aタグ

<a>タグは、リンクを指定するタグです。 aはanchorを省略したものです。 href属性を指定することで、リンク先のURLを埋め込むことができます。 <a href="リンク先のURL">文字列</a>といったように、href属性に値であるURLを記述します。

<p><a href="https://www.google.com/?hl=ja">Google</a></p>

上の例では、GoogleのWebサイトにリンクづけしています。

GoogleをクリックするとGoogleのWebサイトに遷移します。上記のようにすることで、URLをサイト内に埋め込み、リンクづけすることができます。

iframeタグ

<p>iframeを使ってvideoが埋め込まれたファイルを埋め込んでいます。</p>
<iframe src="video.html" width="400" height="300" title="動画"></iframe>

iframeタグ内のsrc属性に埋め込み先のファイル名を指定します。今回の場合はvideo.htmlを指定しています。

その他

ここでは、body要素内の文書の骨組みを示す、構造化タグについて紹介をしていきます。構造化タグとは、今まで紹介したタグよりも、文書の大枠の構造を示すタグです。セクショニングコンテンツと言ったりします。次の画像は、セクショニングコンテンツを使った一例を示しています。

headerタグ

<header>タグは文書のヘッダー部を表すタグです。ページの導入部となる部分です。ナビゲーション、ロゴ、検索フォームといったコンテンツを含んで使う場合があります。

navタグ

<nav>タグは主要なナビゲーションを表すタグです。例えば、Webサイト内で共通で使われるグローバルナビゲーションを示す場合に使います。

mainタグ

<main>タグは文書の主要部を表すタグです。ヘッダー、フッター、サイドバーといった繰り返し使われる要素以外の、文章の主要部を表す際に使います。

articleタグ

<article>タグは、文書の中で指定した範囲が独立した内容であることを表します。独立した意味のある記事であると明示できます。

sectionタグ

<section>タグは見出しを伴う章や節を表すタグです。文書の区分を表すために使います。スタイルづけをするためのラッパーとして使うのみの場合は divタグを使います。

divタグ

<div>タグは単体では特に意味を持たないタグです。 divタグで囲った部分はブロックレベルの要素としてグループ化できます。

footerタグ

<footer>タグは文書のフッター部を表すタグです。著作者に関する情報、関連ページや外部サイトへのリンクを含んで使われる場合があります。

Lesson 1 Chapter 4

コンテンツモデル

Webの技術は進化し続け、最近では、AIやビッグデータを利用したビジネスが拡大しています。これらのビジネスでは、世界中のWebサイトから情報収集を行う際に、Webサイトの正確な意味を理解することが蓄積したデータの正確性を担保するために必要になります。例えば、GoogleやYahooなどの検索エンジンは、ユーザから検索が行われた際に、予め収集してデータベースに登録しておいた世界中のWebページのデータを、ユーザが入力したキーワードとの関連性が高いといった条件などでスコアリングして、順位づけした検索結果を表示するために、Webページの正確な意味を理解することが必要になります。

コンピュータがWebページの正確な意味を理解するために、わたしたちは正しい意味をコンピュータに伝える必要があります。そのためには正しいマークアップが必要とされ、正しいマークアップをするためのルールが、本章で学習するコンテンツモデルというルールになります。コンテンツモデル項では、HTMLに記述できるほぼすべてのタグを紹介することになります。学習するタグの数は多くなりますが、全てのタグを覚える必要はありません。実務で記述する際に、これってどうだったなか、これを示すタグがあったはず、といったように、都度、ググって調べればOKです。それでは、コンテンツモデルについて学習を始めていきましょう。

コンテンツモデル

コンテンツモデルとは、どの要素の中にどのようなカテゴリの要素を配置できるのかといったマークアップのルールを定義したものです。 HTML5では、ほとんどの要素は1つ以上のカテゴリに属しています。カテゴリは、メタデータ、フロー、セクショニング、ヘッディング、フレージング、エンベッディッド、インタラクティブの７つに分類されます。

次の図は、7つのカテゴリの関係を表しています。

カテゴリには、重なる部分があります。これは、複数のカテゴリに属する要素が存在することを意味します。コンテンツモデルを意識したマークアップをすることで、正確な文書の構造をブラウザや検索エンジンに示すことができます。 7つのカテゴリについて1つづつ説明をしていきます。

フロー・コンテンツ

フロー・コンテンツには、body要素内で使われるタグが属します。ほぼすべてのタグがここに属します。フローコンテンツに属しつつ、他のコンテンツに属しているタグもあります。以下、フロー・コンテンツに属するタグになります。

<a>、<abbr>、<address>、<article>、<aside>、<audio>、<b>、<bdi>、<bdo>、<blockquote>、
                  <br>、<button>、<canvas>、<cite>、<code>、<data>、<datalist>、<del>、<details>、
                  <dfn>、<dialog>、<div>、<dl>、<em>、<embed>、<fieldset>、<figure>、<footer>、<form>、
                  <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<hr>、
                  <i>、<iframe>、<img>、<input>、<ins>、<kbd>、<label>、<link>、<main>、<map>、<mark>、
                  <math>、<menu>、<meta>、<meter>、<nav>、<noscript>、<object>、<ol>、<output>、<p>、<picture>、<pre>、
                  <progress>、<q>、<ruby>、<s>、<samp>、<script>、<section>、<select>、<slot>、<small>、<span>、
                  <strong>、<sub>、<sup>、<svg>、<table>、<template>、<textarea>、<time>、<u>、
                  <ul>、<var>、<video>、<wbr>

フレージング・コンテンツ

フレージング・コンテンツには、文書内で使われるタグが属します。段落内で使われるといったタグです。フレージング・コンテンツに属する要素は、同時にフロー・コンテンツにも属しています。以下、フレージング・コンテンツに属するタグになります。

<a>、<abbr>、<area>、<audio>、<b>、<bdi>、<bdo>、<br>、<button>、<canvas>、<cite>、<code>、
                  <data>、<datalist>、<del>、<dfn>、<em>、<embed>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、
                  <label>、<map>、<mark>、<meta>、<meter>、<noscript>、<object>、<output>、<picture>、<progress>、<q>、
                  <ruby>、<s>、<samp>、<script>、<select>、<slot>、<small>、<span>、<strong>、<sub>、<sup>、<template>、
                  <textarea>、<time>、<u>、<var>、<video>、<wbr>

エンベッディッド・コンテンツ

エンベッディッド・コンテンツには、画像、動画、音声を埋め込むために使われるタグが属します。以下、エンベッディッド・コンテンツに属するタグになります。

<audio>、<canvas>、<embed>、<iframe>、<img>、<object>、<picture>、<video>

インタラクティブ・コンテンツ

インタラクティブ・コンテンツには、リンクやフォームといったユーザが操作できるタグが属します。以下、インタラクティブ・コンテンツに属するタグになります。

<a>、<audio>、<button>、<details>、<embed>、<iframe>、<img>、<input>、
                  <label>、<object>、<select>、<textarea>、<video>

ヘッディング・コンテンツ

ヘッディング・コンテンツには、見出しを表すタグが属します。以下、ヘッディング・コンテンツに属するタグになります。

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

セクショニング・コンテンツ

セクショニング・コンテンツには、文書の区切りを表すタグが属します。文書の大枠の構造を示すタグです。以下、セクショニング・コンテンツに属するタグになります。

<article>、<aside>、<nav>、<section>

メタデータ・コンテンツ

メタデータ・コンテンツには、head要素内で使われるタグが属します。 head要素内には、title、meta、linkといった文書情報を示すタグを置くことができます。以下、メタデータ・コンテンツに属するタグになります。

<base>、<link>、<meta>、<noscript>、<script>、<style>、<template>、<title>

ここまでで、7つのカテゴリについて説明しました。正しいマークアップをするために、7つのカテゴリがあること、どのカテゴリの中でどのカテゴリが使えるのか、使えないのかといったことを覚えましょう。

タグの詳細

ここからはタグについて説明をしていきます。各タグの並びは、メインルート、文書メタデータ、区分化ルートといたように、機能別にグループ化した並びになっています。機能については、既に学習済みのものもあれば、本章で初めて学習するといったものもあります。機能についての説明にも触れ、グループに属するタグの説明をしていきます。各タグ一つ一つの説明は、要素名、配置場所、その下に使い方の説明、さらにその下にサンプルコードの順で記述しています。配置場所とは、どのコンテンツ内に配置できるのかを示しています。つまり、使用できる場所を示しています。例えば、1番目に紹介するa要素は、フレージング・コンテンツとして配置できるので、フレージング・コンテンツと記述しています。また、必要な場合はサンプルコード欄にサンプルコードをブラウザから表示させています。

要素名	配置場所
説明
サンプルコード

<a>	フレージング・コンテンツ
a要素は、ハイパーリンクを表します。リンク先のURLをhref属性で指定します。 target属性はリンク先の表示方法を指定します。 `target="_blank"`を指定するとリンク先を別ブラウザで表示します。
`<a href="https://www.google.co.jp" target="_blank">Google</a>` Google

学習の進め方として、カテゴリが分からない場合は、冒頭で示した7つのカテゴリの関係を表した図を見返し、各カテゴリの説明文を読み返すことをおすすめします。

それでは順番にタグを紹介していきます。

メインルート

メインルートとは、HTML文書の起点となる要素のことです。

<html>	どこにも属さない
html要素は、HTML文書のトップレベルの要素になります。トップレベルとは、入れ子構造の一番外側に配置するといった意味です。他のすべての要素はhtml要素の子孫として配置することになります。 html開始タグからhtml終了タグまでの間がHTML文書であることを示します。 html要素については、HTML文書を構成するもの章で説明済みです。
`<html> //省略 </html>`

文書メタデータ

文書メタデータは、メタ情報のことです。Webサイトの本文以外の情報を記述します。例えば、title要素は検索結果ページに表示されます。メタ情報の説明については、HTML文書を構成するもの章で説明済みです。

<base>	メタデータ・コンテンツ
base要素は、相対URLの基準となるURL、およびリンク先の基準となる表示方法を指定します。この要素は、head要素内に1つだけ配置することができます。例えば、`http://hoge.com`といったWebサイト上で、`<a href="/about">ABOUT</a>`という相対パスのリンクを貼ると、 `http://hoge.com/about`へ飛びます。 <base>を使うと、baseで設定したURL/aboutにリンク先を変更することができます。
`<p>base href="https://www.example.com/">`

<head>	メタデータ・コンテンツ
head要素は、文書のヘッダ部分を示すタグです。 html要素の中、body要素の前に配置することになります。次のコードのようにhead要素には、metaタグ、titleタグ、さらに、必要な場合には、linkタグ、scriptタグを使って、本文以外の情報であるメタ情報を記述します。 HTML文書を構成するもの章で説明済みです。
`<link rel="styleseet" href="sample.css">` Document

<link>	メタデータ・コンテンツ / フレージング・コンテンツ
link要素は、その文書を外部のリソースと関連付けます。 HTML文書を構成するもの章で説明済みです。
`<link rel="styleseet" href="sample.css">`

<meta>	メタデータ・コンテンツ※状況により異なる
meta要素は、例えばtitle要素、link要素といったメタ情報では表現できないメタ情報を表します。多くの場合、この要素はhead要素内で使用します。 HTML文書を構成するもの章で説明済みです。
`<meta charset="UTF-8">`

style要素は、headタグ内に記述して、タグの開始タグと終了タグの間にCSSを記述します。下の例は、p要素にclass属性で属性値"style-discription"を指定して、 style属性内で"style-discription"に対して、太字にするスタイル情報を指定しています。

<p class="style-discription">今日はいい天気ですね。></p>
                  
                  <style>
                    .style-discription {
                      font-weight: bold;
                    }
                  </style>

今日はいい天気ですね。

<title>	メタデータ・コンテンツ
title要素は、文書のタイトルを表します。この要素は、head要素内に1つだけ配置します。 title要素に記述された文書は、検索エンジンに内容が伝えられ、ブラウザのタイトルバーやタブバーに表示されます。
`<title>文書のタイトル</title>`

区分化ルート

コンテンツ区分のルートとなる要素を示します。

<body>	どこにも属さない
bodyタグには、文書や画像といった実際にブラウザの画面上に表示される内容を記述します。 html要素の中、head要素の後に配置することになります。HTML文書を構成するもの章で説明済みです。
`<body> //ここに本文を記述します。 </body>`

コンテンツ区分

コンテンツ区分要素は、文書の大枠の構造を示すタグです。

<address>	フロー・コンテンツ
address要素は、コンテンツの著者・管理者の連絡先情報を含めることができるタグです。
`<address> お問い合わせはこちらからどうぞ<br> <a href="contact.html">お問い合わせフォーム</a> </address>` お問い合わせはこちらからどうぞお問い合わせフォーム

<article> セクショニング・コンテンツ

article要素は、1つのコンテンツとして成立するようなセクションで使うタグです。 HTML文書を構成するもの章で説明済みです。

<article>
                    <h2>記事タイトル</h2>
                    記事内容...
                  </article>

記事タイトル

記事内容...

<aside>	セクショニング・コンテンツ
aside要素は、メインコンテンツから分離された補足的なセクションを表すために使うタグです。例えば下の画像のように、サイドバーを挿入したい時に使います。
`<article> <aside> <p>aside要素</p> </aside> </article>`

<footer>	フロー・コンテンツ
footer要素は、文書またはセクションのフッタを表します。例えば、著作権、連絡先、著作権、発行日時、関連文書へのリンク、戻るリンクといった内容を配置します。 HTML文書を構成するもの章で説明済みです。
`<footer>フッタを表します</footer>`

<header>	フロー・コンテンツ
header要素は、文書またはセクションのヘッダを表します。見出し、グローバルナビ、イントロダクション、検索フォーム、ロゴといったものを配置します。 HTML文書を構成するもの章で説明済みです。
`<header>ヘッダーを表します</header>`

<h1>～<h6>	ヘッディング・コンテンツ
h1～h6要素は、セクションの見出しを表します。h1に近いほど見出しのレベルが高くなり、h6に近いほど低くなります。 HTML文書を構成するもの章で説明済みです。
`<h1>ランク1の見出し</h1> <h2>ランク2の見出し</h2> <h3>ランク3の見出し</h3> <h4>ランク4の見出し</h4> <h5>ランク5の見出し</h5> <h6>ランク6の見出し</h6>`

<main>	フロー・コンテンツ
main要素を使用することで、それが文書のメインコンテンツであることを表すことができます。 HTML文書を構成するもの章で説明済みです。
`<main> <article> <h2>記事その1</h2> ... </article> <article> <h2>記事その2</h2> ... </article> </main>`

<nav>	セクショニング・コンテンツ
nav要素は、ナビゲーションのセクションを表します。そのサイト、またはページ内の移動で必要となる主要なリンクメニューのセクションで使用します。 HTML文書を構成するもの章で説明済みです。
`<nav> <ul> <li><a href="link1.html">リンク1</a></li> <li><a href="link2.html">リンク2</a></li> <li><a href="link3.html">リンク3</a></li> </ul> </nav>`

<section>	セクショニング・コンテンツ
section要素は、その範囲が意味的な1つのまとまりであることを表します。 HTML文書を構成するもの章で説明済みです。
`<article> <section> ... </section> <section> </section> </article>`

テキストコンテンツ

テキストコンテンツ要素は、開始タグ <body > と終了タグ</body > の間にあるコンテンツでブロックやセクションを編成します。これらの要素はコンテンツの用途や構造をコンピュータに示します。

<blockquote> フロー・コンテンツ

blockquote要素は、別の情報源からの引用部分を表します。 cite属性に属性値として引用元のURLを示すことができます。 citeによりリンクづけされる訳ではありません。

<blockquote cite="https://www.example.com/">
                    <p>blockquote要素は、別の情報源からの引用部分を表します。</p>
                  </blockquote>

blockquote要素は、別の情報源からの引用部分を表します。

<dd> フロー・コンテンツ

dd要素はdl要素内で、dt要素で示された文書や用語のタイトルに対する説明文を記述するタグといった使われ方をします。

<dl>
                    <dt>Aのタイトル</dt>
                    <dd>Aの説明1</dd>
                    <dd>Aの説明2</dd>
                  </dl>

Aのタイトル: Aの説明1; Aの説明2

<div>	フロー・コンテンツ
div要素は、特定の範囲を1つのブロックとしてグループ化します。
`<div>グループ化します</div>`

<dl> フロー・コンテンツ

dl要素は、dt要素とdd要素のグループで構成される記述リストを表します。 Q&Aを作成するといったことに使います。

<dl>
                    <dt>Q:お盆休みは帰省しますか？</dt>
                    <dd>A:はい、規制します。新幹線で帰省予定です。</dd>
                  </dl>

Q:お盆休みは帰省しますか？: A:はい、規制します。新幹線で帰省予定です。

<figure> フロー・コンテンツ

figure要素は、本文から参照される挿絵、図表、写真、ソースコードといったものを表します。

<p>趣味について<a href="#yamada">山田太郎</a>の場合</p>
                  <figure id="yamada">
                  <figcaption>山田太郎</figcaption>
                  <p>趣味はフットサルです。地元のチームに所属しています。</p></figure>

趣味について山田太郎の場合

山田太郎

趣味はフットサルです。地元のチームに所属しています。

<hr> フロー・コンテンツ

hr要素は、段落レベルのテーマの区切りを表します。

<p>１次会で山田君は焼肉を食べました。</p>
                    <hr>
                  <p>2次会で山田君はカラオケを歌いました。</p>

１次会で山田君は焼肉を食べました。

2次会で山田君はカラオケを歌いました。

<li> フロー・コンテンツ

li 要素はリストの項目を表します。ol要素やul要素の中に配置して使います。

<ul>
                    <li>リスト項目A</li>
                    <li>リスト項目B</li>
                    <li>リスト項目C</li>
                  </ul>

リスト項目A
リスト項目B
リスト項目C

<ol> フロー・コンテンツ

ol要素は、順序付きのリストを表します。リスト内の項目は、この要素内に配置するli要素で表すことになります。 HTML文書を構成するもの章で説明済みです。


                  <ol>
                    <li>リスト項目1</li>
                    <li>リスト項目2</li>
                    <li>リスト項目3</li>
                  </ol>

リスト項目1
リスト項目2
リスト項目3

<ul> フロー・コンテンツ

ul要素は、順不同のリストを表します。リスト内の項目は、この要素内に配置するli要素で表すことになります。 HTML文書を構成するもの章で説明済みです。

<ul>
                    <li>リスト項目A</li>
                    <li>リスト項目B</li>
                    <li>リスト項目C</li>
                  </ul>

リスト項目A
リスト項目B
リスト項目C

<menu>	フロー・コンテンツ
menu要素を使用すると、ユーザーが操作できるツールバーを作成することができます。見た目に関してはul要素と変わらないため、ツールバー風に表現するためには別途CSSの設定が必要です。 menu要素は、その内容がツールバーであるということを意味的に表すものとなります。
`<menu> <li><button onclick="...">操作項目A</button></li> <li><button onclick="...">操作項目B</button></li> <li><button onclick="...">操作項目C</button></li> </menu>`

<p> フロー・コンテンツ

p要素は、段落を表します。

<p>山田 太郎（info@example.com）</p>
                  <p>誕生日：<time datetime="2022-12-20">令和4年12月20日</time></p>

山田太郎（info@example.com）

誕生日：令和4年12月20日

<pre> フロー・コンテンツ

pre要素は、記述したままの形で表示させたい内容に対して使用することになります。

<pre><code><html>
                    <head>
                        <title>文書のタイトル</title>
                    </head>
                    <body>
                        <h1>pre要素 & code要素の使用例</h1>
                    </body>
                  </html></code></pre>

<html>
                    <head>
                        <title>文書のタイトル</title>
                    </head>
                    <body>
                        <h1>pre要素 & code要素の使用例</h1>
                    </body>
                  </html>

インラインテキスト意味づけ

インラインテキスト意味づけは、単語、行、任意の範囲に、意味、構造、スタイルを指定します。

<a>	フレージング・コンテンツ
a要素は、ハイパーリンクを表します。リンク先のURLをhref属性で指定します。 target属性はリンク先の表示方法を指定します。 `target="_blank"`を指定するとリンク先を別ブラウザで表示します。
`<a href="https://www.google.co.jp">Google</a>` Google

<abbr>	フレージング・コンテンツ
abbr要素は、略語であることを表します。 title属性を指定すると、ツールチップで正式名称を示すことができます。
`<abbr title="HyperText Markup Language">HTML</abbr>` HTML

<b> フレージング・コンテンツ

b要素は、重要性を伝えることなく、注意だけを引きたいテキストに使うタグです。

<p>コースの全長は<b>16km</b>です。</p>

コースの全長は16kmです。

<bdi> フレージング・コンテンツ

bdi要素は、周囲から隔離されたテキストを表します。書字方向が混在する箇所で使用することになります。アラビア語は右書きなので、bdiタグ未設定の場合は右書きになります。 bidタグで囲むことで、書字方向の影響が及ばなくなります。

<ul>
                    <li><span>اَلأَعْشَى</span> - 1</li>
                    <li><bdi>اَلأَعْشَى</bdi> - 2</li>
                    <li><span>Jerry Cruncher</span> - 3</li>
                  </ul>

اَلأَعْشَى - 1　←書字方向が右書き
اَلأَعْشَى - 2　←書字方向の影響が及ばない
Jerry Cruncher - 3

<bdo> フレージング・コンテンツ

bdo要素は、dir属性を与えることで、テキストの書字方向を上書き指定します。 dir属性に属性値としてltrを指定すると左から右へ、rtlを指定すると右から左に向かわせます。

<p>This text will go left to right.</p>
                  <p><bdo dir="rtl">This text will go right to left.</bdo></p>

This text will go left to right.

This text will go right to left.

<br> フレージング・コンテンツ

br要素は、改行を表します。

<p>〒000-0000<br>
                  東京都新宿区西新宿0-0-0<br></p>

〒000-0000
東京都新宿区西新宿0-0-0

<cite> フレージング・コンテンツ

cite要素は、引用元のタイトルや作品のタイトルを示します。 cite要素で指定した範囲はデフォルトでイタリック体で表示されます。

<p>これは<cite>タイトル</cite>です。</p>

これはタイトルです。

<code> フレージング・コンテンツ

code要素は、ソースコードを表します。 HTML、CSS、JavaScriptなどのソースコードを記述するのに使います。

<p>これは<pre><code>someFunction()</code></pre>関数のコードです。</p>

これは

someFunction()

関数のコードです。

<data>	フレージング・コンテンツ
data要素は、要素内容に対して機械可読データを追加したい場合に使用します。 value属性の属性値として、コンピュータが読み込める値を渡します。
`<data value="15000">一万五千円</data>` 一万五千円

<dfn> フレージング・コンテンツ

dfn要素は、定義される用語を表します。同じ段落内に用語に対する定義を含める必要があります。下の例では、HTMLが定義される用語、同じ段落内で用語の定義を記述しています。

<p><dfn>HTML</dfn>は、Webページを作成するためのマークアップ言語です。</p>

HTMLは、Webページを作成するためのマークアップ言語です。

<em> フレージング・コンテンツ

em要素は、テキストの強調を表します。この要素は、トーンを強めて言いたいような箇所で使用します。 em要素で指定した範囲はデフォルトでイタリック体で表示されます。

<p><em>山田君が</em>トイレで煙草を吸っていた。</p>

山田君がトイレで煙草を吸っていた。

<i> フレージング・コンテンツ

i要素は、他とは区別される思考や専門用語といったテキストを表します。

<p>山田君は、<i>ついにやったぞ！</i>と心の中で叫んでいた。</p>

山田君は、ついにやったぞ！と心の中で叫んでいた。

<kbd> フレージング・コンテンツ

kbd要素は、ユーザーが入力する内容を表します。主にキーボードからの入力を表します。このように入力してくださいということを伝えます。

<p>キーボードショートカットの<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> を使用して新規文書を作成することもできます。</p>

キーボードショートカットのCtrl+N を使用して新規文書を作成することもできます。

<mark> フレージング・コンテンツ

mark要素は、特定のテキストを目立たせたい場合に使用します。

<p>ホームページの作成に役立つ<mark>HTML</mark>と<mark>CSS</mark>のリファレンス。</p>

ホームページの作成に役立つHTMLとCSSのリファレンス。

<q> フレージング・コンテンツ

q要素は、別の情報源からの引用部分を表します。

<p>この文書の<q>ここが引用部</q>です。</p>

この文書のここが引用部です。

<ruby> フレージング・コンテンツ

ruby要素は、ルビを振るテキストの範囲を表します。

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

漢かん字じ

<s> フレージング・コンテンツ

s要素は、その内容がもう正確ではない、関連性がなくなったということを表します。

<p>山田君が吸っているタバコは</p>
                    <p><s>マイルドセブン</s></p>
                    <p><strong>メビウス</strong>です。</p>

山田君が吸っているタバコは

~~マイルドセブン~~

メビウスです。

<samp> フレージング・コンテンツ

samp要素は、プログラムやコンピュータシステムからの出力内容を、サンプルとして提示したい場合に使用します。

<p>もし<samp>失敗しました</samp>と表示された場合は、ブラウザをリロードしてください。</p>

もし失敗しましたと表示された場合は、ブラウザをリロードしてください。

<small> フレージング・コンテンツ

small要素は、著作権表示や法的表記のような、一般的に小さめの文字で表現される注記を表します。

<p><small>免責：当サイトのご利用により生じた損害については、当サイトの管理者は一切の責任を負わないものとします。</small></p>

免責：当サイトのご利用により生じた損害については、当サイトの管理者は一切の責任を負わないものとします。

<span>	フレージング・コンテンツ
span要素は、テキストの範囲を指定します。例えばスタイルの適用範囲を設定するといった使い方をします。
`<span>テキストの範囲を指定します</span>`

<strong> フレージング・コンテンツ

strong要素は、テキストの強い重要性、深刻性、または緊急性が高いことを表します。

<p><strong>注意事項!必ず一読ください。</strong></p>

注意事項!必ず一読ください。

<sub> フレージング・コンテンツ

sub要素は、下付き文字を表します。

<p>水の化学式はH<sub>2</sub>Oです。</p>

水の化学式はH₂Oです。

<sup> フレージング・コンテンツ

sup要素は、上付き文字を表します。

<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup>を、山田君は理解できなかった…。</p>

E=mc²を、山田君は理解できなかった…。

<time>	フレージング・コンテンツ
time要素は、正確な日付や時刻を表します。
`<time datetime="2022-12-03">2022年12月3日</time>` 2022年12月3日

<u> フレージング・コンテンツ

u要素は、ラベル付けされたテキストを表します。

<p>山田君は<u>富士山</u>に登る準備をしました。</p>

山田君は富士山に登る準備をしました。

<var> フレージング・コンテンツ

var要素は、プログラムの変数を表すために使います。CSS未設定の場合はイタリック体で表示されます。

<p>
                    let <var>X</var> = 1;<br>
                    let <var>Y</var> = 1;<br>
                  </p>

let X = 1;
let Y = 1;

<wbr> フレージング・コンテンツ

wbr要素は、改行位置の候補を表します。必要に応じて折り返されるようになります。

<p>LongWord<wbr>LongWord<wbr>LongWord<wbr>LongWord<wbr>LongWord<wbr> ...</p>

LongWordLongWordLongWordLongWordLongWord ...

画像とマルチメディア

画像、動画、音声といったものを埋め込むタグです。

<audio>	エンベッディッド・コンテンツ
audio要素は、オーディオコンテンツを文書内に埋め込むタグです。 HTML文書を構成するもの章で説明済みです。
`<audio src="audio/mondo_01.mp3" controls></audio>`

<img>	エンベッディッド・コンテンツ
img要素は、文書に画像を埋め込みます。 HTML文書を構成するもの章で説明済みです。。
`<img src=".\proq-text-image\14\14-52.png"サンプル">`

<map>	フレージング・コンテンツ
map要素を使用することで、1つの画像内に複数のリンク領域を設定できるようになります。ここではブラウザのタグに表示されるURLフラグメントを切り替えています。URLフラグメントは、 #で指定した位置までジャンプして移動できる機能です。下の例では、ブラウザのタブに表示されるファイル名の#以降が切り替わります。
`<img src=".\proq-text-image\14\14-55.png" usemap="#menumap" alt="サンプル" width="450" height="50" border="0"> <map name="menumap"> <area href="#area1" shape="rect" coords="15,10,110,35" alt="TOP"> <area href="#area2" shape="rect" coords="120,10,215,35" alt="ABOUT"> <area href="#area3" shape="rect" coords="230,10,320,35" alt="NEWS"> <area href="#area4" shape="rect" coords="335,10,430,35" alt="MAP"> </map>`

<video> エンベッディッド・コンテンツ

video要素は、動画コンテンツを文書内に埋め込みます。この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することができます。 HTML文書を構成するもの章で説明済みです。


                  <p><video src="video/Clouds - 64759.mp4" controls></video></p>

埋め込みコンテンツ

マルチメディアコンテンツ以外のさまざまなコンテンツを、埋め込むタグです。

<embed>	エンベッディッド・コンテンツ
embed要素は、プラグインで再生されるコンテンツ、例えば、動画や音声を文書内に埋め込みます。 type属性にメディアタイプ ※(1) を指定します。
`<embed src="video/Clouds - 64759.mp4" type="video/mp4" width="300" height="150">`

情報

iframe要素は、他のHTMLファイルや、YouTube、facebookといった外部サイトを埋め込む場合に使います。 HTML文書を構成するもの章で説明しました。

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="70" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

object要素は、例えば、画像、HTML文書といったコンテンツを文書内に埋め込みます。


                  <p><object data="video/Clouds - 64759.mp4" type="video/mp4"></object></p>

<picture>	エンベッディッド・コンテンツ
picture要素は、レスポンシブイメージといった画像内容の最適化を文書内に埋め込みます。ブラウザの横幅を広げたり縮めたりすると、画像が切り替わります。 srcset属性は、画像ファイルのURLを指定します。medei属性は、画面幅に応じた条件を指定します。下の例では、640px以下の表示ではimb1.pngを表示するといった指定をしています。
`<picture> <source media="(min-width: 1280px)" srcset=".\proq-text-image\14\14-55.png"> <source media="(min-width: 640px)" srcset=".\proq-text-image\14\14-28.png"> <img src=".\proq-text-image\14\14-55.png" alt="サンプル"> </picture>`

<source>	どこにも属さない
source要素は、動画や音声ファイルの代替ファイルを指定するタグです。 videoタグなどで埋め込んだメディアがブラウザによって再生されなかった場合に、代わりとなるファイルを指定します。下の例では、本来表示される画像のリンクが空であるため、代替ファイルが表示されています。
`<picture> <source srcset=".\proq-text-image\14\14-55.png" type="image/png"> <img src="" alt=""> </picture>`

スクリプティング

スクリプト言語を使用できるタグです。

<canvas>	エンベッディッド・コンテンツ
canvas要素は、グラフィックスを描くための領域を表します。グラフィックスを表示するには、グラフィックスを生成するスクリプトとそれを描画する領域になるcanvas要素を関連づける必要があります。下の例では、canvas要素で幅300、高さ150の表示領域を設定し、JavaScriptで2次元の緑色の四角形を表示させています。
`<canvas width="300" height="150">キャンバスの表示内容を説明する代替テキストです。</canvas> <script> const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100); </script>`

<noscript>	head要素の子要素として / フレージング・コンテンツ
noscript要素で囲まれた要素は、スクリプトが無効の環境でのみ表示されます。
`<script type="text/javascript"> document.write("スクリプトが実行された場合"); </script> <noscript> スクリプトが実行されない場合 </noscript>`

情報

GoogleでJavaScriptの使用を許可しないように変更する場合の設定方法です。ブラウザの右上の3つの点をクリックします。メニューから設定をクリックし、左メニューからプライバシーとセキュリティをクリックします。サイトの設定をクリックし、 JavaScriptをクリックします。サイトにJavaScriptの使用を許可しないを選択します。

JavaScriptの設定を許可しないに変更後の表示

<script>	メタデータ・コンテンツ / フレージング・コンテンツ
script要素は、文書内にJavaScript、またはデータブロックを埋め込むための要素です。
`<script src="example.js"></script>`

編集範囲の特定

テキストの特定の範囲が変更されてことを示すタグです。

<del> フレージング・コンテンツ

del要素は、その部分が後から削除されたものであることを明示したい場合に使用します。

<p><del>削除されたテキスト。</del>削除されてないテキスト。</p>

~~削除されたテキスト。~~削除されてないテキスト。

<ins> フレージング・コンテンツ

ins要素は、その部分が後から追加されたものであることを明示したい場合に使用します。

<p><ins>追加されたテキスト。</ins>一般のテキスト。</p>

追加されたテキスト。一般のテキスト。

テーブル

表組みを作るためのタグです。 HTML文書を構成するもの章で説明済みです。

<caption> フロー・コンテンツ

caption要素は、table要素の中で、表のキャプションを表します。

<table>
                    <caption>キャプション</caption>
                    <tr>
                      <td>テーブルデータ</td>
                    </tr>
                  </table>

キャプション
テーブルデータ

<col> どこにも属さない

col要素は、テーブルにおいて、テーブルの列に一括して属性を指定したい時に使います。下の例は、colで指定した列に色をつけています。

<table>
                    <col bgcolor="#ffe8ff">
                    <thead>
                      <tr>
                        <th>見出し1</th>
                        <th>見出し2</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>内容1</td>
                        <td>内容2</td>
                      </tr>
                    </tbody>
                    <tbody>
                      <tr>
                        <td>内容3</td>
                        <td>内容4</td>
                      </tr>
                    </tbody>
                  </table>

見出し1	見出し2
内容1	内容2
内容3	内容4

<colgroup> どこにも属さない

colgroup要素は、テーブルにおいて、テーブルの列に一括して属性を指定したい時に使います。 col要素と明確には使い分けられていません。下の例は、colgroupで指定した列に色をつけています。

<table>
                    <colgroup bgcolor="#ffe8ff">
                    <thead>
                      <tr>
                        <th>見出し1</th>
                        <th>見出し2</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>内容1</td>
                        <td>内容2</td>
                      </tr>
                    </tbody>
                    <tbody>
                      <tr>
                        <td>内容3</td>
                        <td>内容4</td>
                      </tr>
                    </tbody>
                  </table>

見出し1	見出し2
内容1	内容2
内容3	内容4

<table>	フロー・コンテンツ
table要素は、表の大枠を表します。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> </table>`

<tbody>	どこにも属さない
tbody要素は、表のデータ部分のtr要素をグループ化します。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> </table>`

<td>	フロー・コンテンツ
td要素は、table要素内で、データを記述するデータセルを表します。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> </table>`

<tfoot>	どこにも属さない
table要素の中で、caption要素、colgroup要素、thead要素の後に記述します。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> <tfoot> <tr> <td>tfootです。</td> </tr> </tfoot> </table>`

<th>	フレージング・コンテンツ
th要素は、table要素内で、表の見出しセルを表します。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> </table>`

<thead>	どこにも属さない
thead要素は、table要素の中で、表のヘッダ部分のtr要素をグループ化します。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> </table>`

<tr>	どこにも属さない
tr要素は、table要素の子要素として使われます。 HTML文書を構成するもの章で説明済みです。
`<table> <thead> <tr> <th>見出しセル</th> </tr> </thead> <tbody> <tr> <td>データセル</td> </tr> </tbody> </table>`

フォーム

ユーザの入力情報を送信するといったフォームを作るタグです。 HTML文書を構成するもの章で説明済みです。

<button>	フレージング・コンテンツ
button要素は、ボタンを表します。 type属性に属性値としてsubmitを与えると送信ボタンになります。属性値にresetを与えるとリセットボタンになります。 value属性の属性値は送信される値になります。
`<button type="submit" name="example" value="1">ボタンの内容</button>`

<datalist> フレージング・コンテンツ

datalist要素は、input要素に対する入力候補のリストを表します。

<input type="text" name="name" list="sample">
                  <datalist id="sample">
                    <option value="サンプル1"></option>
                    <option value="サンプル2"></option>
                    <option value="サンプル3"></option>
                  </datalist>

<fieldset>	フロー・コンテンツ
fieldset要素は、フォーム部品をグループ化します。 form属性を指定することで、form要素への関連付けを指定します。この属性の値には、対応するform要素に指定したID名を記述します。下の例では、fieldset要素に入力した名前のデータを、 formタグ内のinput属性で指定した送信ボタンで送信することができます。
`<fieldset form="example"> <p>お名前：<input type="text" name="name" required form="example"></p> </fieldset> <form method="get" action="html-css-4.html" id="example"> <p><input type="submit" value="送信する"></p> </form>` お名前：

<form>	フロー・コンテンツ
form要素は、入力フォームを表します。この要素内には、フォームを構成する各部品を配置します。 HTML文書を構成するもの章で説明済みです。
`<form>この中でフォームを作成します。</form>`

<input>	フレージング・コンテンツ
input要素は、フォームの入力欄・選択肢・ボタンを作成します HTML文書を構成するもの章で説明済みです。
`<input type="text">`

<label>	フレージング・コンテンツ
label要素は、フォーム部品のラベルを表します。 HTML文書を構成するもの章で説明済みです。
`<label for="name2">お名前：</label> <input type="text" name="name2" id="name2">` お名前：

<meter>	フレージング・コンテンツ
meter要素は、特定の範囲内における数量または割合を表します。value属性は必須となります。 min属性はゲージの最小値、max属性はゲージの最大値、value属性は現在の値を指定します。
`<meter value="50" min="0" max="100">50%</meter>` 50%

<output> フレージング・コンテンツ

output要素は、計算結果などの出力欄を表します。

<form onsubmit="return false" oninput="result.value = Number(a.value) + Number(b.value);">
                    <p><input type="number" name="a" id="a"> + <input type="number" name="b" id="b"> = <output name="result" for="a b"></output></p></form>

<progress>	フレージング・コンテンツ
progress要素は、作業の進捗状況を表します。 value属性は現時点の進捗状況、max属性は全体の作業量を指定します。
`<progress value="50" max="100">50%</progress>` 50%

<select>	フレージング・コンテンツ
select要素は、プルダウンメニューを表します。メニューの選択肢は、この要素内に配置するoption要素で示すことになります。
`<elect name="example"> <option>選択肢のサンプル1</option> <option>選択肢のサンプル2</option> <option>選択肢のサンプル3</option> </select>`

<textarea>	フレージング・コンテンツ
textarea要素は、複数行のテキスト入力欄を作成します。name属性は入力さえたテキストの名前を指定します。 cols属性は入力欄の幅、rows属性は入力欄の高さを指定します。
`<textarea name="example2" cols="50" rows="4">サンプル</textarea>` サンプル

インタラクティブ要素

双方向型の要素を作るためのタグです。

<details>	フロー・コンテンツ
details要素に対応しているブラウザでは、詳細情報の表示・非表示を切り替えることができます。
`<details> <summary>詳細を見る</summary> ここには詳細情報が表示されます。 </details>` 詳細を見るここには詳細情報が表示されます。

<dialog> フロー・コンテンツ

dialog要素に対応しているブラウザでは、JavaScriptと組み合わせることでダイアログを表示することができます。

<p><button type="button" id="openButton">ダイアログを表示</button></p>
                    <dialog id="exDialog" style="width: 150px; height: 100px; text-align: center;">
                    <p>ダイアログ</p>
                    <p><button type="button" id="closeButton">閉じる</button></p>
                  </dialog>
                  
                  <script>
                  const openButton = document.getElementById('openButton');
                  const closeButton = document.getElementById('closeButton');
                  const exDialog = document.getElementById('exDialog');
                  openButton.addEventListener('click', function() {
                      exDialog.showModal();
                  });
                  closeButton.addEventListener('click', function() {
                      exDialog.close();
                  });
                  </script>

HTML

目次

Lesson 1 Chapter 1 HTMLとは

出典

日本語読み

HTML

HTMLの歴史

DOCTYPE宣言

ブラウザに表示

※(1)メモ帳の開き方

Lesson 1 Chapter 2 HTMLを構成するもの

タグ

要素

コンテンツ

属性

Lesson 1 Chapter 3 HTML文書の構造

DOCTYPE宣言

html要素

head要素

body要素

メタ情報

titleタグ

linkタグ

scriptタグ

metaタグ

テキストコンテンツ

見出し

段落

リスト

メディアコンテンツ

画像

ビデオ

オーディオ

表

tableタグ

theadeタグ

trタグ

thタグ

tbodyタグ

tdタグ

フォーム

formタグ

action属性

method属性

inputタグ

埋め込みコンテンツ

aタグ

iframeタグ

その他

headerタグ

navタグ

mainタグ

articleタグ

sectionタグ

divタグ

footerタグ

Lesson 1 Chapter 4 コンテンツモデル

コンテンツモデル

フロー・コンテンツ

フレージング・コンテンツ

エンベッディッド・コンテンツ

インタラクティブ・コンテンツ

ヘッディング・コンテンツ

セクショニング・コンテンツ

メタデータ・コンテンツ

タグの詳細

メインルート

文書メタデータ

区分化ルート

コンテンツ区分

記事タイトル

テキストコンテンツ

インラインテキスト意味づけ

画像とマルチメディア

埋め込みコンテンツ

スクリプティング

編集範囲の特定

テーブル

フォーム

インタラクティブ要素

Lesson 1 Chapter 1

HTMLとは

Lesson 1 Chapter 2

HTMLを構成するもの

Lesson 1 Chapter 3

HTML文書の構造

Lesson 1 Chapter 4

コンテンツモデル