アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信!

初心者必見!必要なタグはたったこれだけ!HTML超入門!

      2014/09/06

html-tag-basic

「誰もが最初は初心者だった」ということで多少はニーズがあるかと思い今回はHTMLネタです。これからHTMLの勉強を始めたい人向けの内容となっております。このブログをはじめた当初にHTML関係の記事を投稿していたので(連載するつもりが1回で終わりましたw)、およそ7年半ぶりということになります。

というわけで、今回は初心に振り返りHTMLの基礎知識に関する記事を書きます。
また、この記事はHTMLタグの基本文法を知っている方を対象としています。

HTMLの要素は実はこれだけ覚えればOK!!

HTMLの学習を進めていくと「意外と種類が多くて覚えるのが大変!」という方や「全部覚えたけど実際必要な要素が分からない!」という方がいるかと思います。

実は数多く存在する要素で頻繁に使われるのはごく一部だけなんです。
巧みに様々な要素を使いコーディングをする人もいますが、古いブラウザでの安定した動作を考慮し、プロでも半数ぐらいは必要最小限しか使わないというのが現状です。

実際に仕事の現場で頻繁に使われる要素は下記ぐらいです。

  • h1~h6
  • p
  • br
  • strong
  • ul(、li)
  • ol(、li)
  • a
  • img
  • table(、tr、th、td)
  • div
  • span

これだけ覚えれば取りあえずは十分です。実際、私はこれ以外の要素はまず使いません(HTML5で追加された要素についてはスクリプト導入の手間もあるので今回は除外しています)。

どうでしょうか?そんなに多くないですよね。
それではこれらの要素について簡単に説明していきます。

なお、タグと要素の違いは下記の記事をご覧ください。
基礎用語:「タグ」と「要素」の違いとは? [ホームページ作成] All About

枠組み定義

要素の説明の前に枠組みについて触れます。
上記で挙げた要素以外にもHTMLの枠組みを定義するための要素も存在します。これに関しては「お約束」のようなものなので毎回コピペで良いでしょう。

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta content="ページ説明" name="description">
	<meta content="ページキーワード" name="keywords">
	<title>ページタイトル</title>
</head>
<body>

	ここにコードを書く

</body>
</html>

一つだけ注意点があります。
content=”text/html; charset=utf-8″となっている部分、これは必ずhead要素の直下に記述しましょう。また、charsetの値をutf-8にした場合、HTMLを保存する際の文字コードもutf-8に指定して保存してください。ソースコードに記述された文字コードと保存した時の実際の文字コードが食い違うと文字化けを起こします

文字コードを指定してファイルを保存するにはDreamweaverのような業界標準エディタを使うか、TeraPadのような文字コード指定機能付のテキストエディタを使用してください。プロを目指すならDreamweaverの使用方法は覚えたほうが良いです。

続いて、各要素の説明を見ていきましょう。

見出し、段落、文字の強調

以下の要素は記事の見出しや本文の定義に使用します。

h1~h6要素(heading)
見出しの定義を行います。
数字が小さいものから順に大見出し(h1)、中見出し(h2)、小見出し(h2)とレベルが下がっていきます。ブログ記事を書く人は見出しをつけない人が多いですが適度に見出しをつけることで文章が読みやすくなります。
p要素(paragraph)
段落を定義します。
見出しと同様適切に段落分けしましょう。長ったらしいと読み疲れてしまいます。
br要素(break)
強制的に文章を改行します。
原則的には句点「。」の箇所以外では使用しないほうが良いでしょう。文字の大きさや折り返し位置は見る人によって異なります。そのため安易に句点以外の箇所で強制改行すると意図しない見え方になる場合があります。
strong要素(strong)
文章中特に重要な箇所を定義します。
一般的に太字に強調されます(強調のされ方はCSS(スタイルシート)で変更可能です)。

リスト

以下の要素はリスト(箇条書き)の定義に使用します。

ul要素(unorder list)
リストを定義します。
情報の整理に役立つでしょう。
ol要素(order list)
順序付きリストを定義します。
ul要素に比べると用途は少ないですが、例えば「好きな音楽ベスト5」みたいな内容を書く場合に重宝します。
li要素(list)
リストの各項目を定義します。
ul要素、ol要素自体はリストの枠組みを定義するだけなので、実際の項目内容はli要素を用いて定義します。性質上、li要素単体で利用すること出来ません。必ずul要素、ol要素の子とする必要があります。また、ul要素、ol要素はli要素のみを子とすることが可能です。

リンク

以下の要素はリンクの定義に使用します。

a要素(anchor)
リンクを定義します。
ページとページを結びつけるための最も大切な機能です。

画像

以下の要素は画像の定義に使用します。

img要素(image)
画像の埋め込みに利用します。
回線速度に大きく影響する部分なので、画像の形式・サイズには気をつけましょう。

以下の要素は表の定義に使用します。
表は構造が複雑になりがちなのでDreamweaverのようなツールを利用したほうが正確かつ高速で作成できます。

table要素(table)
表の定義します。
以前は複雑なレイアウトを組む目的で使用されていたこともありましたが、ブラウザの性能が向上した現在では本来の用途で使用するようにしましょう。また、table要素単体では利用できません。tr、th、td要素と組み合わせ利用します。
tr要素(table row)
表の行(横方向のマス)を定義します。必ずtable要素を親とする必要があります。また子として持てるのはth、td要素だけです。
th要素(table header)
表のヘッダーを定義します。
td要素(table data)
表のデータを定義します。

汎用

以下の要素は汎用的な用途に使用します。

div要素
汎用的なブロックレベル要素を定義します。
div要素は数多く存在する要素の中で最も利用度が高いタグのひとつです。レイアウト全般で利用することが多いです。
span要素
汎用的なインラインレベル要素を定義します。
強調する以外の文字の装飾などによく使われます。

ブロックレベル要素とインラインレベル要素についてはこちらの解説をご覧ください。
なおHTML5ではこれらの概念は無くなり、「コンテンツ・モデル」という考え方が定義されました。といっても、CSS(スタイルシート)ではブロックレベルとインラインレベル概念は引き続き使われているので無駄にはなりません。

また、本記事では要素の詳細な使い方については省略させていただきました。下記のサイトおよび下記で取り上げている書籍を参考にしてください。

HTMLタグ/要素一覧 – TAG index
HTMLリファレンス-とほほのWWW入門

↓古い書籍ですがコーディングのベースとなる知識「Web標準」を得るには今も色褪せない内容です。とにかく文章量が多く概念的な内容が詳細に記載されています。

終わりに

HTML5を含めれば用意されている要素は結構な数になります。しかし、その多くは一部のブラウザでは動作しない為、実際に仕事の現場で使うものは限られています。そのため覚える必要がある要素を知っているかどうかで学習効率に大きな違いが出てきます。是非活用してみてください!

 - Web制作テクニック ,