2020年10月22日

コーディング勉強 初心者むけ【HTML-head要素編-】

前回はコーディングのお話に入る前にwebサイトの仕組みについて記事を書きました。今回はHTMLの構成についてのお話です。

初めてHTMLを見たときは見られない文字が羅列してあるように見え、勉強するのが億劫だったのですが、構成を理解していくと全くもって怖くなくなりました!

ぜひ本記事でHTMLの構成について学んでください!

そもそもHTMLってなに?

「HTML」とはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

分解して意味を読み解くと

「ハイパーテキスト」=複数の文書を関連付けるしくみ

「マークアップ」=文章の各要素に目印をつける

「ランゲージ」=言語

つまり、見出しや段落などの要素を「HTMLタグ」で目印をつけてコンピューターが文章構造を理解できるようにしていきます。

HTMLの構造

◎基本的なHTMLのタグ構成

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”UTF-8”>

<title>タイトル</title>

</head>

<body>

</body>

</html>

html要素

HTML要素は大きく分けて「head要素」と「body要素」の2つに分かれます。その2つをひとつにまとめているのが「html要素」です。そして、head要素とbody要素にはそれぞれ役割があります。

head要素

おもにコンピューターが参照する情報を記載します。ユーザーの目に触れることはあまりないのですが、ブラウザや検索エンジンにとっては超重要な情報です。

body要素

Webブラウザに表示させる内容を記載します。私たちユーザーがWebブラウザで見ているサイトコンテンツはすべてbody要素に記述します。

head要素

meta要素

meta要素はどのようなページなのかWebページの情報を伝えるための要素です。たとえば、どのようなページなのかを説明するキーワードや文を記述します

属性によってさまざまな役割をもたせることができます。たとえば多くのWebページで使われている文字コード「UTF-8」を指定する場合は「charset属性」を使用します。

<meta charset=”UTF-8”>

【終了タグ】なし

title要素

文書のタイトルを指定するための要素です。ブラウザのタイトルバーに表示されます。また、検索エンジンにとっては、そのページの内容がどのようなものを理解するためにとても重要な情報となります。

<title>SeekNextのホームページ</title>

【終了タグ】必須

link要素

外部ファイルを読み込ませるための要素です。おもに外部のCSSファイルを読み込ませるため使用することが多いです。記述するHTML文章と同じディレクトリにあるCSSファイルを読み込ませる場合は以下のようになります。

<link rel=”stylesheet”  href=”(ファイル名).css”>

【終了タグ】なし

style要素

CSSを記載する要素です。CSSは外部ファイルを読み込む以外に、head要素にも記述することができます。<style>〜〜</style>のあいだにCSSを記述します。

<style>

body {

  color: red;

}

</style>

【終了タグ】必須

まとめ

タグでコンテンツをグループ化をしっかりすることはSEO対策にもなるので、価値のあるサイト作りにはかかせません。

慣れた方には簡単なHTMLですが、勉強すればすれほどコーディングって奥が深いな〜と思う日々です。。。

ということで今回はhead要素の内容まで!次回はbody要素にについて詳しく書いていきます。