はじめに
この記事ではHTMLのマークアップでよく使われるタグとして、テキストをマークアップする際に使用される基本的なタグを紹介します。注意点や間違った使用例等も記載しているので、HTMLの学習を始めたばかりの方の参考になれば嬉しいです。
この記事の対象者
- ウェブ制作を基礎から学びたい方
- タグの使い方がよくわからない方
- HTMLの書き方を知りたい方
この記事の目標
- テキストをマークアップできるようになる
- テキストにリンクを貼れるようになる
- コンテンツモデルについてなんとなく理解する
この記事で関連のあるHTMLタグ
- <h1>～<h6>
- <p>
- <a>
- <ul>, <ol>, <li>
- その他：<div>, <span>, <strong>, <br>, <section>, <article>
テキストのマークアップによく使うタグ
HTMLを含め、多くの文書は主に見出しや段落で構成されています。これらは要素として別の意味合いを持つものなので、それぞれを違うタグで囲う必要があります。
また、文書は大見出しや小見出し、章立てや節といった階層構造を持つものがほとんどです。見出しや段落などをマークアップするための基本的なタグについて解説します。
見出しタグ<h1>～<h6>
HTMLでは見出しを表現するためにh1～h6の6段階の見出しを定義することができます。h〇はHeadingの略で見出しという意味です。数字の部分は見出しのレベルを表し、数字が小さいほど大きな見出しになります。
h5やh6のレベルまでの見出しを定義することはほとんどありませんが、基本として覚えておきましょう。
見出しタグは、コンテンツモデルではヘディングコンテンツに属します。HTMLは文書なので章立てを組むのが基本ですが、その際にsectionやarticleといったタグをよく使用します。これらはセクショニングコンテンツに属しており、見出しタグと関わり合いが深い要素です。セクショニングコンテンツについては以下の記事で詳しく解説しています。
ページ内で同じレベルの見出しを複数使うことはよくありますが、h1タグは基本的に1ページに1つしか使いません。ページ全体に対するもっとも大きな見出しに使用しましょう。
以下はブログサイトを例にした見出しのマークアップの例です。
見出しタグの使い方の例
<body>
<header>
<h1>NS Tips</h1> サイト名
</header>
<main>
<section>
<h2>記事一覧</h2> セクションタイトル
<article>
<h3>記事タイトル</h3> コンテンツタイトル
</article>
<article>
<h3>記事タイトル</h3>
</article>
<article>
<h3>記事タイトル</h3>
</article>
</section>
</main>
<footer>
<img src="./img/footer-logo.png" alt="NS Tips">
</footer>
</body>見出しのレベルについてなんとなく理解できたらOKです。見出しタグはウェブページ上で何度でも記述するものなので、HTMLの経験を積めば自然と理解が深まります。
見出しタグの詳しい使い方については以下の記事で解説しています。興味のある方は参考にしてください。
段落タグ<p>
文章は複数の段落で構成されます。章の概要説明や本文等にはpタグを使用します。pはParagraphの略で段落という意味です。
pタグの使い方として初心者のうちに気を付けるポイントを説明します。
テキストエディタ上でpタグ内の文章の途中に改行をいれると、ウェブブラウザ上では改行されずに半角スペースが表示されます。スタイルを崩す要因になるので気を付けましょう。
ウェブブラウザでは改行されずに半角スペースが表示されます
<body>
<main>
<p>
テキストが入ります。テキストが入ります。
テキストが入ります。
</p>
<main>
<body>また、pタグでマークアップを行うと改行や前の段落との間に余白を作りますが、改行やスタイリングの目的でpタグを使うことは良くありません。
余白を空けるならCSSを使い、デザインの都合で改行したいのであればbrタグを使用することで実現できます。
改行するだけならbrタグを使います
<body>
<main>
<p>
テキストが入ります。テキストが入ります。<br>
テキストが入ります。
</p>
<main>
<body>pタグはコンテンツモデルではフローコンテンツに分類されるので、テキストに部分的に意味を持たせるためのフレージングコンテンツを含めることができます。
strongタグを使用してテキストの一部を強調する例です。
strongタグの使用例
<body>
<main>
<p>
テキストが入ります。テキストが入ります。<br>
テキストが入ります。<strong>強調されます。</strong>
</p>
<main>
<body>部分的な意味合いを持たせる場合でも要素の階層構造は守らなければいけないので以下のような記述は間違いです。
親要素のpからはみ出している
<p>テキストが入ります。<strong>協調されます。</p></strong>以下は先ほどのブログサイトのHTMLにpタグを追加した例です。
pタグの使い方の例
<body>
<header>
<h1>NS Tips</h1>
</header>
<main>
<section>
<h2>記事一覧</h2>
<p><strong>ゼロからウェブ制作を学びたい人</strong>に向けた記事をご紹介します。<br>学習の参考にしてください。</p>
<article>
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</article>
<article>
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</article>
<article>
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</article>
</section>
</main>
<footer>
<img src="./img/footer-logo.png" alt="NS Tips">
</footer>
</body>pタグは画像やフォーム部品、リンクなどさまざまな要素を含めることができます。人によって好みの分かれる使い方をされることもありますが、基本は段落をマークアップするものとして理解しておきましょう。
リンクタグ<a>
日頃からインターネットを利用してウェブページを閲覧している人であればリンクが何かについての説明は不要かと思います。
どのようなウェブページにも恐らくリンクは存在しています。このようなリンクをHTMLでマークアップするにはaタグというものを使用します。aはAnchorの略です。
aタグはhref属性にリンク先のURLを記述することでそのページに遷移するためのリンクを定義できます。
<a href="リンク先のURLを記述">リンク</a>aタグは親要素のコンテンツモデルを引き継ぐという特徴があります。そのため、子要素に指定できるタグは状況によって変化します。
正しい
<div>
<a href="#">
<h1>見出し</h1>
</a>
</div>
上の例では、aタグの親要素のdivはフローコンテンツなので、ヘディングコンテンツであるh1タグを含められるということになります。
間違い
<span>
<a href="#">
<h1>見出し</h1>
</a>
</span>
この例では、aタグの親要素のspanはフレージングコンテンツなので、ヘディングコンテンツであるh1タグを含めることができないため間違いです。
以下は先ほどのブログサイトのHTMLにaタグを追加した例です。
aタグの使い方の例
<body>
<header>
<h1><a href="index.html">NS Tips</a></h1>
</header>
<main>
<section>
<h2>記事一覧</h2>
<p><strong>ゼロからウェブ制作を学びたい人</strong>に向けた記事をご紹介します。<br>学習の参考にしてください。</p>
<article>
<a href="./blog/single01.html">
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</a>
</article>
<article>
<a href="./blog/single01.html">
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</a>
<article>
<a href="./blog/single01.html">
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</a>
</article>
</section>
</main>
<footer>
<img src="./img/footer-logo.png" alt="NS Tips">
</footer>
</body>aタグはよく使うので、親要素によってコンテンツモデルが変化するということを覚えておくと良いでしょう。また、リンクを別タグで開くようにしたり、リンク先をページ内に指定するということもできます。aタグの詳しい使い方については下記の記事で解説しています。
リストタグ<ul><ol><li>
文章は見出しや段落の他に、目次のような「リスト」として表現したい要素もあります。HTMLでリストをマークアップするときはulタグやolタグを使用します。
- ulタグは順序なしリストの意味を持ちます。ナビゲーションメニューのように、子要素の順番に意味を持たないものは<ul>タグを使用します。
- olタグは順序付きリストの意味を持ちます。文章の目次などのように、子要素の順番に意味があるものは<ol>タグを使用します。
リストをマークアップするときに使われるタグとしてliタグがあります。liタグはList Itemの略で、ulタグやolタグの子要素は必ず<li>タグでなければいけません。liタグはコンテンツモデルではフローコンテンツのカテゴリーに属しているので、多くの要素を含むことができます。
正しい例
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#>メニュー3</a></li>
</ul>以下は<ul>tタグの子要素が<li>タグじゃないので間違い
<ul>
<a href="#"><li>メニュー1</li></a>
<a href="#"><li>メニュー2</li></a>
<a href="#"><li>メニュー3</li></a>
</ul>以下はブログサイトのフッター部分にulタグを使用してリストを追加した例です。
ulタグの使い方の例
<body>
<header>
<h1><a href="index.html">NS Tips</a></h1>
</header>
<main>
<section>
<h2>記事一覧</h2>
<p><strong>ゼロからウェブ制作を学びたい人</strong>に向けた記事をご紹介します。<br>学習の参考にしてください。</p>
<article>
<a href="./blog/single01.html">
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</a>
</article>
<article>
<a href="./blog/single01.html">
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</a>
</article>
<article>
<a href="./blog/single01.html">
<h3>記事タイトル</h3>
<p>記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。記事の説明が入ります。</p>
</a>
</article>
</section>
</main>
<footer>
<img src="./img/footer-logo.png" alt="NS Tips">
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">このサイトについて</a></li>
<li><a href="privacy.html">個人情報の取り扱い</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</footer>
</body>ulタグはヘッダーやフッター、サイドバー等のメニューでよく使われます。olタグはブログ記事の目次やプライバシーポリシー等のページで使われることが多いです。
最後に
テキストをマークアップする時によく使用されるタグを紹介しました。HTMLのコンテンツモデルについてはとっつきにくいかも知れませんが、完全に把握しないといけないものでもないので少しずつ慣れていってもらえれば大丈夫です。
タグや属性の廃止・追加等、HTMLの仕様はよく変わるので、初心者のうちから全てを理解しようとしても徒労になります。コードの間違いをチェックするツールもあるので、まずは間違っていても良いのでどんどんコードを書いてみることをオススメします。