HTML5の復習〜最初に書く”呪文”の記述の覚え方(ゴロ合わせつき)

HTML5の最初の呪文の覚え方 HTML・CSS

HTML5の最初に書く”呪文”のような記述についての記事です。普段はコピー&ペーストで済ませて内容や意味をきちんと覚えていないけど覚えたい人向けにまとめました。使えるかわかりませんが強引にゴロ合わせを考えてみました。

そもそもHTMLとは

HTMLHyper Text Markup Language)はWebサイトを作成するのに使われる言語です。

※Hyper Text:通常のテキストの機能を超えたテキスト(リンクで文書同士が繋がりページを移動できる)
※Markup:目印をつけること

ごん先生
ごん先生

HTMLは、1997年に「W3C(World Wide Web Consortium)」というインターネットにおける技術の標準化団体によって策定されたそうです。現在はHTML5が主流です(2021年8月現在)。

HTMLの役割は目印(マークアップ)をつけること

通常のテキストデータだと、コンピュータはどこが文章(見出し・段落など)でどこがリンクなのかなど、理解することができません。

HTMLの役割

そこで、コンピュータが意味を理解できるように各部分の意味を「タグ」で目印をつける(=マークアップする)のがHTMLの役割です。

マークアップは検索エンジンで最適な検索結果を表示するのに使われたり、目の不自由な方が使う音声読み上げソフトなどにも使われたりします。コンピュータだけでなく、人がテキストの内容・構成を理解するのにも役立ちます。

以下、HTML5の最初に書く呪文のような記述を復習します。

1行目:DOCTYPE宣言(文書型宣言)

HTML5で1行目に書くのはこの文書です。

<!DOCTYPE html>

これをDOCTYPEドックタイプ宣言と言います。半角の!の後に、半角大文字でDOCTYPE、(半角あけて)小文字でhtml。意味は「このテキストはHTMLのルールに従って書いています」と宣言している記述です。
ブラウザに正確にHTMLの仕様を理解させる目的で必要とされます。

文書(ドキュメント)だからドキュタイプだと思ってた。
正しい読み方はドックタイプだったとは…

ごん先生
ごん先生

どうせ変な語呂合わせを考えて覚えてたんでしょ。

文書型宣言の語呂合わせ
<!DOCTYPE html>の覚え方の例(ハトの語呂合わせを考えてみました)

2行目:<html>タグ・使う言語

2行目からはタグと呼ばれる目印をつけていきます。
基本的には開始タグ<〇〇>と終了タグ</〇〇>でセット

ですが、終了タグがいらないタグ(※)もあり。
要素(void要素)という。例:br(改行)、img(画像)、link(リンク)、meta(メタ)などの要素

<!DOCTYPE html>
<html lang="ja">
  (省略)
</html> ←最後の行に書く

最初に書くタグは<html>タグです。普通は同時に終了タグ</html>も書きます。

意味は「html 言語=”日本語”」。langはLanguage(言語)のこと。<html>〜</html>タグの間に様々なタグや内容を記述することでWebページが表示されます。

●日本語のWebページの時は<html lang=”ja”>
 htmlの開始タグの中に(半角あけて)lang=”jaと書きます。
●英語の時は<html lang=”en”>
 
HTML開始タグと言語設定の語呂合わせ
 <html lang=”ja”>の覚え方の例(ハトの語呂合わせ2)

3行目以降:head要素 <head>とは

<head>から</head>までをhead要素といいます。以下、簡単な記述例です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <meta name="description" content="サイトの説明">
 <title>サイトタイトル</title>
(リセットCSS、スマホ対応、OGPなど省略)
<link rel="stylesheet" href="ファイルの場所・ファイル名">
</head>
<body>
  (Webページの内容は省略)
</body>
</html> 

Webページの基本情報が記述されるのが<head>要素です。

meta要素 <meta>とは

<meta>は、meta要素。メタデータ=「情報に関する情報」を記述します。

情報に関する情報? ピンとこないな

ごん先生
ごん先生

それは「メタ言語」という言葉の意味を知っていると良いかも。メタ言語は↓

参考:【メタ言語】とは

われわれはしばしば(言語を使って)言語について語る。そのとき、そこで話題とされる言語を「対象言語」とよび、それについて語るために使われる言語を「メタ言語」とよぶ。たとえば、英語の文法について日本語で語る場合、英語が対象言語、日本語がメタ言語である。

コトバンク メタ言語 日本大百科全書(ニッポニカ)のメタ言語に関する記述 より引用

<meta charset=”UTF-8″>とは

<meta charset="UTF-8">

文字コードの指定です。ここではUTF-8の文字コードを使うという意味です。
※charset(読み:キャラセット。チャーセットでもOK)=character setの略で、文字コードのこと

Webページで扱われるテキストは、必ず何らかの文字コードで指定されています。文字コードは「文字符号化方式」といって、コンピュータが読み取る文字の種類や規格のような文字です。

「世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書」 技術評論社 p 42 より引用

現在では特別な理由がない限り、UTF−8(ユーティーエフエイト)という文字コードを指定します。

文字コードのゴロ覚え
<meta charset=”UTF-8″>の覚え方 ゴロ合わせ例(誰も参考にしないであろう)
ごん先生
ごん先生

ポケモンを知ってる世代しか使えない語呂合わせだね。ちなみにUTF−8は「様々な言語の文字を扱える文字コードとしては世界的に最も普及している」そうです。 IT用語辞典 e-wordsより

index.htmlなどの「保存したhtmlファイルの文字コード」とmeta要素で「指定した文字コード」が違う場合に文字化けが起こるので注意。

<meta name=”description” content=”~”>とは

<meta name="description" content="本好きなゴンのブログです">

意味は、要素の名前(name)=”説明” 内容=”このページにはこんな内容が書かれています”。Webページの説明を概要的にまとめた内容が入ります。

Googleの検索結果に利用されることもあり、その重要性や文字数の目安は常に変動しています。

世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書」 技術評論社 p 43 より引用

この記述の語呂合わせも考えました。

サイト概要説明の覚え方 ゴロ合わせ例(強引すぎる)

head要素には、場合によっては他にも
・マルチデバイス対応
・GoogleFonts
・jQuery、JavaScript
・SNS対応
・リセットCSS
などの情報を書きます。
今後別の記事に書く予定です。

link要素<link>とは

link要素は、記述するHTML文書と別の文書のリンク関係を指定します。
よく使うのは、デザインを指定する「スタイルシート」のリンクです。

link要素:記述するHTML文書と別の文書のリンク関係を指定する。

<link rel=”stylesheet” href=”~”>とは

例えば、以下のように使います。

<link rel="stylesheet" href="css/style.css">

HTMLにデザインの指定をするためのスタイルシートを外部ファイルで読み込む記述です。
上の<link rel=”stylesheet” href=”css/style.css”>意味は、<リンク 関係=”スタイルシート” このハイパーテキストを参照します=”css(というフォルダの中の)/style.css”>

これは語呂合わせが思いつかない。よく書く人は自然に覚えると思います。

rel属性とhref属性 →英語で覚える

rel属性(語源はrelation=関係
:リンク先の他の文書に対する関係を示すための属性。

href属性(語源はhypertext reference=ハイパーテキストの参照
:目当ての資源の所在を指し示すための属性。

ごん先生
ごん先生

英語は語源を調べて覚えると記憶に残るって、ドラゴン桜の桜木先生が言ってたよ。

style.cssがindex.htmlと同じ階層にある場合は、href=”style.css”の記述なります。

スタイルシートの詳細も今後別の記事に書きます。

まとめ

まとめ:HTMLの要素は、英語の語源を覚えると意味を覚えやすい。
しかし最初の呪文みたいな記述は、覚えなくてもWebデザイナーになれます。

少しでも誰かの記憶に残る記事になっていれば幸いです。

▼スマホ用にゴロ合わせの拡大バージョンです。

タイトルとURLをコピーしました