HTMLタグの書き方の基礎基本
HTMLには、さまざまなタグがおおよそ100種類以上ありますが、すべて覚える必要はありません。
Webサイトの作成でよく使うタグは、ほぼ決まっているため必要に応じて調べながら使っていきましょう。
用語の説明とHTMLタグの基本的な書き方を解説します。
タグと要素の違い
まず、htmlの基本となる記述例を示します。
<div>コンテンツ</div>上記で、< >で囲まれたものを「タグ」と言います。
例では、「div（ディブ）」というタグを使用していますので、divタグと言います。
また、最初の<div>を「開始タグ」、最後のスラッシュ付きの</div>を「終了タグまたは閉じタグ」と言います。
コンテンツ部分を含む開始タグから終了タグまでを含めて「要素」と言います。
ホームページ制作・Web開発の現場では、このような用語で呼ぶことがありますので覚えておきましょう。
HTMLタグの書き方
htmlの基本構文は、簡単です。「開始タグ」と「終了タグ」で、テキスト、画像、リンク、動画などのコンテンツをはさむことが基本的なカタチなります。
htmlは、タグで囲まれた要素を、htmlファイル内に配置することでWeb上に表示します。
以下、具体的な例で書き方の手順を見ていきましょう。
【例】テキストのみの要素を表示する
1. 開始タグを書く
この例ではテキストを表示するための「pタグ」を使用します。
タグは、必ず半角小文字を使います。カッコ <>（小なり、大なり）でコードを囲います。
<p>2. 終了タグを書く
コンテンツを書く前に、終了タグまではじめに書いておくことがポイントです。
一般的には1ページのhtmlファイルには、多くのタグを使用します。コンテンツの量が多くなると終了タグの付け忘れなどのミスが起きやすくなります。必ず、開始タグと終了タグはセットで書くようにしてください。
<p></p>3. 開始タグと終了タグの間にコンテンツを書く
例では、「テキストが入ります。」という文章を入れることにします。
<p>テキストが入ります。</p>これで、1つのHTML要素ができました。
ブラウザで表示するとテキストの部分だけが表示されるのでお試しください。
HTMLタグで重要なこと
HTMLの要素は、文書構造や意味を定義する重要な役割もあります。
例えば、見出しを意味するヘッディングタグ<h1>～<h6>、段落を意味する段落タグ<p>、画像を意味するイメージタグ<img>、リンクを作成するためのアンカータグ<a>など、要素を指定するさまざまなタグが存在します。
【例】
●見出しはヘディングタグを使う
<h1>見出しのテキストが入ります。</h1>●画像はイメージタグを使う
<img src="画像の保存先のURL" alt="画像の説明">●リンクはアンカータグを使う
<a href="リンク先のURL">リンク</a>このように、HTMLはコンテンツ内容に応じて、意味あるタグを使うことが重要です。
実は、HTMLファイルは、タグなしでもテキスト等の文書をブラウザに表示することができます。
また、適正ではないタグを使っても、CSSで操作してイメージ通りに表示させることも可能です。
ただし、HTMLタグは、マークアップ言語ということを忘れてはいけません。
HTMLタグを付けることで、文書の構造や意味をコンピューターに伝えてくれます。
例えば、h1タグを使うことで、このページで一番重要なタイトルだと認識してくれますし、imgタグを使うことで、関連画像ということを認識してくれます。
検索エンジンのクローラーで考えると理解しやすいかもしれません。正しいタグで作られたWebサイトのほうが、検索エンジンは好むでしょう。Webマーケティングでは、HTMLタグの使い方もSEO対策に影響する要因のひとつです。
学習段階からタグの意味を理解して、要素に適したタグを使用することを心がけましょう。
HTMLでよく使うタグ
Web制作において、よく使うHTMLタグの一覧を下記にまとめています。
HTMLタグは、はじめに丸暗記する必要はありませんので、HTMLファイルを作成しながら活用してください。
