webデザイナーのよく使うHTMLタグのご紹介

こんにちは。
webデザイナーの小川です。
前回に引き続き、今回もwebサイトのページの中身について話を進めていきたいと思います。
いよいよ5回目になりました今回は、前回の予定通り個人的によく使うHTMLタグのご紹介していきたいと思います。

htmlの歴史

HTMLタグを紹介するにあたってまずHTMLについてご紹介できればと思います。

HTMLとはWebページを作成するためのマークアップ言語です。正式名称は「HyperText Markup Language(ハイパーテキストマークアップランゲージ)」で、それぞれの頭文字をとった略称で親しまれています。
現在、インターネット上で見られるWebページのほとんどがHTMLで作成されており、HTMLではWebページを作成するにあたってページ構成、見出しや段落の作成や編集、フォントや文字色の指定などといった見た目の作成・編集が可能です。

またハイパーリンクというURLを指定しテキストや画像に他のページへの移動する役割を与える機能もあります。この機能は世界中のネットワークに大きな影響を与えWebページを構成するにあたって無くてはならない存在となっております。

HTMLの誕生と歴史

HTMLはスイスにある欧州原子核研究機構（通称：CERN）においてイギリスの計算機科学者であるティム・バーナーズ・リー氏を中心に1989年に開発されました。ティム・バーナーズ・リー氏はロバート・カイリュー氏と共にWWW（ワールド・ワイド・ウェブ）を考案したことでも有名です。他にもURLやHTTPといった概念も彼による設計によって誕生しました。
HTMLの誕生の翌年にはサーバとブラウザが誕生しました。Webページを作成するにあたってHTMLと合わせて使用されるCSSが誕生したのは1996年頃で、そのCSSの登場によってHTMLだけでは実現出来ないより高度な装飾が実現出来るようになりました。その後もHTMLは年々バージョンアップを重ねていき、2022年現在はHTML Living Standardが最新バージョンとなっております。

2022年現在の最新バージョンであるHTML Living StandardはWHATWGというApple、Mozilla、Operaの開発者たちによって2004年に結成された団体が独自に策定を進めているHTMLの仕様です。W3CがWeb開発者への配慮が足りないと不満を持ったことから各社が結束し団体が設立されました。2017年にMicrosoftも参加しております。

『WHATWGとは』

WHATWGとはW3Cの対抗としてApple、Mozilla、Operaの開発者たちにより2004年に結成された団体で、正式名称は『Web Hypertext Application Technology Working Group』であり、それぞれの頭文字をとった略称した呼び名で親しまれています。

HTMLの沿革

1989年 — HTML
1993年 — HTML1.0 / HTML+
1995年 — HTML2.0
1997年 — HTML3.0 / HTML3.2
1999年 — HTML4.0 / HTML4.01
2014年 — HTML5.0
2016年 — HTML5.1
2017年 — HTML5.2
2021年 — HTML Living Standard

HTMLでできること

HTMLでは主にWebサイト(Webページ)を作成するためのマークアップ言語として有名です。具体的にどのようなことができるのか見ていきましょう。

ドキュメントの作成・編集

HTMLではWebページを作成するにあたって必要なドキュメントの作成・編集を行うことができます。見出し(hタグ)や段落(pタグ)を指定することによって、自身が表現したいドキュメントの構造を作成することができます。

装飾機能

HTMLではWebページをより見やすくするにあたって必要な装飾機能が用意されております。
この装飾機能ではフォントや文字色の指定などといったUI(User Interface/Webサイトの見た目や操作性)やUX(User Experience/ユーザーの得る体験)において非常に大切な見た目の編集を行うことが可能です。
よりデザイン面を豊かに表現するために装飾の編集を行いたい場合には『CSS（カスケーディング・スタイル・シート）』を併用して使用することが一般的です。

『CSSとは』

CSS（カスケーディング・スタイル・シート）とはWebページの見た目・デザインを調整するためのスタイルシート言語

ハイパーリンク

HTMLではWebページとWebページの繋げる役割を与えるハイパーリンクというものが用意されています。ハイパーリンクとはWebページ上のテキスト(文字)や画像に参照情報(URL)が埋め込まれたものを指します。一般的にハイパーリンクは略称して『リンク』と呼ばれることが多いです。簡単に説明をすると”文字”や”画像”をクリックして別ページに飛ぶ機会がインターネット上で数多く体験すると思いますが、そこにハイパーリンクの機能が使用されております。インターネットという世界中のネットワークの成長に大きな影響を与えWebページを構成するにあたって無くてはならない機能です。

『ハイパーリンクとは』

ハイパーリンクとはWebページ上のテキスト（文字）または画像に参照情報（URL）が埋め込まれたもので、一般的には「リンク」と呼ばれます。

HTMLタグ使い方のおさらい

前回から間が空いてしまっているので、簡単にHTMLタグの記述方法について簡単におさらいをしてみましょう。

基本的には開始タグと閉じタグがセットになっており、この開始タグと閉じタグで囲み文書構造をつくっていくと、webページで表示できるhtmlを作成することができます。

記述例

<section>
<div>
<p>Hello, World!</p>
</div>
</section>

下記のような誤った記述をしてしまうとページが崩れてしまいかねません。実際のページでは数百行にわたるHTMLデータの中から綴り間違いや閉じタグの位置間違いを誤った記述の部分を探すことになってしまいます。。。

誤った記述例

<sectiom>(綴り間違い)
<div>
<p>Hello, World!</p>
</section>
</div>(閉じタグの位置が違う)

個人的によく使うHTMLタグ

ここからは個人的によく使うHTMLタグをご紹介していきます。
あくまで個人的によく使うタグ、使用方法なので方法これが確実に正しい方法というわけではありません。自分でもたまに他に人がコーディングしたページのソースを見て勉強をしたりもしていますので、一つの使用方法としてみていただければと思います。

ヘッダータグ header

ヘッダーであることを示す要素です。
ロゴとグローバルナビ、お問い合わせのボタンなどが入ることが多いです。パコソンとスマートフォンで大きく見え方が違うことが多く、手間のかかる部分です。

記述例

<header>
ヘッダーの中身
</header>

フッタータグ footer

ヘッダーと同様にフッターであることを示す要素です。
会社の住所や連絡先やコピーライトを記述していることが多いです。時にはナビなども入ったりします。
ヘッダーとは違い、パソコンとスマートフォンでの見え方の相違はあまり大きくなく、シンプルな構成になることが多いので手間がかかりにくいです。

記述例

<footer>
フッターの中身
</footer>

記事タグ article

ページ内のヘッダーフッターを除くページの要素を囲うように使用することが多いです。ほとんどの場合でヘッダーとフッターは共通なため、articleでページの要素を囲うことで、そのページ独自のデザインを反映しやすくなります。

記述例

<article>
記事タグの内容
<section>
<div>
</div>
</section>
</article>

セクションタグ section

各セクションごとに大きく区切りをつける為に使用します。sectionで区切ることによりページ内リンク(このブログの記事でいう目次を押すと任意の場所へ飛ぶ機能)や各section毎に背景の変更などデザインの変更がしやすくなります。

記述例

<article>
<section>
セクションタグの内容
<div>
</div>
</section>
</article>

見出しタグ h1からh6

各部分のタイトル等をこれで記述することが多いです。h1からh6の順で見出しの重要度を区別します。個人的によく使っているのがh1からh4まででh5は稀に、h6はほとんど使う機会はないような使用頻度です。

記述例

<h1>見出し(h1)タグの内容(ロゴが入ることが多いです。)</h1>
<h2>見出し(h2)タグの内容(各セクションのタイトル等が入ることが多いです。)</h2>

コンテンツ区分タグ div

section内で小さく区切りをつけたい時に使用します。section内に仕切りをつけて整理をしていくようなイメージで使うことが多いです。

記述例

<article>
<section>
<div>
コンテンツ区分タグの内容
</div>
</section>
</article>

段落タグ　p

ひとつの段落であることを示します。個人的には段落タグが一番使用頻度が高いタグだと思います。通常の文章だったり、次に紹介する画像タグもこの中に入れてしまうことが多いです。

記述例

<p>
段落タグの内容
</p>

画像タグ img

文字通り画像を表示させるためのタグです。HTMLタグ使い方で開始タグと閉じタグはセットになるとお話ししましたが、この画像タグでは閉じタグが必要ありません。

記述例

<img src=”読み込ませる画像を記述” alt=”画像の説明”>

アンカー(リンク)タグ a

HTMLには必要不可欠なハイパーリンクのタグです。「a」とは、「Anchor（アンカー）」の略で、リンクの飛び先を指定するタグです。href属性でリンク先のurlを指定します。

記述例

<a href=”リンク先のURL”>リンク文字</a>

ページの途中などの特定の場所へ飛ばしたい場合はhref属性で「href=”#sample”」とし飛ばしたい先にはid属性「id=”sample”」を付与します。

記述例

リンク先の指定
<a href=”#sample”>リンク文字</a>
リンク先
<div id=”sample”>コンテンツ内容</a>

リストタグ ul,ol,li

何かを並べて表示させたい時によく使用します。
「ul」や「ol」の中に「li」を並べてリスト化します。
ulはunordered listの略で順序がないリストのことを指します。対してolはordered listの略で順序のあるリストを意味し、こちらには指示をして消さない限りリストに連番が振られます。
特に理由がなければ基本的には順序の概念のない「ul」の方を使用しています。

記述例(olの場合も同様)

<ul>
<li>
リスト項目
</li>
</ul>

定義リストタグ dl dt dd

この要素は、一連の用語を「dt」で指定し、説明を「dd」でするということをひとまとめしたものです。
基本的には上記の使い方をしますが、サイトでよく見る更新情報や新着情報などをこの定義リストで記述することも多いです。

記述例

<dl>
<dt>
用語指定(更新情報の場合は日付)
</dt>
<dd>
用語説明(更新情報の場合は更新内容)
</dd>
</dl>

まとめ

今回もwebサイトのページの中身ついて書かせていただきました。
個人的によく使うものをご紹介させていただきましたが、他にもさまざまなタグもあり、さまざまな記述方法もあります。記事の中でも書かせていただきましたが、他の人のソースを見て「なるほど、こういった書き方もあるのか！」と関したりすることも多々ある反面、稀にですが、「このサイトいつ作られたんかな？」と思ってしまうようなサイトも見られます。

一口にHTMLといっても33年の間、マイナーチェンジやバージョンアップを重ね日々進化を続けながら今日までやってきました。HTMLだけでなくcssやjavascript、Wordpressに代表されるCMSも日々アップデートを重ね、より快適によりわかりやすくなっていっております。近年のネット環境の高速化に伴いこれから大きく変化が訪れるかもしれません。そんな中、ひと世代もふた世代も前のサイトのままでは時代に置いていかれることは明確だと思います。

この機会にサイトの見直し、サイトリニューアルのご相談または新規サイトの立ち上げなどお気軽にご連絡いただければと思います。
アドコミではWebサイト制作はもちろん、Web広告、Webマーケティングやチラシ制作まで様々な角度から幅広くお手伝いさせていただきます。