ホームページ・Webサイト制作では、HTMLの知識がベース・骨組みになります。しかし、HTMLといってもタグの種類だけでこんなにたくさんあります。
これをみただけでも嫌になります。
そこで、これからHTMLやCSS、JavaScriptなど基本的な知識を学ぶ初心者に向けて、まずはこれだけ覚えよう！と位置付けた頻出単語のHTMLタグを厳選して紹介します。
<html>,<head>,<body>
この３つのタグは、HTML全体の骨組み・枠組みを決めるタグです。ほぼ１００％出てきますが、あまり悩む必要がありません。
<html>タグは、こっからここまでHTMLですよ、と言うだけです。
<head>タグの中に入るのは、ページの中に直接表示されないもの、と考えるのが一番しっくりくると思います。具体的には、タイトル（ページの外側に表示されます）や、文字コードの情報、別に読み込んでほしいファイルなどを記述します。
<body>タグは、本文です。ページの中に表示される中身を書きます。
<body>タグでよく出てくるタグ（要素）
では、<body>タグの内側でよく出てくる、よく使われるタグ（要素）を厳選して紹介します。
<p>タグ
タグの名称は、たいてい英単語の略になっていますので、何の略なのかわかるとイメージしやすいものが多いです。
この<p>タグは、「Paragraph」つまり段落のことだと考えてください。
<p>タグで囲うと、その部分が一つの段落だと解釈されます。場合によって、改行されたり、字下げされたり、日本語ではあまり使いませんが先頭の１文字を大きくしたりなどするわけです。
<div>タグ
CSSやJavaScriptが当たり前になってから、利用頻度がものすごく上がったのが<div>タグです。
<div>タグは、「DIVision」の略で区分、部分と考えてください。つまり、<div>タグは区分けをするときに使います。
多くの場合、属性として、「id」や「class」をつけて、CSSやJavaScriptを使って表示のしかたを変えたり、動かしたりするための印として使います。
<span>タグ
<span>タグは、前述の<div>タグとまったく同じ役割です。
違いは、<span>タグの中には改行を入れないことです。改行が含まれた部分を囲いたい場合は<div>タグを使います。
<br>タグ
HTMLを自分でつくってブラウザで表示させてみればすぐわかりますが、本文のところに改行をいくらいれても、ブラウザの表示にはまったく反映されず、改行が入りません。
HTMLで改行したい場合には、この<br>タグを使います。
<br>は、「BReak」の略です。
<a>タグ
リンクを付けるときに使うのが、<a>タグです。
リンク先を指定するには、「href」という属性をつけます。「href」は「Hypertext REFerence」の略です。
この<a>タグは、「リンク」というHTMLのキモとも言える機能なので、ものすごくよく使われます。このため、利用できる属性の種類もたくさんあります。
<img>タグ
<img>タグは、「Image」の略で画像のことです。画像を貼り付けるときに使います。
この<img>タグも、<a>タグと共に、HTML・Webが爆発的に普及することになった起爆剤とも言える機能です。
<img>タグは、「src」属性によって、画像ファイルのある場所を指定します。
<h1>タグ、<h2><h3><h4><h5><h6>
<h1>タグの「h」は、「Heading」の略で、見出し、あるいは、章や節のタイトルのことです。
これら<h1>から<h6>までのタグに囲まれた文字を抽出してくると、目次ができる、というイメージです。
HTML文書の構造を示す重要なタグで、昨今では、SEO対策、Googleの検索エンジンがこの「h」タグを重視しているため、よく使われるようになっています。
<ul>、<ol>、<li>
この３つのタグは、箇条書きをするときに使います。
箇条書きの先頭を●印にするか、数字にするか、などでタグを使い分けます。
<head>タグの中でよく使われるタグ（要素）
次に、<head>タグの内側でよく出てくるタグを紹介します。
<title>タグ
<title>タグは、その名のとおり、このページ（HTML）のタイトルを書くところです。
ブラウザの一番上、タブ表示の部分にアイコンとともに表示されるのが普通です。
＜title>タグはSEO対策で超重要
ブラウザへの表示よりは、Googleなどの検索サービスが<title>タグを重要視するので、よく使われます。
つまり、検索結果ページのタイトルとして<titel>タグの中身がそのまま表示され、太字で大きく表示されます。よって、検索を使うユーザーがその情報を目にしてそれ自体をクリックして飛んできます。
ページの本文、中身は、このユーザー行動を前提にして作ってね、というのがGoogle他検索サービスの暗黙の指示です。
また、この<title>タグに、検索を使うときに検索されたいキーワードを含めておくことが、検索結果での上位化、つまり、SEO対策としてとても重要だと言われています。
<meta>タグ
<meta>タグは、ブラウザ側に伝えたいいろいろな情報を書き込むときに使います。逆に言うと、ユーザーがいちいちみる必要のない情報です。
いろいろな属性をつけて、ページを表示するときに使ってほしい情報を含ませます。
たとえば、次のようなものです：
- 文字コード（charset）
- ページの説明（name=”description”）
- SNSでシェアなどするときに自動的に追加してほしい情報（OGP、og:）
<link>タグ
<link>タグは、外部のファイルを読み込んでほしいときに利用します。
一番よく利用されるのは、CSSファイルを読み込むときです。
また、ファビコンと呼ばれる、ブラウザの一番上のタイトルの左側に表示される小さなアイコン画像を指定するときにも使います。
<script>タグ
<script>タグは、その名のとおりスクリプト、つまり、プログラムを追加したいときに使います。
事実上、JavaScriptを実行するときに使われます。
まとめ
ホームページ・Webで発信をするときに「コレだけは知っておきたい」HTMLタグをまとめました。WordPressなどのCMSを使うときにもとても有用な知識です。
お役に立てば幸いです。
コメント