32 よく使うタグ
HTMLでWebページを作成する際に頻繁に使うタグを紹介します。
32.1 見出し
HTMLでは、見出しを作成するためにh1からh6までの要素を使用します。hは”heading”の略で、数字が小さいほど見出しのレベルが高くなります。
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>32.2 改行
<br>要素はテキストの途中で改行したいときに使用します。
<p>This is a line.<br>This is another line.</p>段落を分けたい場合はp要素を使用しましょう。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>32.3 文字装飾
| タグ | 説明 | 見た目 |
|---|---|---|
<b> |
太字 | 太字 |
<strong> |
強調 | 太字 |
<i> |
斜体 | 斜体 |
<em> |
強調 | 斜体 |
<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>32.4 リスト
32.4.1 番号付きリスト
<ol>要素は、番号付きリストを作成するために使用されます。各項目は<li>要素で表されます。
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>32.4.2 箇条書きリスト
<ul>要素は、箇条書きリストを作成するために使用されます。各項目は<li>要素で表されます。
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>32.5 引用
32.5.1 blockquote要素
<blockquote>要素は、引用を示すために使用されます。
法政大学の目的は、以下のとおりである。
<blockquote cite="https://www.hosei.ac.jp/hosei/daigakugaiyo/rinen/rinen/">
<ol>
<li>「自由と進歩」の精神と公正な判断力をもって、主体的、自立的かつ創造的に、新しい時代を構築する市民を育てる。</li>
<li>学問の自由に基づき、真理の探究と「進取の気象」によって、学術の発展に寄与する。</li>
<li>多様化する地球規模の課題を解決し、「持続可能な地球社会の構築」に貢献する。</li>
</ol>
</blockquote>32.5.2 q要素
<q>要素は、短い引用を示すために使用されます。通常、引用符で囲まれます。
<p><q>Anyone who has never made a mistake has never tried anything new.</q> - Albert Einstein</p>32.5.3 address要素
<address>要素は、連絡先情報を示すために使用されます。
<address>
3-7-2 Kajino-cho<br>
Koganei-shi, Tokyo 184-8584<br>
Japan
</address>32.6 Emoji
HTMLでは、Emojiを直接使用することができます。
<p>Here is a grinning face: 😀</p>
<p>Here is a grinning face: 😀</p>以下ではいくつかの代表的なEmojiとそのコードを示します。
| Emoji | コード |
|---|---|
| 😀 | 😀 |
| 😂 | 😂 |
| ❤️ | ❤ |
| 🎉 | 🎉 |
32.7 div要素
<div>要素は、他のHTML要素をグループ化するために使用されます。style属性を使用して、背景色や文字色などを指定することができます。
<div style="background-color:yellow;">
<h2>Paris</h2>
<p>Paris is a city in France.</p>
</div>
<div style=" background-color:rebeccapurple; color:white;">
<h2>New York</h2>
<p>New York is a city in the United States.</p>
</div>
<div style="background-color:lightblue; color:black;">
<h2>Tokyo</h2>
<p>Tokyo is a city in Japan.</p>
</div>32.8 span要素
<span>要素は、テキストの一部をスタイル付けするために使用されます。style属性を使用して、文字色や背景色などを指定することができます。
<div>要素と<span>要素はよく似ていますが、<div>要素はブロックレベル要素（block-level element）である。一方、<span>要素は、インライン要素（inline element）であり、テキストの一部をスタイル付けするために使用されます。
<p>This is a <span style="color: red;">red</span> word.</p>
<p>This is a <span style="background-color: yellow;">highlighted</span> word.</p>
<p>This is a <span style="font-weight: bold;">bold</span> word.</p>
<p>This is a <span style="font-style: italic;">italic</span> word.</p>