三日坊主の「プログラミング」奮闘記 #6

第6回目:HTMLの基本構造

前回勉強したHTMLの「要素」には全部で108種類あります。多いようで少ないようでって感じですね。

そして、どんなHTMLを書く上でも必須の要素があります。それが以下になります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5</title>
    </head>
    <body>
        文章の内容
    </body>
</html>

上に記述したコードがほぼ全てのHTMLにおいて記述する要素です。ここでは全部で1種類の必ず書くコード(お決まり)と5種類の要素があります。

1行目:DOCTYPE (お決まり文句)

<!DOCTYPE html>

これは文書がHTML言語によって作成されているよ、と宣言しているものです。なので要素ではありませんが、必ず書くので暗記です。ちなみに余談ですが、HTML言語は日々進化しており、現在の最新バージョンはHTML5です。なので、4も3も2も1もあります。基本的には最新バージョンを使うのが良いので、上のように<!DOCTYPE html>と記述することで最新のバージョンを使用しています、と表現されます。昔のバージョンを使っていたらここで昔のを使ってるよ、と宣言しなければなりません。

2と10行目:html

<html lang="ja">


</html>

これは、全てのはじまりを意味します(かっこいいですね)。つまり、HTMLの記述は全てこの<html> </html>の中に記述しなければならないということです。最上位に位置するものです。そしてその中に lang="ja" とありますが、これはlanguage = "Japanese" ということなので、このhtmlは日本語で記述されていますよ、と表現しています。

3と6行目:head

<head>

</head>

これはヘッダと呼ばれるHTML文書自体の情報を記述するスペースです。わかりやすくいうと、このHTML全てに共通する情報をこのヘッダの中に書きます。あとで詳しく説明しますが、例えば、文字の書式であったり、タブに表示される文字であったり↓を記しています。下の画像だと、「新規ノート作成|note」になっていますね。

4行目:meta

<meta charset="UTF-8">

ここでは文章に関するデータを記すコードが書かれています。metaというのは、文章に関する情報を意味しているようですが、実際の意味はすごく複雑なようです。ここではHTML作成に必要な決まり文句として<!DOCTYPE html>と同じように暗記しましょう。

5行目:title

<title>HTML5</title>

このコードは上の<head>の時にも説明した、タブの表示名(ブラウザーのタイトルバー)を表しています。なので、ここではHTML5となっているので、以下のように表示されます。

これも必須の要素になります。

7と9行目:body

<body>
    文章の内容
</body>

最後は文章の内容を記述する領域であるbody要素です。この中には見出し・段落・ハイパーリンク・箇条書きなど文章の内容が全て入ってきます。つまりHTMLの勉強はほぼほぼこのbodyの中のことになります。上記のコードの場合だと、見出しだとか段落だとかを指定していないので、シンプルに左詰で文字が表示されます。

HTMLの基本構造をまとめると以下のようになります。

DOCTYPE宣言
HTMLのバージョン情報を宣言する。

html要素
HTML文書のルートを表す。全ての要素はhtml要素の中に記述する。

head要素
HTML文書自体の情報(ヘッダ)を表す。html要素の最初の要素として記述する。

meta要素
文章に関する情報(メタデータ)を表す。

title要素
HTML文書の表題を表す。ブラウザのタイトルバーに要素の内容が表示される。

body要素
文章の内容を記述する領域を表す。

以上、このペースで頑張っていきます!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

5

レイアレン

三日坊主の「プログラミング」奮闘記

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。