HTML・CSS独学応援　2-5　「見出し」

「見出し」について解説します。
webページ作るときには、ほぼ確実に使用します。

「見出し」について

本や新聞には、その文章が
どんな内容なのか分かるように「見出し」が付いています。

これをHTMLでは<h1>～<h6>というタグを使って書きます。

大きい見出しは<h1>で、
その次に大きい見出しは<h2>
その次が<h3>・・・・

こんな感じに<h1>~<h6>まで、大きさがあります。

<h1>～<h6>の大事な約束

大きい見出しの中に、小さい見出しを入れるのはOKでけど。
小さい見出しの中に大きい見出しを入れるのはNGです。

<h1>の中に<h2>や<h3>があるのはOKですが。
<h3>の中に<h1>や<h2>は入れられません。

表示される文字の大きさなどが変わりますが、
デザインを変えるのは、CSSで行うのが基本です。

デザインを変えるために「見出し」を使ってはいけません。
「見出し」としての役割を大切にしましょう。

やってみよう

こんな感じにHTMLで、実際に表示してみよう。

  1. HTMLの型を用意する（前回使用した「test-1.html」を使用してもOK）
  2. <body>の中に、<h1>～<h6>を書く

サンプルコードはこんな感じになります。

<!DOCTYPE html>
    <html lang ="ja">
        <head>
             <meta charset = "UTF-8">
             <title> <!--ここにタイトル-->　</title>
        </head>
        <body>
            <!-- ここの下に表示したいものを書く -->
            <h1>これが見出しｈ1です</h1>
            <h2>これが見出しｈ2です</h2>
            <h3>これが見出しｈ3です</h3>
            <h4>これが見出しｈ4です</h4>
            <h5>これが見出しｈ5です</h5>
            <h6>これが見出しｈ6です</h6>
            
        </body>
    </html>

© 2021 ーれおの部屋ー