40代高卒者が製造業からIT転職する【HTML】

programming
DMM WEBCAMP

こんにちは、フローです。

今回は、HTMLのタグについて書いて行きたいと思います。

最初によく迷うのが、このタグの種類や使い方などではないでしょうか。

私も迷いました。

タグの種類も、ものすごく沢山あるので、とりあえずよく使いそうなものを書いていきます。

前回の記事はこちらです。

HTMLのタグ

HTMLで使用されているタグは非常に多岐にわたりますが、

ここでは代表的なタグの使い分けについて説明します。

h1〜h6タグ

見出しを表すタグです。h1が最も大きな見出しで、h6が最も小さい見出しです。見出しの大きさや重要度に応じて使い分けます。

pタグ

段落を表すタグです。文章を分ける際に使用します。

aタグ

リンクを表すタグです。href属性にリンク先のURLを指定します。

imgタグ

画像を表示するタグです。src属性に画像のURLを指定します。

ulタグ

順序のないリストを表すタグです。liタグとともに使用します。

olタグ

順序のあるリストを表すタグです。liタグとともに使用します。

tableタグ

表を表すタグです。thタグは表の見出し、trタグとtdタグは表のセルを表します。

formタグ

フォームを表すタグです。inputタグやselectタグ、textareaタグなどとともに使用します。

divタグ

汎用的なブロック要素を表すタグです。レイアウトの作成などに使用します。

sectionタグ

文書内の論理的な区切りを表すタグです。ページを論理的なブロックに分ける際に使用します。

headerタグ

ページ全体、またはセクションのヘッダーを表すタグです。

footerタグ

ページ全体、またはセクションのフッターを表すタグです。

navタグ

ナビゲーションを表すタグです。ページ内のリンクやメニューなどのナビゲーションを表現する際に使用します。

以上が、代表的なタグの使い分けです。まだまだ沢山あります。

適切なタグを使い分けることで、HTML文書の構造がわかりやすくなり、SEOにも有利になる場合があります。

簡単な記述例

上記で説明した代表的なHTMLタグを使用した簡単な記述例を示します。

この例は、単純なWebページのヘッダー、メインコンテンツ、フッターを表すものです。

<!DOCTYPE html>
<html>
<head>
	<title>タイトル</title>
</head>
<body>
	<header>
		<h1>ヘッダー</h1>
		<nav>
			<ul>
				<li><a href="#">リンク1</a></li>
				<li><a href="#">リンク2</a></li>
				<li><a href="#">リンク3</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
			<h2>セクション1の見出し</h2>
			<p>文章1</p>
			<p>文章2</p>
		</section>
		<section>
			<h2>セクション2の見出し</h2>
			<p>文章3</p>
			<p>文章4</p>
		</section>
	</main>
	<footer>
		<p>フッター</p>
	</footer>
</body>
</html>

この例では、以下のような構造になっています。

・headerタグでページのヘッダーを表現しています。

ヘッダーには、h1タグでタイトルを、navタグでナビゲーションを表現しています。

・mainタグでページのメインコンテンツを表現しています。

セクション1とセクション2の見出しをh2タグで表現し、それぞれのセクション内に文章をpタグで表現しています。

・footerタグでページのフッターを表現しています。フッターには、pタグで文章を表現しています。

このように、適切なタグを使用して構造化されたHTMLコードを記述することで、

ページの意味や構造を明確に表現することができます。

まとめ

今回はよく使いそうなHTMLタグを例を使い紹介しました。

まだまだ沢山タグはあります。

自分でも調べてみて、色々なタグを書いてみて下さい。

レッツチャレンジ!