HTML・CSS独学応援 2-4 「HTMLの型」と「属性」

前回は、サンプルコードを見ながら
タグについて解説と、グループ分けをしました。

今回は、もう少し細かいところを
解説していきます。

今回紹介する「HTMLの型」は、HTMLを書く時に必ず使用することになります。
どこかにメモしておくことを、おすすめします。

最後に「やってみよう」っという部分で
エディターに「HTMLの型」を自分で打ち込む挑戦をしてみましょう。

1、HTMLの型

<!DOCTYPE html>
<html lang = "ja">
    <head>
        <meta charset = "UTF-8">
        <title>はじめてのHTML</title>
    </head>
    <body>
        <h1>はじめてのHTML</h1>
        <p>これがWEBページを作るための、HTMLです。</p>
    </body>
</html>

前回まで使用していたHTMLコードは、これです。

前回の解説で、<body>の中に書いたものが
表示される内容だよっていうお話をしました。

<body>以外の部分は、ほとんどそのままの形で
どんなwebページを作るときにも使用します。

「れおの部屋」では、「HTMLの型」として
コピーして使えるように紹介していきます。

サンプルコードから、
「HTMLの型」だけにしたものが以下のコードです。

<!DOCTYPE html>
    <html lang ="ja">
        <head>
             <meta charset = "UTF-8">
             <title> <!-- この横にタイトルを記入 -- > </title>
        </head>
        <body>
             <!-- ここの下に表示したいものを書く -->
       
        </body>
    </html>

この「HTMLの型」について詳しく見ていきましょう。

1-1、詳しく見てみよう

「HTMLの型」のコードについて①~④のポイントを解説していきます。

① <!DOCTYPE html>

これはパソコンに、今から「HTMLを使うからね!」って教えています。
「宣言」なんて呼ばれたりします。

これには、終了タグは必要ありません。

②<html lang = "ja">

<html>タグです。
「ここからがHTMLだよ。」っていう意味も持ちます。

下の方にある終了タグ、</html>までがHTMLになります。

<html>~</html>の間に書かれたものを、
パソコンはHTMLと認識します。

lang = "ja"

lang="ja"の部分は属性と値です
これについては、後半で解説しますが、「このHTMLは日本語を使うよ」って意味になっています。

③<meta charset = "UTF-8">

<meta>タグです。
主に情報を記入するものです。

charset="UTF-8"

この部分は属性と値です
これについては、後半で解説します。

これは、文字化けを防ぐ為に書いています。

解説が難しくなるので割愛しますが、これを書かないと
表示するときに、謎の文字で表示されてしまうことがあります。

<head>の中に必ず書くものとして
このまま覚えてください。

④<!-- -->

<!-- -->で囲まれた部分は、HTMLのコメントアウトです。

<!--  -->の間に書いたものは表示されない機能で、
コードの中にメモを残すような便利機能です。

<!DOCTYPE html>
    <html lang ="ja">
        <head>
             <meta charset = "UTF-8">
             <title> <!-- この横にタイトルを記入 -- > テスト記事 </title>
        </head>
        <body>
             <!-- ここの下に表示したいものを書く -->
       <p>こんな感じで、追加して書いてみてね。</p>
        </body>
    </html>

イメージしにくい場合は、タグで区切る(要素でまとめる)

2、属性と値

タグには、
追加で情報を書くことができます。

  • 追加情報を書くもの = 属性
  • 属性の中身 = 値

<タグ 属性=”値”>っという風に書きます。

「HTMLの型」では、
<html lang="ja">が、この形になっています。

langは、要素(タグ)の内容が、
どのような言語で記述されているかを表しす属性です。

値の”ja”は、japanの意味です。
つまり「このHTMLは日本語を使用しますよ。」ってパソコンに伝えています。

やってみよう

「HTMLの型」をエディターに自分で打ち込んでみよう。

  1. デスクトップに「test-1.html」を作る
  2. 「HTMLの型」を見ながらでいいので、打ち込んでみる。

ここまで書けたら、クリアです。
保存しておきましょう。

まとめ

今回は「HTMLの型」の紹介と「属性」についてお話しました。

「HTMLの型」は、そのままの形で実際に使っていくので
どこかにメモすることをおすすめします。

属性については、ひとまずは紹介しましたが
実際に使用してみるまでは、イメージしにくいと思います。

細かいことは、学習を進めるうちにわかるようになっていくので
安心して進んでください。

ひとまずは、「属性」と「値」という名前と、
<タグ 属性=”値”>この形を覚えておけばOKです。

参考書やネットの情報では、
「○○タグに、××属性を指定してください。」とか
「××に▵▵の値を渡す。」とか表現されることが多いです。

これを知っているだけで、情報の理解度が変わってきます。