HTMLでは、テキストに見出しと段落以外にも意味を持たせることが出来ます。 例えば、文章の中で重要な言葉を示す・文章ではなくリスト(箇条書き)を載せるなどもできます。
よく使われる、代表的なタグをみていきましょう。
文中の説明的なマークアップ
HTMLでは段落内の一部分に対して、そのパーツの役割や目的を決めるマークアップもできます。 例えば「ここは重要である」「ここは引用文である」などがあります。
代表的なタグと意味をいくつか紹介します。
タグ | タグの意味 |
---|---|
strong | 重要性が高いテキストであることを示します。 画面上では一般的に太字で表示されます。 |
em | 強調されたテキストを示します。 画面上では一般的に斜体で表示されます。 |
q | 引用したワードやフレーズであることを表します(行内引用)。 段落ごと引用する場合はblockquoteタグ(ブロック引用要素)を使います。 |
cite | 引用された創作物の出典元であることを示します。 |
index.htmlでは、会社理念の中の「社会に貢献できる人材を創造すること」という言葉が太字になっています。<strong>
タグで強調してみましょう。
<h2>会社理念</h2>
<h3>EdTechで人々に力を与えたい</h3>
<p>自分の力を100%発揮できてない人はたくさんいると思います。本来持っているポテンシャルを我々のサービス/テクノロジーで開花させること。 </p>
<p>眠っている才能を呼び覚まし、<strong>社会に貢献できる人材を創造すること。</strong>それが我々のミッションです。</p>
リスト(list)タグの種類と使い分け
リスト(箇条書き)を作るためには、<ul>
もしくは <ol>
タグを使います。
以下のような使い分けをします。
<ul>
タグはunordered list(順序がないリスト)<ol>
タグはordered list(順序があるリスト)
どちらも、リストの項目は<li>
</li>
タグで囲って示します。
題材のサイトだと、h1タグの下にあるメニューの「ホーム」「会社概要」「お問い合わせ」をリストとしてマークアップします。
<ul>
をつかってマークアップすると、下記のようになります。
<h1>エドベース株式会社</h1>
<ul>
<li>ホーム</li>
<li>会社概要</li>
<li>お問い合わせ</li>
</ul>