40代高卒者が製造業からIT転職する【HTML】
こんにちは、フローです。
今回は、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タグを例を使い紹介しました。
まだまだ沢山タグはあります。
自分でも調べてみて、色々なタグを書いてみて下さい。
レッツチャレンジ！
この記事が気に入ったらサポートをしてみませんか？