【WEB 入門講座】HTML文書の構造と基本的なタグ

[WEB 入門講座]HTML文書の構造と基本的なタグ

HTMLの基本的な構造
pタグの解説
リストタグ（olタグ、ulタグ、liタグ）の解説
tableタグ、trタグ、tdタグ
まとめ

本講座では、HTML文書の構造を学習する。 HTML文書はある構造をもっているので、まずはその構造を学習する。その後に、基礎的なタグを学習する。

HTMLの基本的な構造

HTML文書の基本的な構造を学習する。ここで学習する内容は「最低限の構造」である。

001<!DOCTYPE html>
002<html lang="ja">
003  <head>
004    <meta charset="UTF-8">
005    <title>IORI</title>
006  </head>
007  <body>
008
009    
010    <p>
011      文章を記述する。
012    </p>
013
014  </body>
015</html>

「学習用のHTML文書」として、最低限のタグを記述した。 1つずつ解説する。

001<!DOCTYPE html>

1行目で文書の宣言をする。「HTML5のルールに従って記述した文書である」という事を宣言している。 Webブラウザがこのファイルを実行する時、「このファイルはHTML5のルールに従って記述されているのだな。では、そのルールに従って画面に表示しよう」と判断する。

002<html lang="ja">

lang属性に値「ja」を設定したhtmlタグである。 htmlタグはHTML文書のルートタグである。つまり、HTML文書の親要素であり、 HTML文書に記述するタグは、全てhtmlタグの子要素である。

このHTML文書の構造は次のようになっている。

htmlタグ
　　┃
　　┣ headタグ
　　┃
　　┗ bodyタグ

htmlタグの下に、headタグとbodyタグが存在する。 htmlタグが親要素で、headタグとbodyタグが子要素である。

003 <head>

headタグである。headタグを解説する前にbodyタグを解説する。

007  <body>
008
009    
010    <p>
011      文章を記述する。
012    </p>
013
014  </body>

bodyタグは7行目から14行目までである。画面に表示するものを、 bodyタグの中に記述する。 Webブラウザに表示するものをbodyタグに記述する。逆に言うと、画面に表示しないものは、 headタグの中に記述する。 headタグへ戻る。

003  <head>
004    <meta charset="UTF-8">
005    <title>IORI</title>
006  </head>

headタグは「metaタグ」と「titleタグ」の2つの子要素を持つ。 4行目がmetaタグである。 metaタグの利用方法は定型文として決まっているので、サイトを製作している時に必要になったら、その都度ネットで調べて記述する。

今回、「charset="UTF-8"」とある。これは文字コードを指定する記述である。「この文書の文字コードは、UTF-8です」と宣言している。当講座の最初で解説したとおり、みなさまのHTML文書は UTF-8で保存しているので、「charset="UTF-8"」と記述する。

5行目はtitleタグである。Webブラウザのタイトルバーに記述する文字列を、 titleタグに記述する。以上がheadタグの解説である。先ほど言及したとおり、画面に表示しないものをheadタグに記述する。文字コードを指定するmetaタグも、 Webブラウザのタイトルバーに文字列を記述するtitleタグも、画面上には表示しない。ここで言う「画面」とは、「サイトの内容（本文）」を意味する。タイトルバーはタイトルバーなので、本講座では、画面に含めない。

007  <body>
008
009    
010    <p>
011      文章を記述する。
012    </p>
013
014  </body>

bodyタグを解説する。 bodyタグに記述した内容が、画面上に表示する。サンプルのbodyタグは、「pタグ」を子要素に持つ。 pタグは文章を記述する時に利用する。 9行目は、コメントである。

コメントとは HTML文書内にコメントを残したい場合、コメント機能を利用する。

コメントを残す方法「」で囲まれた部分がコメントになる。

HTML文書を記述していると、「この部分は何をしているのか？」という事を備忘のために記述したい場面がでてくる。特に複雑なHTML文書を作成していると、タグの開始位置や終了位置、どのような内容を記述しているのかといった事を、 HTML文書内にコメントとして残したい。ただ単純にコメントを記述すると、画面上に表示してしまう。そこで、コメント機能を利用する。「」で文字を囲むと、その部分はコメントになる。コメントになった文字は、画面上に表示しない。

HTML文書の構造の解説は以上である。

HTML文書の構造 <html>
　┃
　┣ <head>：画面に表示しない内容
　┃　　　┃
　┃　　　┣子要素・・・
　┃　　　┗子要素・・・
　┃
　┗ <body>：画面に表示する内容
　　　　　┃
　　　　　┣子要素・・・
　　　　　┗子要素・・・

最上位の要素がhtmlタグで、その下に「headタグ」と「bodyタグ」が存在する。 headタグには画面に表示しないものを記述する。具体的には「HTML文書の文字コード」や「HTML文書の紹介文」や「タイトルバーに記述する文字」等がある。 bodyタグには、画面に表示するものを記述する。

pタグの解説

001<!DOCTYPE html>
002<html lang="ja">
003  <head>
004    <meta charset="UTF-8">
005    <title>IORI</title>
006  </head>
007  <body>
008
009    <p>
010      文章を記述する。
011      文章を記述する。
012    </p>
013
014    <p>
015      文章を記述した。
016      文章を記述した。
017    </p>
018
019  </body>
020</html>

文章を記述する。文章を記述する。

文章を記述した。文章を記述した。

Webブラウザでファイルを開くと、このように表示する。ファイルで記述した内容と、Webブラウザに表示する内容は、若干異なる。

009    <p>
010      文章を記述する。
011      文章を記述する。
012    </p>
013
014    <p>
015      文章を記述した。
016      文章を記述した。
017    </p>

bodyタグを取り出した。pタグが2つ存在し、それぞれ文章が記述されている。

pタグ文章を記述するためのタグ。段落ごとにpタグを作成する。

文章を記述する時、pタグを利用する。ただし、1つのpタグに全ての文章を記述するわけではない。基本的に段落ごとにpタグを作成する。例えば、お手元の小説などを開いてほしい。小説には段落が存在する。その段落ごとにpタグを作成する。段落が2つあれば、2つpタグを作って、それぞれの段落の文章を pタグに記述する。

009    <p>
010      文章を記述する。
011      文章を記述する。
012    </p>
013
014    <p>
015      文章を記述した。
016      文章を記述した。
017    </p>

もう少し細かく見る。 bodyタグに2つのpタグがある。つまり、2つの段落を作成したという事である。 1つ目の段落に注目する。 10行目と11行目に文字列「文章を記述する」とある。 2つの文字は改行されている。

文章を記述する。文章を記述する。

文章を記述した。文章を記述した。

画面を見ると、2つの文字列「文章を記述する。」が、続けて記述されている。改行は無い。

改行 pタグ内に記述した文章は、基本的に横方向へ記述される。改行する場合は、改行タグを利用するか、 pタグを新たに記述して、段落を分ける。

pタグに記述した文章を改行しても、画面には改行が反映されない。もし改行する場合は、改行タグを利用するか、別のpタグを作成する（段落を分ける）。

009    <p>
010      文章を記述する。
011      文章を記述する。
012    </p>
013
014    <p>
015      文章を記述した。
016      文章を記述した。
017    </p>

9行目のpタグと、14行目のpタグが存在する。この2つのタグは、縦方向に並ぶ。つまり、pタグを新しく作成して文章を記述すると、上のpタグに対して改行する。

009    <p style="background:#aaf">
010      文章を記述する。
011      文章を記述する。
012    </p>
013
014    <p style="background:#afa">
015      文章を記述した。
016      文章を記述した。
017    </p>

文章を記述する。文章を記述する。

文章を記述した。文章を記述した。

pタグに背景色をつけた。背景色のつけかたは後述する。今は、気にしなくてもよい。1つ目のpタグは紫色の背景色の部分である。 1つ目のpタグは緑色の背景色の部分である。 pタグを複数記述すると、このように縦方向に並ぶ。このようにpタグを縦に並べると、自動的に改行する。

リストタグ（olタグ、ulタグ、liタグ）の解説

001<!DOCTYPE html>
002<html lang="ja">
003  <head>
004    <meta charset="UTF-8">
005    <title>IORI</title>
006  </head>
007  <body>
008    <p>
009      学習内容
010    </p>
011    <ol>
012      <li>HTML</li>
013      <li>CSS</li>
014      <li>JavaScript</li>
015    </ol>
016  </body>
017</html>

Webブラウザでファイルを表示すると、つぎのように画面に表示する。

学習内容

リストタグ文字列をリスト形式で表示する場合に利用する。

リストタグはpタグと同様、頻繁に利用するタグである。

リストタグの構造 <ol>（リスト全体を囲む）
　　┃
　　┣<li>（文字を記入）
　　┣<li>（文字を記入）
　　┗<li>（文字を記入）

008    <p>
009      学習内容
010    </p>
011    <ol>
012      <li>HTML</li>
013      <li>CSS</li>
014      <li>JavaScript</li>
015    </ol>

bodyタグの中を取り出した。8行目でpタグを利用して、文字列「学習内容」を表示する。 11行目でolタグを利用する。 olタグはリストタグの一種である。リストタグは、文字列を箇条書きに表示する時に利用する。

今、文字列「HTML」「CSS」「JavaScript」を箇条書きで、 Webブラウザの画面に表示する。その場合、12行目から14行目までのように、箇条書きにする文字列をliタグで囲む。

012      <li>HTML</li>
013      <li>CSS</li>
014      <li>JavaScript</li>

箇条書きで表示する文字列を、liタグで囲う。さらに全体を、olタグで囲う。

011<ol>
012  <li>HTML</li>
013  <li>CSS</li>
014  <li>JavaScript</li>
015</ol>

通常、このようにolタグで囲む。解説は以上である。

liタグをulタグで囲むと、異なる表示になる。

001<!DOCTYPE html>
002<html lang="ja">
003  <head>
004    <meta charset="UTF-8">
005    <title>IORI</title>
006  </head>
007  <body>
008    <p>
009      学習内容
010    </p>
011    <ul>
012      <li>HTML</li>
013      <li>CSS</li>
014      <li>JavaScript</li>
015    </ul>
016  </body>
017</html>

学習内容

箇条書きにする文字列をliタグで囲い、さらにそのliタグをulタグで囲むと、箇条書きにした文字列の前に、「●」が表示する。

解説は以上である。

tableタグ、trタグ、tdタグ

表形式で文字を表示する場合、 tableタグを利用する。

001<!DOCTYPE html><html lang="ja">
002<head><meta charset="UTF-8">
003<title>IORI</title></head>
004<body>
005
006  <table border=1>
007    <tr>
008      <td>HTML</td>
009      <td>基礎を学習</td>
010    </tr>
011    <tr>
012      <td>CSS</td>
013      <td>基礎を学習</td>
014    </tr>
015  </table>
016
017</body>
018</html>

HTML	基礎を学習
CSS	基礎を学習

tableタグの構造 <table>（表全体）
　　┃
　　┣<tr>（1列分）
　　┃　　┃
　　┃　　┣<td>（文字を記入）
　　┃　　┣<td>（文字を記入）
　　┃　　┗<td>（文字を記入）
　　┃
　　┗<tr>（1列分）
　　　　　┃
　　　　　┣<td>（文字を記入）
　　　　　┣<td>（文字を記入）
　　　　　┗<td>（文字を記入）

trタグとtdタグ trタグは、1行分を意味する。tdタグはセルを意味する。

表を作成する場合、tableタグを記述する。表の1行分を作成する場合、trタグを記述する。

文字を記述する場合、tdタグを利用する。

HTML

さらに横方向へ文字を記述する場合、tdタグを追加する。

  <table border=1>
    <tr>
        <td>HTML</td>
        <td>基礎を学習</td>
    </tr>
  </table>

HTML

基礎を学習

tdタグは表のセルを意味する。さらに横方向へセルを追加する場合は、tdを追加する。

  <table border=1>
    <tr>
        <td>HTML</td>
        <td>基礎を学習</td>
        <td>がんばろう</td>
    </tr>
  </table>

HTML

基礎を学習

がんばろう

trタグを追加して、列を追加する。

  <table border=1>
    <tr>
        <td>HTML</td>
        <td>基礎を学習</td>
        <td>がんばろう</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>基礎を学習</td>
        <td>走るIORI</td>
    </tr>
  </table>

HTML	基礎を学習	がんばろう
CSS	基礎を学習	走るIORI

trタグを追加して、tdタグを記述すると、このように2列目が表示する。

解説は以上である。

まとめ

コメントを残す方法「」で囲まれた部分がコメントになる。

pタグ文章を記述するためのタグ。段落ごとにpタグを作成する。

改行 pタグ内に記述した文章は、基本的に横方向へ記述される。改行する場合は、改行タグを利用するか、 pタグを新たに記述して、段落を分ける。

リストタグ文字列をリスト形式で表示する場合に利用する。

tableタグの構造 <ol>（リスト全体を囲む）
　　┃
　　┣<li>（文字を記入）
　　┣<li>（文字を記入）
　　┗<li>（文字を記入）

IORI online School

JavaScript、html、css の無料学習サイト

【WEB 入門講座】HTML文書の構造と基本的なタグ

HTMLの基本的な構造

pタグの解説

リストタグ（olタグ、ulタグ、liタグ）の解説

tableタグ、trタグ、tdタグ

まとめ