今回は、HTMLのさまざまなタグについてまとめました。
HTMLは、Web開発をするにあたって欠かせない知識となっています。
ぜひ最後までお読みください！
【HTML】さまざまなタグ | Part 2
1. HTMLとは
HTMLとは、マークアップ言語の1つです。
正式名称を「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」といいます。
1-1. HTMLでマークアップする理由
HTMLでマークアップする理由には、以下のようなものがあります。
・コンピュータに意味を伝えるため
・Webアクセシビリティため
・検索エンジンに正確な情報を提示する(SEO対策の)ため
HTMLは、装飾や見た目を整えるために使用するのではなく、文章の意味に基づいてマークアップするようにしましょう。
2. タグとは
タグとは、テキストに意味を与える目印のことです。
タグの種類を示す文字や記号を、< と >で括った部分を指します。
タグは基本的に、以下のように書きます。
<タグ名>テキスト<タグ名>先頭のタグを「開始タグ」といい、末尾のタグを「終了タグ」といいます。
開始タグから終了タグまでのひとかたまりを「要素」といいます。
基本的には開始タグと終了タグはセットで記述されますが、例外もあります。
2-1. 属性とは
属性とは、HTMLの要素に追加する情報のことです。
すべてのタグに属性があるわけではありません。
属性は基本的に、以下のように書きます。
すべてのタグに属性があるわけではありません。
属性は基本的に、以下のように書きます。
<タグ名 追加の情報=”内容”>テキスト<タグ名>3. 文章のかたまりを定義するタグ
文章のかたまりを定義するタグには、以下のようなものがあります。
3-1. divタグ
divタグは、デザインやレイアウトのために文章のかたまりを定義するタグです。
divタグには特別な意味はありませんが、 divタグで囲まれた範囲を一つのグループとしてまとめることができます。
記述例は以下のとおりです。
divタグには特別な意味はありませんが、 divタグで囲まれた範囲を一つのグループとしてまとめることができます。
記述例は以下のとおりです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=’test’>テスト</div>
</body>
</html>3-2. spanタグ
spanタグは、divタグと同様にデザインやレイアウトのために文章のかたまりを定義するタグです。
spanタグにも特別な意味はありません。
記述例は以下のとおりです。
spanタグにも特別な意味はありません。
記述例は以下のとおりです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class=’test’>テスト</span>
</body>
</html>
3-3. divタグとspanタグの違い
divタグとspanタグの違いには、以下のようなものがあります。
divタグ
・display: block
・前後に改行が入る
・幅・高さ・余白を指定できる
spanタグ
・display: inline
・前後に改行が入らない
・幅・高さ・余白を指定できない
3-4. hrタグ
hrタグは、段落レベルのテーマの区切りをあらわすタグです。
話の場面の切り替えや、話題の転換などに使用します。
終了タグはありません。
hrは、「Horizontal Rule(水平線)」の頭文字をとったものです。
記述例は以下のとおりです。
話の場面の切り替えや、話題の転換などに使用します。
終了タグはありません。
hrは、「Horizontal Rule(水平線)」の頭文字をとったものです。
記述例は以下のとおりです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>hrタグは段落レベルのテーマの区切りをあらわすタグです。</p>
・・・省略
<hr>
<p>hrタグの使用例は以下のとおりです。</p>
</body>
</html>
4. テキストに意味をもたせるタグ
テキストに意味をもたせるタグには、以下のようなものがあります。
4-1. emタグ
emタグは、テキストの中で強調したい部分に使用するタグです。
emは「emphasis(強調)」の略です。
記述例は以下のとおりです。
emは「emphasis(強調)」の略です。
記述例は以下のとおりです。
<body>
<p>この文章は<em>emタグ</em>の使用例です。</p>
</body>
4-2. strongタグ
strongタグは、内容の重要性や重大性、緊急性が高いテキストをあらわすタグです。
記述例は以下のとおりです。
記述例は以下のとおりです。
<body>
<p><strong>内容を保存せずにリロードしないでください！</strong></p>
</body>
4-3. emタグとstrongタグの違い
emタグとstrongタグには、以下のような違いがあります。
・emタグ：テキストの中で「強調したい部分」に使用する
・strongタグ：テキストの中で「重要性や緊急性が高い部分」に使用する
・emタグ：テキストの中で「強調したい部分」に使用する
・strongタグ：テキストの中で「重要性や緊急性が高い部分」に使用する
4-4. codeタグ
codeタグは、テキストがプログラムなどのコードであることをあらわすタグです。
HTMLやCSS、JavaScriptなど、どんな言語にも使用できます。
記述例は以下のとおりです。
HTMLやCSS、JavaScriptなど、どんな言語にも使用できます。
記述例は以下のとおりです。
<body>
<p><code>console.log("Hello World")</code></p>
</body>
4-5. preタグ
preタグは、整形済みのテキストをあらわすタグです。
preタグで囲まれたテキストは、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。
おもにcodeタグと組み合わせて使用されます。
preは「preformatted text」の略です。
記述例は以下のとおりです。
preタグで囲まれたテキストは、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。
おもにcodeタグと組み合わせて使用されます。
preは「preformatted text」の略です。
記述例は以下のとおりです。
<body>
<pre>
<code>
const myFunc = function(num) {
return num++;
};
</code>
</pre>
</body>
4-6. smallタグ
smallタグは、著作権表示や法的表記のような、注釈や小さく表示される文をあらわすタグです。
「税込み」や「送料込み」などの表示にも使用できます。
記述例は以下のとおりです。
「税込み」や「送料込み」などの表示にも使用できます。
記述例は以下のとおりです。
<body>
・・・省略
<p>3,300円<small>(税込み)</small></p>
・・・省略
<small>©2023 テストサンプル株式会社</small>
</body>
</html>
5. おわりに
今回は、HTMLのさまざまなタグについて解説しました。
「もっとHTMLについて知りたい！」という方は、ぜひ参考記事を読んだり、ご自身で調べてみたりしてください。
また、HTMLと同じくWeb開発に重要なCSSやJavaScriptについても学んでみてください。
参考記事：https://developer.mozilla.org/ja/docs/Web/HTML/Element