文中で使うタグ、リストを示すタグ【HTMLの書き方入門】 | SkillhubAI(スキルハブエーアイ)

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

HTMLでは、テキストに見出しと段落以外にも意味を持たせることが出来ます。 例えば、文章の中で重要な言葉を示す・文章ではなくリスト(箇条書き)を載せるなどもできます。

よく使われる、代表的なタグをみていきましょう。

文中の説明的なマークアップ

HTMLでは段落内の一部分に対して、そのパーツの役割や目的を決めるマークアップもできます。 例えば「ここは重要である」「ここは引用文である」などがあります。

代表的なタグと意味をいくつか紹介します。

タグ タグの意味
strong 重要性が高いテキストであることを示します。
画面上では一般的に太字で表示されます。
em 強調されたテキストを示します。
画面上では一般的に斜体で表示されます。
q 引用したワードやフレーズであることを表します(行内引用)。
段落ごと引用する場合はblockquoteタグ(ブロック引用要素)を使います。
cite 引用された創作物の出典元であることを示します。

index.htmlでは、会社理念の中の「社会に貢献できる人材を創造すること」という言葉が太字になっています。<strong>タグで強調してみましょう。

<h2>会社理念</h2>
<h3>EdTechで人々に力を与えたい</h3>
<p>自分の力を100%発揮できてない人はたくさんいると思います。本来持っているポテンシャルを我々のサービス/テクノロジーで開花させること。 </p>
<p>眠っている才能を呼び覚まし、<strong>社会に貢献できる人材を創造すること。</strong>それが我々のミッションです。</p>

file

リスト(list)タグの種類と使い分け

リスト(箇条書き)を作るためには、<ul> もしくは <ol>タグを使います。 以下のような使い分けをします。

  • <ul>タグはunordered list(順序がないリスト)
  • <ol>タグはordered list(順序があるリスト)

file

どちらも、リストの項目は<li> </li>タグで囲って示します。

file

題材のサイトだと、h1タグの下にあるメニューの「ホーム」「会社概要」「お問い合わせ」をリストとしてマークアップします。 <ul>をつかってマークアップすると、下記のようになります。

<h1>エドベース株式会社</h1>
<ul>
  <li>ホーム</li>
  <li>会社概要</li>
  <li>お問い合わせ</li>
</ul>