暑かったり寒かったり、着る服が非常に困る11月でしたが、
いよいよ本格的に寒くなってきましたね。
ちなみに僕は人との会話に困ると天気や気温の話をしたりします。
コミュニケーションって難しいですね。
さて前回、時は令和2年。今や当たり前の存在になっている「HTML」をその名前の意味から改めて紐解こう。という記事でHTMLを名前の意味から解説しました。
そして今回は記述ルールや構造をお伝えしていこうと思います。
前回同様、当記事は初学者の方やwebに興味を持っている学生に理解が深まれば、という考えのもと記しております。当記事の内容を既に知っているという方は、
よろしければ弊社のコラム一覧をご覧頂ければと思います！
HTMLの記述ルールや構造
さて、前回一通り名前の意味を説明したところで、HTMLがどういうルールや構造で成り立っているのかを解説していきたいと思います。
■記述ルール(HTML5)
おさらいになりますが、HTMLは「タグ」と呼ばれる記述を使用して構築を行なっていきます。
例えば、何か文章を記したい場合、Paragraph(段落)の頭文字を意味するpタグを使用します。
HTMLも歴史が長いので、都度バージョンが更新されているのですが、今はHTML5が最新です。
(正確には5.1,5.2,5.3などマイナーバージョンが展開されていますが、最新版に近い程仕様が固まってなかったりブラウザによっては記述が対応したりしていなかったりするのでここでは便宜上5とだけ表記しておきます)
webサイトにテキストを起こす場合は、HTMLファイルに
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
<p>この文章は<p>タグを使用して記述されています。</p>
</body>
</html>と記載します。
え、<p>って何？<p>じゃないの？って思ったでしょう。
これは特殊文字といって、普通に書いてしまうとブラウザ側がHTML用の記述だと認識してテキストとして表示させてもらえない記号などを、
きちんとテキストとして表示するための書き方になります。
たとえば< や >はタグを書くときに使用しますよね。そのまま書いてしまうとブラウザはこれはタグなんだ！と思ってしまいます。
なので、<なら<、>なら>といったように記載します。
&も特殊文字なのでこれを記載したい場合は&といった書き方になりますね。
そしてこのHTMLファイルをブラウザで表示すると、
のように表示されます。
(ブラウザはGoogle Chromeを使用)
鋭い方はもうお気付きかもしれませんが、上記の記述、pタグ意外に様々な記述がなされています。
一つ一つ解説してきましょう。
・<!DOCTYPE html>
必須記述です。HTMLの記述を行いますよという宣言の記述になります。
・<html>
必須記述です。上記の宣言の後、<html>タグを設置し、その中に詳細を記述していきます。
・<head>
必須記述です。
"そのHTMLがどういうページなのか"を記述していきます。
基本的には画面上に表示されない情報を記載します。
(ページ名を表す<title>タグなどは表示されますが)
・<meta>
headタグ内に実際に情報を記す際に使用するタグです。
上記例に
<meta charset="utf-8">という記述が入っていますが、
これはこのHTMLが実際に画面に表示される際のテキストの文字コードが「utf-8」に設定しますよ、というものです。
コンピュータは基本的に0と1という数字でしか情報を認識できないので、日本語や英語など、言語を処理する際はコンピュータ上の決まり事というものがいくつかあります。
その中の一つのルールが「utf-8」です。HTMLの直接的なルールなどには関わらないので、今回は割愛します。
他の例として、google等で検索を行った時に表示されるサイトに、サイトのタイトルの下に説明分が記載されていますが、その説明分のことを「description」と呼びます。
書き方としてはheadタグ内に
<meta name="description" content="ここにサイトの説明分が入ります。" />と記述する事で表示され、
また、情報の記し方としてcharset=やname=といった記述がありますが、これは属性といい、charset属性、name属性という呼び方をします。
この中に値を入れることによってタグ自体に設定や役割を持たせられるんですね。
つまり、<head>タグ内はそれがどういうタイトルでどういうサイトなのか、どんな説明を入れるのかというものを記す為のタグとなります。
・<body>
必須記述です。言わずもがな、画面表示を行う為のタグです。
前述の<p>タグを表示するには<body>タグ内に記述しなければなりません。
この<body>タグこそが、皆さんが普段ブラウザ上から目で確認しているwebサイトの表示部分になるのです。
HTMLの記述の仕方を少しでも触れたことがある方は見覚えがあるかと思いますが、
<p> class="exsample"</p">のような記述がありますよね。
これはclass属性と呼ばれ、簡単にいうとタグに名前を付けています。
HTMLは文書の構造を記すものですが、それだけではただのテキストや画像が縦に並んだだけの非常に見づらく見栄えもよくないページになってしまいます。
そのwebページに色をつけたりテキストのサイズを変えたりなど、彩りを与えるのが、CSSです。
HTMLのタグにclass属性で名前をつけていると、CSSで色をつけたりする際に非常に便利になります。
詳しくは次回以降にCSSの説明の記事を上げて行こうと思いますので、そこで説明します。
以上が、HTMLの基本的な記述ルールや構造になります。
まとめ
・HTML(ハイパーテキストマークアップランゲージ)はWEB上で相互的に紐づいているページ(ハイパーテキスト)を表示するコンピュータに文書構造を伝えるため、文章にタグ(しるし)をつける(マークアップ)ための言語
・HTMLのタグの付け方はしるしをつけたい対象のテキストなどを囲まなければならない
・HTMLで書き起こした文書はブラウザで表示される
・headタグはそのページの情報(タイトルや説明文など)を、bodyタグには実際に表示される要素を記述していく
・ただHTMLを記述するだけでは見た目は何も変わらないので、CSSを使用して色などの見た目を整えていく。
次回からは実践として、CSSの説明も含めながら実際にHTMLを組んでいく過程などを紹介していきたいと思います。
