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