前回記事では、HTMLを使って、ブラウザにページを表示するところまで行い、HTMLの役割を理解しました。
それに続き本記事では、HTMLを学ぶ際に重要となる、タグについて解説します。
前提知識
-
HTMLの役割を理解している(前回内容)
HTMLタグとは
HTMLタグとは、ブラウザに要素の意味を伝えるための記号です。
<タグ名>のようになっているものが、タグです。
ブラウザはこのタグを解析して、前回記事で紹介したDOMを構築するのです。
タグの基本構造
HTMLタグは以下の3要素で構成されます。
-
開始タグ
-
<p>のように、/中にないタグ - 要素の始まりを示す
-
-
終了タグ
-
</p>のように、タグ名の前に/が書いてあるタグ - タグの終わりを表す
-
-
要素内容
- 開始タグと終了タグに挟まれた部分
<p>Lorem Ipsum</p>
例えば、上記のようなタグがあれば、
-
<p>->開始タグ -
</p>->終了タグ -
Lorem Ipsum->要素内容
という風になります。
尚、<p>は、段落(paragraph)を表すタグとなります。
Lorem Ipsum（ロレムイプサム）は、Web制作などで使われる代表的なダミーテキストです。
実際の文章がまだ用意できていない段階で、レイアウトやフォントの見た目だけを確認するために使われます。
意味のある文章を置くと内容に注意が向いてしまうため、デザイン評価がしやすいラテン語風の無意味な文章が利用されています。
ネスト
HTMLはネスト(入れ子構造)を持つことで、ページの階層を表現します。
<div>
<p>Lorem Ipsum</p>
</div>
このように、タグの中に別のタグを入れることでDOMツリーが形成されます。
尚、<div>はブロック要素(まとまり)を表すタグです。
よく使う基本タグ一覧
頻繁に使用するタグは意味を知っておいた方が良いので、表として紹介しておきます。
| タグ名 | 役割 |
|---|---|
| h1〜h6 | 見出し（レベル1〜6） |
| p | 段落 |
| a | リンク |
| img | 画像表示 |
| div | ブロック要素（レイアウト用） |
| span | インライン要素（部分的な装飾） |
| ul / li | 箇条書きリスト |
| strong | 強調（太字） |
| br | 改行（終了タグなし） |
下記のサイトでは、さらに詳しいタグ一覧が紹介されているので、気になる方は参照してみて下さい。
attribute(属性)
タグには、attributeをつけて、追加情報を与えることが出来ます。
<a href="https://example.com">リンク</a>
ここではhrefがリンクを表す属性で、クリックで飛ぶリンク先のURLを指定しています。
よく使うattribute一覧
頻繁に使用するattributeを表にして紹介しておきます。
| 属性名 | 役割 |
|---|---|
| href | リンク先URLを指定する（aタグ） |
| src | 画像・スクリプトなどの読み込み元を指定 |
| alt | 画像の代替テキスト（imgタグ） |
| id | 要素を一意に識別する |
| class | CSSでスタイルを当てるための分類 |
| title | 要素の補足説明（ホバーで表示） |
| style | インラインでCSSを記述 |
| target | リンクの開き方を指定（_blankなど） |
| type | inputやscriptの種類を指定 |
| value | inputの値を指定 |
| name | フォーム送信時のキー名 |
| placeholder | 入力欄の薄い説明文 |
| disabled | 要素を無効化する |
| checked | チェックボックス・ラジオの初期選択 |
サンプルコードを紐解いてみよう
タグについて理解したところで、前回記事で作成したindex.htmlのサンプルを紐解いていきましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブページのデモ</title>
</head>
<body>
<h1>ウェブページのデモ</h1>
<p>これはウェブページのデモです。</p>
</body>
</html>
文書型宣言
<!DOCTYPE html>をつけることで、このファイルはHTML5で書かれているということをブラウザに伝えています。
これによって、ブラウザが文書の意味を正しく意味を受け取ることが出来ます。
htmlタグ
<html>タグに囲まれた部分を、ブラウザはHTML部分であると認識します。
<html lang="en">
-- 中略 --
</html>
langは検索や翻訳機能を使用する際の言語設定を指定するattributeです。
前回の実装ではlang="en"となっているため、英語記事で認識されています。
内容が日本語で記述されているので、より適切にするならば、lang="ja"として、日本語にしておくのがお行儀が良いでしょう。
head
<head>に内包された要素が、ページ情報の設定要素となります。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ウェブページのデモ</title>
</head>
meta
<meta>で、サイトのメタ情報を指定します。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
charsetで文字コードを指定しています。
本コードでは日本語を使用するため、ユニコードのUTF-8を指定しています。
nameは、タグが何の情報なのかを表すラベルとなるattributeで、viewport(画面幅)を指定しているので、その後のattributeで、画面幅を指定していると分かります。
画面幅指定はcontent="width=device-width, initial-scale=1.0"です。
width=device-widthは、画面の幅を実際のデバイスの幅に合わせる設定です。
スマートフォンでウェブを表示する際に、この設定をしないとPC向けページをそのまま縮小して表示しようとするため、デバイスの画面幅に合わせる必要があります。
initial-scale=1.0は、初めにページが表示される際に、ズーム比率を等倍にしますよという設定です。
title
<title>タグは、その名の通り、ウェブページのタイトルを指定するタグです。
検索エンジンで識別する際などに、ここの情報を使用します。
<title>ウェブページのデモ</title>
body
<body>タグの階層下に置かれる情報は、ブラウザが画面に描画する領域です。
本記事では、<h1>と、<p>が描画されます。
<body>
<h1>ウェブページのデモ</h1>
<p>これはウェブページのデモです。</p>
</body>
<h1>は見出し、<P>は段落でしたので、情報通りに描画が行われていることがわかります。
総括
-
HTMLは、タグによって、ブラウザに情報を伝え、ブラウザはタグを解釈してDOMを構築している -
タグは階層構造を作ることができ、開始タグと終了タグの間に別のタグ要素を挟んで表現することが出来る -
タグにはattribute(属性)を付与でき、追加情報を与えることが出来る
次回記事