見出し画像

【HTML】テキストとリスト

Naoki Saito

最近はオミクロン株の影響で外出が規制されたりと、過ごしにくい環境になりました。趣味のスキーにも今シーズン１回も行けてないので、一刻も早く収まってほしいものです。。。
さて、今回は「テキストとリスト」というお題で学んだことを記事にまとめていこうと思います。

<h1~h6>タグ

hはheadingの略で、見出しやタイトルを付けるためのタグです。
hタグはh1→h2→h3→h4といった順に書くように決まっている。

<h1>大見出し</h1>
  <h2>中見出し</h2>
    <h3>小見出し</h3>
    <h3>小見出し</h3>
    <h3>小見出し</h3>
  <h2>中見出し</h2>
    <h3>小見出し</h3>
    <h3>小見出し</h3>
    <h3>小見出し</h3>

以上の例のように書くことが一般的になります。また、hタグは数字によって文字の大きさが異なります。

<h1>h1見出し</h1>
　
<h2>h2見出し</h2>

<h3>h3見出し</h3>

<h4>h4見出し</h4>

<h5>h5見出し</h5>

<h6>h6見出し</h6>

上記をブラウザで表示すると以下のようになります。

h1~h6タグの違い


<p>タグ

日本語で文章の段落や節を表すParagraphの略です。<p>タグはHTMLを書く上で頻回に使うタグです。<p>タグで囲まれた文章は段落とみなされるため、<p>タグの前後で改行が入ります。


<br>タグ

brはbreakの略で、改行という意味です。終了タグのない空要素であるので、改行をしたいところで<br>タグを記述することで<br>タグの後ろが改行されます。


<em>タグ

emはemphasis(エンファシス)の略で、強調という意味があります。文章の強調させたい部分を<em>タグで囲むことで、斜体にさせる効果があります。また、GoogleやSafariといった検索エンジンにも強調していることを伝えることもできます。


<strong>タグ

<em>タグと同様、強調という意味です。<em>タグより強調度が高く、文章の強調させたい部分を<strong>タグで囲むことで、太字にさせる効果があります。


<blockquote>タグ

<blockquote>タグで囲んだ部分は引用である、という意味を持たせることができます。ブラウザで表示すると、左側にインテントが入ります。著作権があるものを使用する場合、必ず引用であると示すことが必要です。<blockquote>タグにcite属性で引用元のリンクを記述することもできます。


<q>タグ

qはquotationの略で、引用という意味です。使い方は<blockquote>タグと同じで、引用の部分を<q>タグで囲みます。cite属性も加えることができます。

  • <blockquote>タグ
    長い文章を囲むときに使用します。

  • <q>タグ
    短い文章    を囲むときに使用します。

上記が<blockquote>タグと<q>タグの使い分けになります。


<cite>タグ

citeはcitationの略で、引用・参照という意味です。本や映画、ゲームなどの作品のタイトルを<cite>タグで囲んで使用します。


<pre>タグ

preはpreformatted textの略で、整形済みテキストという意味です。
<pre>タグで囲んだ部分の改行や空白はそのままブラウザで表示されます。

<p>改行や
空白は　　　　　　　　そのままブラウザで表示されます。</p>

<pre>改行や
空白は    そのままブラウザで表示されます。
</pre>

上記のように<p>タグと<pre>タグで改行や空白を入れて文を書いた場合、<p>タグでは改行や空白はなく、１文で表示されます。一方、<pre>タグでは改行や空白がそのまま表示された文になります。

<pre>タグの中で<p>タグなどを使って文章を表示させたい場合、特殊記号というものを使用します。

<pre>pタグを表示させるには、&lt; p &gt; &lt; /p &gt;このようにして表示させます。</pre>

上記では&lt;が<、&gt;が>を示しています。これが特殊記号というものです。


<address>タグ

<address>タグで囲まれた部分は連絡先、お問合せ先であるということを示します。<address>タグで囲まれた文字はイタリック体で表示されます。


<abbr>タグ

abbrはabbreviationの略で、略語・短縮という意味です。省略された文字であることを示します。title属性を加えることで、省略元を示すことができます。以下に使用例を記述します。

<p><abbr tilte="HyperText Markup Language">HTML</abbr>はマークアップ言語です。</p>


<wbr>タグ

<wbr>タグは<br>タグと似ており、改行可能であることを示しています。英語のみの文章であったり、ブラウザの横幅がいっぱいになった際に改行しても良い位置を<wbr>タグで示すことで、適当な位置での改行をすることができます。<br>タグと<wbr>タグの違いを簡単にまとめると

  • <br>タグ・・・改行位置を指定する。

  • <wbr>タグ・・・改行可能位置を指定する。

それぞれこのような意味があります。


<li>タグ

liはlist itemの略で、意味はそのままでリスト内のアイテムを示します。基本的には、親要素である<ul>タグや<ol>タグと一緒に使います。


<ul>タグ

ulはunorderd listの略で、順番に意味がないリストを作るときに使用します。

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Ruby</li>
  <li>jQuery</li>
</ul>

<ul>タグを使用した際は、先頭に黒丸がついてリスト化されます。


<ol>タグ

olはorderd listの略で、順番に意味があるリストを作るときに使用します。

<ol>
  <li>olタグとは</li>
  <li>olタグの使い方</li>
  <li>ulタグとolタグの違い</li>
  <li>まとめ</li>
</ol>

<ol>タグを使用した際は、「1.  2.  3.  」と数字がついてリスト化されます。


<dl>タグ

dlはdefinition listの略で、定義型リストという意味です。<dl>タグ内では<dt>タグでリストの項目を記述、<dd>タグでは<dt>タグで示した項目に対する説明文を記述します。

<dl>
  <dt>HTML</dt>
  <dd>マークアップ言語です。</dd>
 
  <dt>CSS</dt>
  <dd>スタイルシート言語です。</dd>
 
  <dt>Ruby</dt>
  <dd>オブジェクト指向スクリプト言語です。</dd>
</dl>

上記のように使用します。


<dt>タグ

dtはdefinition teamの略で、定義組という意味です。任意の言葉を定義語として示すことができます。


<dd>タグ

ddはdefinition descriptionの略で、定義の説明という意味です。<dt>タグで定義された言葉を説明する際に使用します。基本的に直前で定義された言葉の説明を示していることになります。


感想

今回はテキストを書いたり、リストを作ったりする際に必要なタグについて学ぶことができました。テキストを書く場合でも様々なタグの使い分けがあり、コーディングする時は気をつけなければと思いました。ブラウザ上では問題なく表示されていたとしても、検索エンジンでヒットしなければ意味がないので、そういった面でもタグの使い分けは重要だなと感じました。

いいなと思ったら応援しよう！