HTMLをタグで記述していく上で、タグをどう入れたらいのか、タグの意味やタグの使用方法は学ばないと案外難しいものです。今回はホームページを制作したい初心者の方向けにHTMLの基礎について書いていこうと思います。
目次
HTMLって何だろう？
そもそも「HTML」とはHyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを制作する為の「基礎言語（マークアップ言語※）」です。
基礎言語（マークアップ言語）は、視覚表現や文章の構造などを記述するタグを使用した形式言語で、プログラミングの言語などを含めるとたくさんの種類がありますが、Webでは一般的に「HTML（現在はHTML5）」が使われています。
タグを使用したHTML要素によって記述された文章を、ブラウザを使用して読み込む事でホームページを見ることができます。
HTMLを見た事がない方は、今読まれている記事を右クリック＞検証、もしくはF12を押す事でHTMLソースを見ることができます。たくさんのタグが使用されていると思います。
HTMLでできること
HTMLではサイト内で「見出しにする、段落にする、リストにする」とタグで構造を作っていきます。
文字の色や背景の色をHTMLで指定する事はできますが、HTML5では推奨されていませんので、CSSで記述すると良いでしょう。
最新情報をいち早くお届け!
無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます！
その他、更新情報・イベント情報を
お届けいたします。
作成支援ソフト
HTMLを記述するには、インターネットを閲覧するためのブラウザとメモ帳(テキストエディット)でもできますが、フリーでも充分に使いやすいソフトが多々ありますので利用してみましょう。
入力したいタグの入力支援をしてくれる便利な機能もあります。コーディングの上達を目指すなら『初心者がコーディング上達の為にできることは？』をご参照ください。
HTMLのバージョン
1991年、世界で最初のWebサイトが公開されました。 Webサイトで使われたのが「Hyper Text(ハイパーテキスト)」と言われる、文書と文書を繋げるシステムです。考案した目的は、研究員のデータや文献を繋げる（リンクさせる）ことで、リンクで繋がったWebサイトを作る為の決まりごととして「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)が作られました。
HTMLは、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文章を記述していきます」という基礎的な宣言文です。DOCTYPE宣言部分を変更することによって、HTMLのバージョンを変えることができます。記述しているテキストファイルは、拡張子をHTMLにして「HTMLファイル」にすることも忘れてはいけません。
言語の指定
- <html lang=”ja”>
<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>
p要素 ブロックレベル要素
ひとつの文書のかたまり、段落で使用されます。
- <b>〜</b> インライン要素
文章内で強調したい部分などに使用されるタグです。bタグで挟まれた文字は太字になります。
- <strong>〜</strong> インライン要素
文章内でさらに強調したい部分、重要な部分に使われます。<strong>〜</strong>で挟まれた文章内で、さらに<strong>〜</strong>で囲むことで強調の段階をつけることができます。
- <br>
テキストを改行するのに使用します。
リスト関連タグ
- <ul>〜</ul>
ul要素 ブロックレベル要素
配置する文章のリストに、番号などの情報を持たせない場合に使用します。
- <ol>〜</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>
a要素 インライン要素
Webページ内で別のページにリンクさせる時などに使用します。<a>タグにhref属性でURLを指定します。またtarget属性でリンク先の開き方を指定することができます。target属性は “_self” （現在のウィンドウに表示）“_new” （新規ウィンドウ（1つ）に表示）“_blank”（新規ウィンドウ（複数）に表示）などがありますが、 “_blank”が多く使われます。
記述例
<a href=”https://big-mac.jp/” target=”_blank”>リンクテキスト</a>
画像タグ
- <img>
img要素 インライン要素
画像を配置するタグで、終了タグを必要としないタグです。src属性で画像のあるURLを記述します。他にwidthやheightで画像サイズの記述を行います。
記述例
<img src=”画像URLなど” alt=”画像の説明テキスト” width=”横幅数値” height=”高さ数値”/>
まとめ
今回の記事はHTMLの基礎の紹介だけになりました。HTMLは進化し続けていて、以前のバージョンではあったタグが廃止されたり、新しいタグが追加されたりと仕様の変更があります。
Webサイト制作を続けるには、HTMLを常に勉強し続ける事になりますが、基礎とタグ学んでこそHTMLの変化に対応できますね。
マーケティングでお悩みでしたら、
Bigmacにお任せください。
