Help us understand the problem. What is going on with this article?

HTML5 & CSS3入門第2回〜HTMLの基礎知識とマークアップの実践例〜

More than 1 year has passed since last update.

HTML、CSSについて簡潔にまとめたものを何回かに分けて投稿していきます。サクッと読めるようにしたいので一記事の長さはできるだけ短くしています。

環境

HTML : HTML 5.1
CSS : CSS3
OS : macOS High Sierra バージョン 10.13.6

HTMLとは

HTMLとは、「テキストや画像を人間にもコンピュータにも理解できるものにする」ものです。Webページを作成する上で必要不可欠で、1ページに1つのHTMLファイルが必要です。

必要な「タグ」は数十種類ほど

HTMLで、テキストや画像を人間にもコンピュータにも分かるようにするには、タグ付けを行なっていきます。タグは、約200種類ありますが、実際によく使われるタグは、数十種類ほどで、必ず知っておかないといけないタグは十種類程度です。多くのタグを使い分けるより、できるだけシンプルに書く傾向の方が強いです。

HTMLの書式

HTMLの一般的な書式

下の画像のような書き方がHTMLの一般的な書式です。下の画像を元に、各部の名称を確認しましょう。HTMLでは、一般的に開始タグと終了タグでコンテンツを囲むのが基本的な書式です。

html5-css3-introduction-image_10.png

上記の画像では、「HOGEショップ」というテキストに「リンクの意味を持たせる」ということをしています。

コンテンツ

コンテンツとは、「ブラウザに表示される部分」と考えると理解しやすいです。

要素

「開始タグ〜コンテンツ〜終了タグ」を全部まとめて要素といいます。

タグ名

HTMLには、あらかじめ定義されたタグ名が何種類もあります。コンテンツの意味合いやドキュメントの構造に応じて、適切なタグ名を選んで使います。

属性と属性値

属性は、タグに追加的な情報を付け加えるときに使います。属性は1つもつかないこともあれば、1つだけや2つ以上つくこともあります。属性には大きく分けて、「そのタグに固有の属性」と「どんなタグにも追加できる属性」の2種類があります。例えば、「そのタグに固有の属性」は、aタグのhref属性などがあります。また、「どんなタグにも追加できる属性」は、正式には「グローバル属性」と呼ばれています。代表的なものにclass属性やid属性などがあります。

hoge.html
<a href="http://hoge.jp">...</a>

「属性」とそれに続く「=」、その属性に指定する値を囲む「"」は、必ず半角で続けて書きます。また、タグ名と属性の間、属性と属性の間には半角スペースを入れて区切ります。

空要素

空要素とは、終了タグがない要素のことを指します。空要素は、基本的に表示するコンテンツがないものや属性などで表示するコンテンツを指示するものが空要素と考えます。どのタグが空要素かは、出てくるたびに覚えていくと良いでしょう。

代表的な空要素

  • <meta>タグ : 画面には表示されない。HTMLドキュメント自体の情報を記しておく。
  • <link>タグ : 同上
  • <br>タグ : 改行を意味するタグで、改行以外には表示するコンテンツがない。
  • <img>タグ : 画像を表示するタグで、表示するコンテンツは、src属性で指定する。
  • <input>タグ : フォームのテキストフィールドやチェックボックスを表示するタグで、表示するフォーム部品(コンテンツ)はtype属性で指定する。

HTMLドキュメントの構造

タグのコンテンツに含まれるのは、テキストだけではありません。以下のように他のタグがコンテンツになることもあります。

hoge.html
<p>本日の日替わりランチは<a href="daylymenue.html">日替わりメニューページ</a>をご覧ください。</p>

このように、要素の中に別の要素がある構造を「階層構造」といいます。「階層構造」を理解しておくことは、HTMLを書くときだけでなく、CSSを書くときにも必要となるのでとても重要です。また、階層構造を表す用語がいくつかあるので確認しましょう。

親要素と子要素

ある要素から見て、1階層上にある要素を「親要素」、逆にある要素から見て、1階層下にある要素を「子要素」といいます。

hoge.html
<p>本日の日替わりランチは<a href="daylymenue.html">日替わりメニューページ</a>をご覧ください。</p>

<!-- この場合、aタグはpタグの子要素であり、pタグはaタグの親要素です。 -->

祖先要素と子孫要素

ある要素の親要素、そのまた親要素...というように、親要素を遡ってたどり着く要素を「祖先要素」といいます。逆に、ある要素の子要素、そのまた子要素...というように子要素を伝ってたどり着く要素を「子孫要素」といいます。

hoge.html
<ul>
   <li>本日の<a href="dayly-lunch-menue.html">日替わりランチメニュー</a></li>
   <li>本日の<a href="dayly-diner-menue.html">日替わりディナーメニュー</a></li>
</ul>
<!-- この場合、aタグはulタグの子孫要素であり、ulタグはaタグの祖先要素です。 -->

兄弟要素

同階層にある要素、つまり、親要素が同じ要素を「兄弟要素」といいます。兄弟要素のうち、ある要素より先に出る要素を「兄要素」、後ろに出てくる要素を「弟要素」ということもあります。

hoge.html
<ul>
   <li>本日の<a href="dayly-lunch-menue.html">日替わりランチメニュー</a></li>
   <li>本日の<a href="dayly-diner-menue.html">日替わりディナーメニュー</a></li>
</ul>
<!-- この場合、liタグは兄弟要素になります。「日替わりランチメニュー」の方が兄要素で、「日替わりディナーメニュー」 の方が弟要素です。-->

子要素は親要素からはみ出してはいけない

子要素は、必ず親要素の開始タグと終了タグの間に収まっている必要があります。そのため、親要素の終了タグよりも後ろに子要素の終了タグが来ることは絶対にありません。以下の例は、子要素が親要素からはみ出してしまった誤った例です。

hoge.html
<p>本日の日替わりランチは<a href="daylymenue.html">日替わりメニューページをご覧ください。</p></a>
<!-- 親要素であるpタグから子要素であるaタグがはみ出してしまっています。 -->

マークアップの考え方トレーニング

HTMLのタグは一つ一つの意味は難しくありません。しかし、どんな時に、どのタグを選んでマークアップするのかはなかなか分かりづらいです。 そこで、既存のサイトに1つの記事を追加する時の流れを以下にまとめます。イメージしながら読んでみてください。

記事の大見出しを立てる

記事をマークアップする際、まずは「大見出し」を立てるところから始めます。大見出しのテキストに重要なのは「その記事の内容が一言でわかる」ことです、

大見出しのh1タグ
<h1>タグは、そのページの一番重要な見出し、大見出しを意味します。記事全体の内容を要約したテキストを大見出しにすると良いでしょう。また、この大見出しは非常に重要です。なぜなら、このページを見るユーザーは、大見出しを読んで続きを読むかどうか判断するからです。

中見出しを立てる

大見出しを立てたら、次にそれ以外の見出しを立てます。HTMLの見出しタグには、重要な順に<h1>、<h2>、<h3>、<h4>、<h5>、<h6>の6種類があります。<h1>は、前述のように記事全体の内容がわかるように大見出しをマークアップするために使います。それより、重要度の低い<h2>〜<h6>は記事の一部を部分的に要約するために使用します。<h1>の次は、<h2>を同じ重要度のものに使い、その次に重要度が高いものは<h3>、その次は、<h4>というようにだんだん重要度を下げながら、見出しを立てて、文章を整理していきます。通常使うのは、<h3>か<h4>までで、<h5>や<h6>はあまり、使いません。

段落を作る

見出しを立てたら、残るテキストの部分をマークアップしていきます。まずは、文章になっているところを段落ごとに<p>と</p>で囲みます。<p>〜</p>で囲むと、HTMLの表示では、次の段落との間に1行分のスペースが空きます。このスペースが空かないように<br>タグを入れるケースがよくあります。段落の終わりに<br>タグを入れるのは、正しいHTMLと言えません。正しいマークアップを目指すのであれば、段落の終わりに<br>を入れるのではなく、<p>〜</p>で囲むべきです。その上で、段落と段落の間に空くスペースを取り除きたいのであれば、CSSで調整します。

箇条書きを作る

箇条書きを作る際は、<ul>と<li>でマークアップします。<ul>と<li>の詳細は、次回解説します。

リンクを作る

ドキュメントの大枠の意味づけが終了したので、次はテキストを詳細にマークアップしていきます。

記事をセクションごとにまとめる

見出し、段落、箇条書きに加え、リンクなどをつけたことで、HTML化はほぼ終了しているといってよいでしょう。しかし、さらに丁寧なマークアップを目指すなら、記事をセクションごとに分けることもできます。セクションとは「見出しにそれに続く内容」をひとまとめにしたセットのことです。

記事の一部分をまとめる<section>タグ
セクションとは、記事の一部分、または、文章の節のことを指します。Webサイトの記事では、見出しとそれに続くテキストをセットにして<section>〜</section>タグで囲み、ひとまとまりにします。

記事全体を<article>でまとめる

<section>が記事の一部分をまとめるのに対し、<article>は、「記事全体をひとまとめにする」ために使います。そのページで一番重要な<h1>と記事全体を<article>で囲むのが典型的な使用例です。

HTMLドキュメントの基礎部分をマークアップ

HTMLには、どんなWebページであっても書いておかなければならない基礎部分があります。それは、以下のコードです。

hoge.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="幸せのひと時をすべての人へ。レストランHOGEHOGEは、新鮮な食材を用いた最高の料理を真心込めて提供します。">
<title>レストランHOGEHOGE 公式HP</title>
</head>
<body>
<article>
...
</article>
</body>
</html>

DOCTYPE宣言
HTMLドキュメントの1行目にある「<!DOCTYPE html>」」はDOCTYPE宣言と呼ばれるもので、どのバージョンのHTMLで書かれているかを示しています。「<!DOCTYPE html>」」は、このドキュメントがHTML5の仕様に基づいて書かれていることを示しています。

<html>タグとlang属性
DOCTYPE宣言の次の行には<html>タグを書き、その子要素には<head>タグと<body>タグを含めます。また、<html>タグにはlang属性を追加します。このlang属性には、このWebページで使用する主な言語を指定しておきます。このページで使われているのが日本語なら「<html lang="ja">」とします。もし、他の言語のページを作るのであれば、<html>のlang属性を次のようにします。

言語 言語コード <html>タグでの使用例
英語 en <html lang="en">
中国語 zh <html lang="zh">
韓国語 ko <html lang="ko">
スペイン語 es <html lang="zh">

<head>タグ
<head>〜</head>の中には「このHTML自体の情報」を記述します。この、HTML自体の情報のことを「メタデータ」といいます。<head>〜</head>に書かれたメタデータがブラウザウィンドウに表示されることはありませんが、<body>〜</body>の部分を正しく表示させるためと検索サイトなどにそのページの内容を伝えるために重要なことが書かれています。<head>〜</head>の中に、最低限書いておくべきなのは次の3行です。

<meta charset="utf-8">
このHTMLの文字コードが「UTF-8」であることを示しています。ブラウザは、この行を見て、そのHTMLの文字コードを判別します。そのため、これがないとページが文字化けして表示される場合があります。また、できるだけ早くブラウザに文字コードを伝える必要があるので、<meta charset=utf-8">は、必ず開始タグの次の行に書きましょう。

<meta name="description" content="幸せのひと時をすべての人へ。...料理を真心込めて提供します。">
ページの概要を記しておく部分です。ページの概要は「content="..."」の部分に、70~80文字程度の長さで書いておきます。

<title>〜</title>
このHTMLファイルのタイトルを「〜」のところに書いておきます。この<title>〜</title>の中に書いたテキストは、ブラウザのウィンドウのタイトルとして表示されます。この<title>〜</title>のコンテンツ部分と、<meta name="description content="...">の「...」の部分は、検索サイトの検索結果に表示される可能性が高く、ページに表示されないからといって手を抜いてはいけません。

<body>タグ
ブラウザウィンドウに表示される部分は、すべて<body>〜</body>の間に含めます。「HTMLを書く」という作業のほとんどが、<body>〜</body>にタグとコンテンツを追加していくことだといってよいでしょう。

終わりに

これで、「HTML5 & CSS3入門第2回〜HTMLの基礎知識とマークアップの実践例〜」は終了です。それでは、また。

io_fleming
インプットしたものをゆるゆるアウトプットしていこうと思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした