・初めに
この記事は以下の方を対象としています。また、記事修正のコメントやLGTMなどモチベーションにつながるのでよろしくお願いします‼
- 初学者の方
- フロントエンドエンジニア志望の方
- 基本的なことを復習したい方
・導入
閲覧ありがとうございます。この記事は、初学者がフロントエンド目指してロードマップ（下図）に沿ってアウトプットしていく記事になります。
こちらの記事はPart3です。最初からご覧になりたいかたは、記事一覧よりどうぞ。
・記事一覧
part1: Internet【HTTP,Browsers】
part2: Internet【DNS,Domain,Hosting】
・随時更新予定
・Part3 HTML
私は独学で数か月勉強しているのですが、今振り返ってみるとHTMLについては、本数冊に目を通しプロゲートをやっただけという、付け焼き刃感が否めないことが発覚したので、復習を兼ねてしっかりとアウトプットしていきます。そう意味でタイトルも自分に向けて付けました。(viewを増やしたいとか思っていない())
Learn the Basics(HTMLの基礎を学ぶ)
HTMLとは
HTML(Hypertext Markup Language/ハイパーテキスト・マークアップ・ランゲージ)は、Webサイトのコンテンツに構造を指定するためのコードです。HTMLはプログラミング言語と勘違いされることが多いですが、HTMLはプログラミング言語でなく、マークアップ言語といってコンテンツの構造を決めるものというのを覚えておきましょう。
マークアップ言語とは
マークアップ言語といわれても、なんのことやらという感じだと思うので具体例で説明していきたいと思います。
まず基本的に、文章(サイト)はタイトルや見出し、段落や画像などの要素から成立しています。人は文章を読むと「タイトルだな」「ここは段落」「これは画像」など構造を理解できますが、これは人が経験で得た感覚であって、コンピューターにはその判断は不可能です。そこで、文章に「タイトル」「段落」「画像」などの目印をタグによってつけることで、コンピューターにも要素の判別ができるようにしました。これがマークアップといいます。
そのため、マークアップするのための言語をマークアップ言語と呼びます。
以上をまとめると、HTMLはハイパーテキストをマークアップ言語という意味がわかるかと思います。
ハイパーテキストについてはpart1 HTTP,Browserの際に説明しましたが、ここでもしておくと、複数の文書を相互に関連付け結び付ける仕組みのことです。詳しくはPart1までどうぞ。
タグとは
タグとは、上記の説明通りマークアップするための目印です。次の文を見てください。
<p>My name is Ichiro</p>
このように<p>と</p>で囲うことで、この要素は段落であることを指定しています。この時、<p>タグのほうを開始タグ、</p>タグのほうを終了タグといいます。終了タグのほうは、</p>と、"/"が入ることに注意しましょう。さらに、My name is Ichiroの部分をコンテンツいい、全体を要素といいます。
属性
要素は、属性(Attribute)を持つことが出来ます。属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは class が属性の名前で mlb-player が属性の値です。属性にも種類がありますが、今回はclass 属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。
<p class="baseball-playr">My name is Ichiro</p>
要素の入れ子(ネスト)
要素の中に他の要素を入れることも出来ます。これを入れ子(ネスト)と言います。下記の場合はIchiroがstrongタグによって強調されています。
<p class="baseball-playr">My name is <strong> Ichiro </strong></p>
結果としては、My name is Ichiro となっています。
空要素
コンテンツを持たない要素を空要素 (empty elements) と呼びます。 <img> 要素を例に見ていきます。
<img src="images/Ichiro.png" alt="Ichiro image">
この要素は2つの属性を持っていますが終了タグ</img>はありませんし、内部にコンテンツもありません。これは、image要素の目的は画像をHTMLページの表示させることなので、コンテンツが必要ないためです。
HTMLの構造
HTMLの要素は、1つあるところでサイトのようなページにはなりません。そこで、HTMLの一般的な構造をみていきましょう。
・【注意】多くのタグが出てきますが、こんなのがあるんだくらいの感覚で読むことをおすすめします（多すぎて吐きます。実際私もうろ覚えなものばかりです…。）ただ、基本的にどのような意味を持つのかは覚えておくといいと思います。また、説明の多くはこちらの引用になります。興味がある方は見てみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
上記のコードを詳しく見ていくとともに、HTMLの基本タグについてしっかり学んでいきましょう。
<!DOCTYPE html>
文書型宣言です。HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット (自動エラーチェックなどの便利なもの) に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。
メタデータ系+スクリプト
<html>~</html>
<html> 要素です。この要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。ただし、<html>～</html>の子要素として <head>と<body>がそれぞれ一つづつ必要となります。さらに、html要素には、lang属性で言語を指定することができます。 例えば、日本語の場合はlang="ja"、英語の場合にはlang="en"を指定します。
<head>~</head>
<head> 要素です。この要素は「そのHTML文書に関するメタデータを集めたもの」を指します。メタデータとは、その文書に関する情報のことで、 例えば <title> や<base> , <link> , <style> , <meta> などが挙げられます。 これらのメタデータを表すタグは、すべて<head>～</head>の中に配置します。
<meta charset="utf-8">
このタグは<head>タグ内に記述します。終了タグが存在しません(入れるとエラーとなります)。HTML文書のメタデータは<head>～</head>の中に、<title>, <base>, <link>, <style>, <script>などのタグで指定しますが、 これらのタグで表現できないその他の様々なメタデータは<meta>で表します。<meta charset="utf-8">の意味としては文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には人類が使う言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。
<title>~</title>
<title> 要素です。 ほとんどの場合、title要素はhead要素の子要素として必須ですが、 より高いレベルのプロトコルでタイトル情報が提供される場合には、title要素を省略することができます。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク（お気に入り）に登録した時の名前にもなります。
<link>
<link>タグは、リンクする外部リソースを指定する際に使用します。 外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。<link>タグは、<head>～</head>の中に記述します。<link>タグを指定する場合には、href属性とrel属性が必須です。 href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。 href属性には、リンクする外部ファイルのURLを指定し、rel属性にはリンクタイプを指定します。 具体的には、現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定します。
<link>タグは一つの文書内に複数記述することができます。 例えば、rel="stylesheet"を指定された複数の<link>タグで、複数の外部CSSファイルを指定することも可能です。 この場合、リンクしている複数の外部CSSファイルのスタイル指定がすべて有効となります。 スタイル指定が競合した場合には、より後から読み込まれたCSSファイルのスタイル指定が優先されます。
<style>~</style>
<style>タグは、スタイルシートを記述する際に使用します。 通常は<head>～</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。
<script></script>
<script>タグは、文書にJavaScriptなどのスクリプトや、データブロックを組み込む際に使用します。仮にHTML文書でJavaScriptなどのスクリプトを利用する際には、 HTML文書の<script>～</script>の中にスクリプトを記述するか、src属性で外部スクリプトファイルのURIを指定します。 src属性でJavaScriptの外部jsファイルを読み込む場合には、例えば以下のように記述します。
<script src="sample.js"></script>
scriptタグにもいくつかの要素が指定できます。（詳細は割愛）使う際はググってみてください。
セクション
セクションタグを使用する意図として、文書内のより大規模な構造を明確にするというのが挙げられます。以前の版の HTML には、関連するコンテンツをグループ化するための一般的なメカニズムとして<div> 要素だけがあり、意味づけが限られていましたが、これらの要素は、これを強化するためのものです。これらの意味づけ要素を意図した目的に沿って使用することが重要です。要するに、使うべきところで使うタグができたということです。しっかりと従っていきましょう。
<body>~</body>
<body>タグは、文書の本体を表す際に使用します。 文書の本体とはブラウザ上に表示されるメインコンテンツのことです。
HTML文書では、<body>要素は<html>～</html>の中に一つだけ配置します。 <body>～</body>の中には見出し・段落・表・フォームなどの要素を配置します。
<section>(<section></section>)
<section>タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。
セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。 見出しを付けることができない場合には、その部分を<section>～</section>で囲むのは適切ではないかもしれません。 もし、<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみると、 セクションとしてふさわしいかどうか判断しやすくなるでしょう。
<article>
<article>タグは、内容が単体で完結するセクションであることを示す際に使用します。 例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。
<nav>
<nav>は、ナビゲーションであることを示す際に使用します。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。他のページにリンクした箇所のすべてを ～ で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。
<aside>
<aside>タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。ここで言う余談・補足情報とは、本文と関連してはいるけれど区別して掲載するべき内容のことです。 例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。
<main>
<main>タグはメインコンテンツであることを示します。
<header>
<header>タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。 文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。<header>の中には、通常は<h1>・<h2>・<h3>・<h4>・<h5>・<h6>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。 他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。
<footer>
<footer>タグは、直近のセクションのフッタであることを示す際に使用します。フッタとは、そのセクションに関する情報のことで、一般的には、誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれます。
<h1>・<h2>・<h3>・<h4>・<h5>・<h6>
<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。 同じ数値のものが複数ある場合には同じランクとなります。
また、出しを配置すると暗黙的に新しいセクションを開始したことになります。 セクショニング・コンテンツの要素（ <article>・ <aside>・ <nav>・ <section> ）の中にある、 最初のヘッディング・コンテンツの要素（ <h1>・ <h2>・ <h3>・ <h4>・ <h5>・ <h6> ）は、そのセクションの見出しを表します。 そのあとに低いランクの見出しが続く場合には、暗黙的にそのセクションの一部となるサブセクションを開始したものとみなされます。 また、同じランクの見出しや高いランクの見出しが続く場合には、暗黙的に別の新しいセクションを開始したものとみなされます。
セクションが何たらというのは、要するに段落を勝手に変えるパターンがあるということです。
テキスト・コンテンツ
<div>
<div>タグは、ひとかたまりの範囲として定義する際に使用します。 <div>には特別な意味はありませんが、 <div>～</div>で囲まれた範囲を一つのグループとしてまとめることができます。 ページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグです。
<div>は大変便利なタグで、実際のコードでもよく使いがちですが、他に適切な要素が無い場合の最終手段として使用することが強く推奨されています。 より適切な要素があるにも関わらず<div>を使用していると、 ウェブページのアクセシビリティやメンテナンス性が低下してしまうからです。
<p>
<p>タグは、ひとつの段落（パラグラフ）であることを表す際に使用します。<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。
<hr>
<hr>タグは、段落レベルのテーマの区切り、セクション内における話題の区切りを表す際に使用します。例えば、物語におけるシーンの変わり目や、参考書のセクション内で別の話題に移る箇所などです。
また一般的なブラウザでは、hr要素を使用した場合には水平線が描画されます。
<ul>
<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。 順序のあるリストを作成する際には<ol>タグを使用してください。
<ol>
<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<li>
<li>タグはlist itemの略で、リストの項目を記述する際に使用します。li要素は、 ol要素・ ul要素・ menu要素 のいずれかの子要素として使用した場合には、その親要素のリスト項目となってお互いに関連しますが、 それ以外に配置された場合には他のli要素とは無関係となります。
インライン
<a>
<a>タグは、ハイパーリンクを指定する際に使用します。 ウェブページ内のテキストや画像などを<a>～</a>で囲んで必要な属性値を指定してやることで、 ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。<a>は、anchor（アンカー）の略です。 anchorを日本語にすると“船の錨・つなぎ止めて固定する”といった意味になります。 <a>は、指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。
また属性がいくつかあります。重要なところでいうとhref属性で、href属性はハイパーリンク先のURLを指定する際に使用します。
<br>
<br>タグは、改行する際に使用します。<br>は、例えば詩や住所などのように、改行が実際にコンテンツの一部を成すような場合にのみ使用します。 文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。
<span>
<span>タグは、ひとつの範囲として定義する際に使用します。<span>はそれ自身では何も意味を持っていませんが、style属性・class属性・lang属性・dir属性などの属性と一緒に使用する場合に便利な要素です。 これらの属性と組み合わせることで、<span>～<span>で囲まれた範囲に スタイルシートやスクリプトを適用したり、その範囲の言語や表記方向を指定することができます。
メディア・コンテンツの埋め込み
<img>
<img>タグは、画像を表示する際に使用します。 必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
また、alt (alternative; 代替) 属性も指定しています。これは以下の様な理由で画像を見られない人に向けて文字で説明をするものです。alt 属性の内容は「説明する文」であるということが重要です。代替文は画像が伝えたいことをうまく言い表しているべきです。
<video>
<video>タグは、動画を再生する際に使用します。<video>タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになります。 感覚的には<img>タグで画像を扱うような感じです。
例のごとく<video>にも多くの属性を指定できますが、ここでは割愛します。
<source>
<source>タグは、動画や音声などのメディアファイルのURLや種類を指定する際に、<video>～</video>などのメディア要素の中で子要素として使用します。 <source>は、それ自身では何も表しません。メディアファイルのURLは、必須属性のsrc属性で指定します。 <source>を複数記述して、フォーマットの異なる複数のメディアファイルを指定しておくと、ブラウザに再生候補を提示することができます。 ブラウザは、記述された順に再生可能なデータを利用するので、より多くの環境で視聴してもらえる可能性が高くなります。
テーブル
<table>
<table>タグは、テーブル（表）を作成する際に使用します。テーブルの基本的な構造は、<table>～</table>の中に <tr>～</tr>で表の横一行を定義して、 さらにその中に<th>～</th>や<td>～</td>でセルを定義します。 テーブルは行（横行）とカラム（縦列）を持ちますが、空の行やカラムを持つことはできません。
ここで、テーブル要素をつくるためのタグはいくつかありますのでざっくり紹介します。個人的には、テーブル要素を使用することがあまりないので、使用するときに調べて使えばいいかなと思います。
・<thead> …… テーブル（表）のヘッダ行を定義する。
・<tbody> …… テーブル（表）のボディ部分を定義する。
・<tfoot> …… テーブル（表）のフッタ部分を定義する。
・<col> …… 表の縦列に属性やスタイルを指定する。
・<tr> …… テーブル（表）の横一行を定義する。
・<td> …… テーブル（表）のデータセルを作成する。
・<th> …… テーブル（表）の見出しセルを作成する。
フォーム
<form>
<form>タグは、入力・送信フォームを作る際に使用します。<form>～</form>の間に、 <input>・ <select>・ <textarea>等のタグで、 一行テキストボックス・サブミットボタン・ラジオボタン・チェックボックス・セレクトボックス・テキストボックス等のフォーム部品を配置します。
フォームに入力されたデータは、送信ボタンを押すことでウェブサーバーへ送信されます。 その際の送信先URLはaction属性で、データの送信方法はmethod属性で、送信するデータの形式はenctype属性でそれぞれ指定します。 ウェブサーバーへ送信されたデータのプログラム処理は、 HTMLやCSSではなくPHPやCGIなどのサーバーサイド・スクリプトで行います。
<form>には多くの属性がありますが、多いすぎるのでここでは割愛させていただきます。
<input>
タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。多くの種類があるので、使用する際に適しているものを選べばいいかと思います。
<button>
<button>タグは、ボタンを作成する際に使用します。
例のごとく多くの属性を付与できますが、頻出なものでいうとtype属性があります。type属性はボタンの種類を指定する際に使用します。 type属性の値には、以下の３種類のいずれかを指定することができます。 初期値はtype="submit"です。
・type="submit" …… フォーム入力内容を送信するサブミットボタン（初期値）
・type="reset" …… フォーム入力内容をリセットするリセットボタン
・type="button" …… 何もしない汎用的な押しボタン
<select>
<select>タグは、セレクトボックスを作成する際に使用します。 一般的なブラウザでは、ドロップダウン式のセレクトボックスや、スクロール式のセレクトウィンドウとして表示されます。<select>～</select>でセレクトボックス全体を定義して、 その中に<option>タグを配置して個々の選択肢リストを作成します。 <option>タグで作成した選択肢を<optgroup>～</optgroup>で囲むと、選択肢をグループ化することができます。
<textarea>
<textarea>タグは、複数行のテキスト入力欄を作成する際に使用します。cols属性は、一行当たりの最大文字数の目安を指定する際に使用します。 cols属性の値として指定できるのは、1以上の正の整数で、何も指定しない場合の初期値は20です。
これまた、いくつかの属性を用いてさまざまなオプションを付与することができます。
お疲れさまでした。まとめです。
ここまで、多くのタグを見てきて吐きそうになっている方が多いと思いますが、私もそうです。しかし、ポジティブに考えればこれしかないとも捉えられるので、楽観的に行きましょう‼
繰り返しにはなりますが、すべて覚えるというわけでなく使ううちに覚えるので、こんな意味なんだという風になんとなく理解して、ある程度分かってきてからしっかりと復習しましょう。
次回予告
次回は、フォームのバリデーションと呼ばれることについて学んでいきます。
もしよろしければ、フォローやストック、LGTMお願いします。