見出し画像

HTMLのキホンのキ

Juke-99

Frontend developer roadmap第1弾です。

roadmapの一番最初のHTMLの項目である、learn the basicsをやっていきます。ではHTMLの基本を学んでいきましょう。

HTML概要

HTMLは”Hypertext Markup Language”の頭文字をとった、 Webサイトの中身の構造を指定するために使うコードです。HTMLはプログラミング言語ではなく、マークアップ言語というWebサイトの中身の構造を指定するものです。

HTMLは要素の集まりでできています。要素はWebサイトにどう見えるか、どう動くかを表現するタグで囲まれたまとまりです。タグはWebサイトに文字や画像を表示したり、リンクを作ったり、文字の大きさや色や斜体にするなど色々なことが出来ます。例えば、

Hello, HTML!

上の文字がHTML上でどういう風になっているかというと、

<p>Hello, HTML!</p>

となっています。

HTML要素の説明

では先ほどのコード（noteで色でないじゃん！）の意味について、下の画像を見ながら詳しく見てみましょう。

画像1

開始タグ（opening tag）は、要素の名前（ここでの例だとp）を山括弧で囲ったものです。コンテンツがどこから始まっているのかを表しています。

終了タグ（closing tag）は、要素の名前にスラッシュが入っていること以外は開始タグと同じです。これはどこで要素が終わっているかを表しています。終了タグを書き忘れるとその要素が正しく表示されないので注意してください。

コンテンツ（content）その意味の通り、要素の内容です。

要素（element）開始タグ、コンテンツ、終了タグのまとまりのことです。

要素のネスト

要素の中に他の要素を入れることが出来ます。これはネスト（または入れ子）と呼ばれます。例えば、”HTMLは簡単！！”の「簡単」の部分を太字にしたいとき、「簡単」という単語を<b>要素に入れると太字で表すことが出来ます。

<p>HTMLは<b>簡単</b>！！</p>

ですが、ここで重要なのが、要素のネストは正しく行われないといけないということです。上のHTMLは始めに<p>要素で開始され、その次に<b>要素で開始しています。このとき、<b>要素、<p>要素の順で終了しないといけません。例えば、

<p>HTMLは<b>簡単！！</p></b>

これは間違っている書き方で、要素は他の要素の中か外で開始して、終了する必要があります。この書き方だと、ブラウザで表示されるかもしれませんが推測していたものとは異なる、予期せぬ結果になるかもしれません。

空要素

空要素と呼ばれるコンテンツを持たない要素もあります。空要素の一つに画像を表示してくれる<img>要素があります。

<img src="./note-icon.png" alt="This is icon of note">

この要素は終了タグがなく、内部にコンテンツもありません。

属性

先ほどのコードに<img>要素の中にsrcやaltの、文字があったと思います。これは属性と呼ばれます。

画像2

属性はコンテンツの中で表示させたくない要素の追加情報を保持します。上のコードで属性はsrcとaltです。

属性の必要条件は、
・属性名と要素名の間に半角スペース（その要素内ですでに属性が設定されているときは、各属性名の間に半角スペース）があること
・属性名と等号（=）をつけること
・属性の値。初めと終わりにクォーテーションマークで囲むこと

真偽値属性

属性には属性値のない属性があります。このような属性のことを真偽値属性と言います。真偽値属性は属性名と同じ属性値を取ることができます。例えば、input要素のdisabled 属性は真偽値属性です。input要素が使用不可能であることを知らせています。この値のおかげで、データを入力することができなくなります。

<input type="text" disabled="disabled">

真偽値属性には、略記法があり、次のように書くことができます。

<input type="text" disabled>

真偽値属性を付けたinput属性と付けてないコードの結果はこのリンクで見てください。

ブロック要素とインライン要素

HTMLの要素には2つの重要なカテゴリがあります。それはブロックレベル要素とインライン要素です。

ブロックレベル要素はwebページ上で確認できるブロックと呼ばれるものを作ります。ブロックの後には新たらしい行で表示されます。ブロックレベル要素はそのウェブページの構造を表します。例えば、リスト、ヘッダー、フッターなどに使用される傾向があります。ブロックレベル要素はインライン要素の中でネストすることはできないのですが、他のブロックレベル要素にネストすることができます。

インライン要素はブロックレベル要素の中で作成し、新しい行に改行せず、文章の内容の小さな部分だけを囲む要素です。例えば、<a>要素、<b>や <em>などのインライン要素はテキスト段落の中で表示されます。例えば、

<b>one</b> <b>two</b> <b>three</b>
<p>four</p><p>five</p><p>six</p>

結果はこちら。<b>要素はインライン要素なので、結果で確認できるように、最初の 3 つの要素は同じ行で表示されています。一方で、<p>要素はブロックレベル要素なので、各要素は新しい行に改行されて表示されています。

HTMLの基本構成

ここまで、各々の HTMLの要素について説明しました。ここではHTML ページを構成する方法を説明していきます。

<!DOCTYPE html>

<html>
  <head>
   <meta charset="utf-8">
   <title>My page</title>
  </head>

  <body>
    <p>Hello, HTML!</p>
  </body>
</html>

この HTML文書の説明を順を追って説明していきたいと思います。

<!DOCTYPE html>は"doctype"というものです。これは要素ではありません。コンテンツや閉じタグを持ちません。これは（レンダリングの際の）ブラウザにHTML文章であることを伝える役割をしています。これが文章の一番上にこの文字を書く最大の理由です。もう一つの役割として、使用するHTMLのバージョン宣言をしています。いま（2019年、2020年）のHTMLのバージョンは5あたりですが、HTML5以前の"doctype"は、次のようなものでした。

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

現在の最新バージョンのHTML5では<!DOCTYPE html>が正しい"doctype"の記述です。

<html>要素は最も外側に位置するタグです。この要素はページ全体であり、<html>タグはページ全体を囲んでいます。

<head>要素はbodyタグの上に書きます。この中にはブラウザやサーチエンジンに渡したい情報を書きます。

<meta>要素はブラウザもしくはサーチエンジンが必要な情報を保存します。ページの説明やキーワードなどはmetaタグで定義します。サーチエンジンはこれらのタグを読み取ります。charset="utf-8"という属性は、この文書がUTF-8という文字コードを使用しているということをブラウザに伝えいます。UTF-8は世界中の自然言語の大半をカバーしている文字コードです。日本語を使用している場合はこの文字コードを指定することをおすすめします。

<title>要素はページのタイトルを指定するものです。このタグはサーチエンジン最適化（SEO）でとても重要になってきます。このタグはheadタグの中で書かれます。それはブラウザのタイトルバーに表示されます。

<body>要素の中にユーザーがページ来た時に表示したいコンテンツを記述します。このタグ内で、pタグやdivタグなどを使用してコンテンツを作成していきます。

コメント

そういえば、忘れていましたが、大抵のプログラミング言語と同じように、HTMLでもコード内にコメントを書くことができます。コメントはブラウザに無視されるので、実際の文章には反映されません。コメントの目的としては、 HTMLのコードがどのように動作するのかなど他の人がコードを読んだ際に残しておくメッセージとして使用されます。人は忘れやすい生き物です。HTMLのコードを書いて3か月放置してから自分で見返すと自分が何をしたのかを思い出すことができない時が今後あると思います。そういったときにコメントはとてもその効果を発揮します。先ほども書いたように、自分のコードを他の人に読んでもらう時にも有効です。

HTMLファイル内の一部をコメントにするには、その箇所を<!--と-->で囲います。次のような感じです。

<p>コメントの外。</p>
<!-- <p>コメント！！！</p> -->

結果はこちらです。

最後に

この記事を見て、わからなかったことなどあればnoteのコメント欄にお願いします。その質問から新たな記事が生まれるかもしれません。

参考文献

ブロックレベル要素とインライン要素一覧参考：
https://www.w3schools.com/html/html_blocks.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements -- ブロックレベル要素のみ
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements -- インライン要素のみ

HTML5のすべて：
https://dev.w3.org/html5/html-author/ -- 読む人がいるのかわからないけど、読んでおくと吉

この記事が気に入ったらサポートをしてみませんか？