文中で使うタグ、リストを示すタグ【HTMLの書き方入門】

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>    

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×