🍊

HTML入門

2024/06/18に公開

HTML

tech

はじめに

このHTML入門はエンジニア向けではなく、社内の新卒マーケターや新卒データアナリスト向けに最低限身に着けてほしいHTMLの知識に絞ってまとめています
エンジニアの観点だと物足りない情報も多々あると思いますのでご留意ください
HTML/JS/CSSは「実際に触ってみる」と覚えが早いと思うので後述のjsFiddleなどのサービスを活用しながら実際に手を動かしながらこの記事を読み進めることをお勧めします。

HTMLとは

HTMLとは、HyperText Markup Languageの略で、マークアップ言語の1つです。マークアップとは、文章の構成や役割を示すことを意味します。

「これはページのタイトルです」「ここからここまでは表組み」「これは注釈です」といったように、Webページの構成や各要素の役割をコンピュータが処理できるようにプログラミングします。

HTMLの基本構文

HTMLの１つずつあるhead（頭）とbody（体）で構成されています。その中に入れ子の関係で様々な要素（HTMLタグ）を加えることで、Webページの構成がカタチづくられます。

headはWebページのページタイトルやファビコンと呼ばれるページアイコンなど、ページの基本情報で構成されます。一方、bodyはWebページ内に実際に表示される要素（テキストやリンク、画像、動画、表組み、など）で構成されます。

HTMLタグ

HTMLはコンピュータにコードの要素を理解してもらうために、タグ付けと言われる< >（大なり小なり）の記号で要素を表現します。

例えば、<button>や<table>などがあります。これにより、コンピュータが「ここはボタンの要素」「ここはテーブル（表組み）要素」と判別し、ブラウザで表現ができます。多くのタグは、<button>～</button> のように開始タグと終了タグで囲みます。

buttonタグ

ボタンを作成するために使用されます。

hタグ

見出しを作成するために使用されます。h1からh6まで、大きい見出しの順で用います。

aタグ

ユーザーはクリックして別のウェブページ、ファイル、またはリソースに移動できます。

imgタグ

Webサイト内に画像を表示するタグで、imgはImage（画像）の略です。

ulタグ

箇条書きのように表示したい場合に使うタグです。ulタグの中に箇条書きとなるliタグを並べて使います。

tableタグ

Webサイト上に表を作成する場合に使用するタグです。表の作成にはtableタグの他、行を定義するtrタグ、見出し項目を定義するthタグ、データ項目を定義するtdタグなどを組み合わせます。

divタグ

囲った部分をグループ化する際に使うタグです。このdivの中に他のタグを入れて一つのグループとして用います。

pタグ

1つの段落を指定する場合に使用するタグで、paragraph（段落）の頭文字を表します。

spanタグ

部分的に指示を出すタグで、単体では意味はありません。例えば、文章の一部分に色を付けたい、文字の太さを変えたいなどの場合に使用します。

brタグ

テキスト内や間で改行する際に使うタグで、brはbreak（改行）の略です。

inputタグ（type="text"）

1行テキストの入力フィールドを設けるタグです。

inputタグ（type="radio"）

1行テキストの入力フィールドを設けるタグです。

inputタグ（type="checkbox"）

チェックボックスの選択フィールドを設けるタグです。

select/optionタグ

プルダウンの選択フィールドを設けるタグです。selectタグの中に選択項目のoptionタグを並べて用います。

textareaタグ

複数行テキストの入力フィールドを設けるタグです。

iframeタグ

指定した別のページ内容をフレーム表示（インラインフレーム）することができるタグです。外部サービスで提供されている動画（YouTubeなど）やWebフォームなどを読み込む時などに利用します。

iframeの外を親フレーム、iframeの中を子フレームなどと呼ぶことがあります。親子関係でデータの受け渡しなど少々複雑な点に留意が必要なタグです。

HTMLの属性

HTML属性を用いるとHTMLタグに更に細かな設定を付与することができます。

HTMLタグ共通の属性例

属性	解説
id	同ページ内で1つしか存在しない要素として特定したい際に用います。
class	同ページ内で複数あることを想定して共通の要素として特定したい際に用います。
title	要素のタイトルです。オンマウス時に表示されます。

<p id="test_paragraph" class="group_paragraph" title="これはテストパラグラフ">これはテストのパラグラフです</p>

aタグの属性例

属性	解説
href	リンク先URLの指定
target	リンク先の表示先指定（同じタブで開く：_self）（新しいタブで開く：_blank）

<a href="https://www.google.com" target="_blank">これはリンクテキストです</a>

imgタグの属性例

属性	解説
src	画像のURLを指定します
alt	画像タイトルの指定をします。画像が読み込まれなかったときに表示されます

<img src="https://placehold.jp/300x200.png" alt="これはサンプル画像です" />

inputタグ（type="text"）の属性例

属性	解説
type	1行のテキストフィールドにしたい場合は「text」の指定が必須です
value	入力されるテキストが含まれます。初期指定することも可能です
placeholder	カーソルがあたると消える入力を補助するグレーの文字です

<input type="text" value="これが初期値です" placeholder="ここに入力してください">

inputタグ（type="radio"）の属性例

属性	解説
type	ラジオボタンにしたい場合は「radio」の指定が必須です
name	同じラジオボタンのグループを指定する際には共通のnameにします
value	選択した後にデータベース上などに格納される値になります

<label><input type="radio" name="fruit" value="apple"/>りんご</label>
<label><input type="radio" name="fruit" value="orange"/>みかん</label>

inputタグ（type="checkbox"）の属性例

属性	解説
type	チェックボックスにしたい場合は「checkbox」の指定が必須です
name	同じチェックボックスのグループを指定する際には共通のnameにします
value	選択した後にデータベース上などに格納される値になります

<label><input type="checkbox" name="fruit" value="apple"/>りんご</label>
<label><input type="checkbox" name="fruit" value="orange"/>みかん</label>

select/optionタグの属性例

属性	解説
（optionタグ）value	選択した後にデータベース上などに格納される値になります

<select>
	<option value="apple">りんご</option>
	<option value="orange">みかん</option>
</select>

iframeタグの属性例

属性	解説
src	iframe内で呼び出す外部URLを指定します

<iframe width="560" height="315" src="https://www.youtube.com/embed/bjmBJ1Fl0cs?si=ZvebDHsZQJmSNwA-" title="YouTube video player"></iframe>

HTMLのIDとClass

idとclassの属性の役割は特定のタグのに目印をつけることです。特定のタグにclass名や・id名を設定することで、指定したタグだけにCSSでスタイルを適用させたり、javascriptで操作することができるようになります。

さらには、Googleアナリティクスなどの様々なマーケティングツールにて特定のタグの挙動をトラッキングしたりする場合にも利用するので、サイト構造を見ながら適切なID/Classの指定が望まれます。

<div id="container">
	<h1>これは大見出しです</h1>
	<p>こんにちは。ここには１つの段落（パラグラフ）の文章が入ります。</p>
	<ul class="pointlist">
		<li class="pointlistitem">ポイント１ - ここには箇条書きの<span class="red">文章</span>が入ります</li>
		<li class="pointlistitem important">ポイント２ - ここには箇条書きの文章が入ります</li>
		<li class="pointlistitem">ポイント３ - ここには箇条書きの文章が入ります</li>
	</ul>
	<img src="https://placehold.jp/300x200.png" alt="これはサンプル画像です" />
</div>

IDの役割

同じIDはページ内で1回のみしか使用できないというルールがあります。ただ、ページ（URL）が変われば同じIDでもそれぞれのページで使用することが可能です。

例えばナビゲーションやメインエリア（コンテナやコンテンツと呼んだりします）の領域のdivタグで指定することが多いです。

Classの役割

同じClassはページ内で複数回使用することができます。離れている要素でも同じ表現や処理をしたい場合に共通のClassを割り当てることで実現できます。