ホームページ制作入門 HTMLタグの基本

はじめに

はじめてホームページを制作しようとHTMLに触れたとき、どう記述していいのかわからない、タグはどう入れたらいいんだろうかと、最初に思う人が多いと思います。今回はホームページを制作するにあたって必要なHTMLの基礎について書いていこうと思います。

HTMLとは?

そもそも「HTML」とはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略でWebページを制作する為の「基礎言語(マークアップ言語※)」です。基礎言語はプログラミングの言語などを含めるとたくさんの種類がありますがWebでは一般的に「HTML(現在はHTML5)」が使われています。

※視覚表現や文章の構造などを記述する形式言語

HTMLのバージョン

1991年世界で最初のWebサイトが公開されました。ここで使われたのが「Hyper Text(ハイパーテキスト)」と言われる文書と文書を繋げるシステムです。考案した目的は研究員のデータや文献を繋げる(リンクさせる)ことで、そういったWebサイトを作る為の決まりごととして「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)が作られました。
その後HTML 0から1.0・2.0とバージョンアップしていき2008年にHTML5が発表され、現在は多様なメディアに対応するため、HTML5を使用するように勧告されています。

Webページの構成

基本的なHTMLのページの構成は以下のようになっています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
</head>
<body>
</body>
</html>

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言は「このファイルはHTML文章を記述していきます」という宣言文です。この部分を変えることによりHTMLのバージョンを変更することも可能となっています。記述しているテキストファイルは拡張子をHTMLにして「HTMLファイル」にすることも忘れてはいけません。

 

言語の指定

<html lang=”ja”>

この部分で言語を指定します。“ja”で日本語のWebページになり、“en”で英語のWebページになります。

 

<head>と<body>

<head>にはtitleなどの文章情報要素は入り、<body>には文章を構成する要素が入ります。

 

文字コードの設定

<head>内ににある<meta charset=”UTF-8″>は文字コードの種類を示すもので”UTF-8”以外には”Shift_JIS” ”EUC-JP”などがあります。一般的に使われるのは”UTF-8”が多いです。

 

ページのタイトル

<title>タイトル</title>

ページには必ずタイトルがあります。ページを開いた時にタブに表示される部分です。タイトルは検索する際の要素にもなりますので必ず付けましょう。

 

HTMLタグの基礎

タグには決まりごとがあります。タグとは<>でページの要素名(タグ名)を囲っているもので、基本的なタグの書き方は以下のようになります。
<タグ名>記述内容</タグ名>
<タグ名>は開始タグで</タグ名>は終了タグになります。
開始タグと終了タグで記述を挟みます。終了タグは先頭に「/(スラッシュ)」を記述しますが無い場合もあります。開始タグには必要に応じて「属性」や「属性値」を書き込みます。

<タグ名 属性名=”属性値”>記述内容</タグ名>

例えば
<h1 align=”center”>見出し</h1>
と記述すると

h1=見出し
align=配置指定
center=中央

といった内容になり、見出しをページの中央で配置するという記述になります。

 

HTMLの基礎タグ

まずWebページの構築によく使われているタグをいくつか紹介していきます。

 

テキスト関連タグ

<p>〜</p>

ひとつの文書のかたまり、段落で使用されます

 

<b>〜</b>

文章内で強調したい部分などにに使用されます。このタグで挟まれた文字は太字になります。

 

<strong>〜</strong>

文章内でさらに強調したい部分、重要な部分に使われます。<strong>〜</strong>で挟まれた文章内でさらに<strong>〜</strong>で囲むことで強調の段階をつけることができます。

 

リスト関連タグ

<ul>〜</ul>

配置する文章のリストに番号などの情報を持たせない場合に使用します。

 

<ol>〜</ol>

配置する文章のリストに番号の情報を持たせる場合に使用します。

 

<li>〜</li>

1つのリストを意味するタグで必ず<ul>〜</ul>か<ol>〜</ol>のリストタグに囲まれます。

記述例
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

 

表関連タグ

<table>〜</table>

ひとつの表を作成するタグです。基本的にこの<table>〜</table>タグ内に表の内容の記述をしていきます。

 

<tr>〜</tr>

表の横一列(行)の定義をするタグです。<tr>〜</tr>内に<th>や<td>タグでセルの記述を行います。

 

<th>

表の中の見出しが入ったセルを定義するタグです。

 

<td>

表の中のデータ(通常の文章)が入ったセルを定義するタグです。

記述例
<table>
<tr>
<th>見出しセルA</th>
<th>見出しセルB</th>
<th>見出しセルC</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
<td>セルC1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
<tr>
<td>セルA3</td>
<td>セルB3</td>
<td>セルC3</td>
</tr>
</table>

 

リンクタグ

<a>〜</a>

Webページ内で別のページにリンクさせる時などに使用します。<a>タグにhref属性でURLを指定します。またtarget属性でリンク先の開き方を指定することができます。target属性は “_self” (現在のウィンドウに表示)“_new” (新規ウィンドウ(1つ)に表示)“_blank”(新規ウィンドウ(複数)に表示)などがありますが、 “_blank”が多く使われます。

記述例
<a href=”https://big-mac.jp/public_html/bigmac/” target=”_blank”>リンクテキスト</a>

 

画像タグ

<img>

画像を配置するタグで終了タグを必要としないタグです。src属性で画像のあるURLを記述します。他にwidthやheightで画像サイズの記述を行います。

記述例
<img src=”画像URLなど” alt=”画像の説明テキスト” width=”横幅数値” height=”高さ数値”/>

 

 

最後に

どうでしょうか?私も初めてHTMLを触ってみようとして、最初は理解できるのだろうかと不安でしたが、こうして見るとWebページは細かい部品の集まりで、部品ひとつひとつはタグで簡素に記述され、さらにそのタグに属性を追加することでWebページになっているんだなと思いました。ただ、現在のWebページはHTMLだけでなく、CSSという装飾を主に担当している言語も使って作られているので両方の勉強が必要になります。

 

このエントリーをはてなブックマークに追加

筆者

E.Mizuno

2016年12月入社。制作部所属。 主にWebデザインと印刷物、ときおりイラストを担当しています。 印刷業界からWeb業界に転身したばかりなので現在コーディング勉強中。 猫好きで猫を飼ってるけど猫アレルギーなのが日頃の悩みです。 好きなデザイン系統は寒色系シンプル。好きなソフトはAdobe Bridge。好きなショートカットキーはCont+A。愛用文具は製図用シャーペン。 まだまだ未熟者なのでもっと勉強してハイスペック人間になりたいです。

筆者が最近執筆した記事