初心者は最低限覚えよう！HTMLタグ5選：分かりやすくタグについて解説

こんにちは、でじぼうです。

HTMLを学び始めたばかりの初心者の方に向けて、基礎となるHTMLタグのうち特に重要な5つを解説します。これらのタグはWebページの構造やコンテンツのマークアップに欠かせません！

でじぼう

この記事は下記ような方におすすめ！
・HTMLをこれから学ぶ
・HTMLの全体の構成がわからない

2023年のプログラミング言語ランキング一覧：これから言語を学ぶ初心者必見！

【意外と知らないIT用語】ドメインって何？お名前.com

HTMLとは
最低限押さえたいHTMLタグ 5選
おわりに

HTMLとは

HTMLは、ウェブページを作るための言語です。テキストベースでタグを使って要素を作ります。

例えば、<h1>は見出しを表し、<p>は段落を表します。また、画像を表示するには<img>タグを使用します。

HTMLはウェブ開発の基礎であり、インターネット上で情報を共有するために重要です。

でじぼう

CSSを使ってスタイルをつけたり、JavaScriptを使って動きを追加することもできるよ！

最低限押さえたいHTMLタグ 5選

<html>タグ

<html>要素は、HTML文書の最上位の要素です。簡単に言うと、HTML文書全体を囲んでいる枠と考えることができます。

html

<!DOCTYPE html>
<html>
　<head>
　　<!– ページのメタデータやスタイルシートのリンクなど –>
　</head>
　<body>
　　<!– ページの表示コンテンツ –>
　</body>
</html>

<html>要素は<!DOCTYPE html>宣言に続いて開始され、<head>要素と<body>要素を内包します。<head>要素はページのメタデータ（タイトルやスタイルシートのリンク、スクリプトなど）を含み、<body>要素は実際のコンテンツや表示される要素を含みます。

HTML文書は常に<html>要素で囲まれている必要があります。

※メタデータ：データに関する情報を表す情報のこと。ウェブページでは、ページのタイトル、文字エンコーディング、キーワードや説明、著者情報、スタイルシートのリンクなどが含まれる。これらの情報は、ブラウザや検索エンジンがウェブページを解釈し、適切に表示や検索結果に反映するために使用される。

<head>タグ

<head>要素はタイトルやスタイルシートのリンクなど、ページに関する追加情報を記載します。

以下は、<head>要素内で<title>：タイトルと、<link>：スタイルシートのリンクを使用した例です。

html

<head>
　<title>ウェブページのタイトル</title>
　<link rel=“stylesheet” href=“styles.css”>
</head>

HTMLのheadタグ内！使用するタグ・属性一覧

HTMLのheadタグ・属性ガイド。メタデータ、エンコーディング、外部スクリプトやスタイルシートの指定方法などを詳しく解説！

<body>タグ

<body>要素はHTML文書の中で、実際のコンテンツや表示される要素を記載します。ブラウザは<body>要素内の要素を解釈し、画面に表示します。

以下は、<body>要素内にテキストと画像を含む例です。

html

<body>
　<h1>タイトル</h1>
　<p>ここに文章が入ります。</p>
　<img src=“image.jpg” alt=“イメージ”>
</body>

6か月間毎日五時間で売り切れ閉店のお餅屋えにかいたもち

<a>タグ

<a>タグはハイパーリンクを作成するために使用されます。他のウェブページや同じページ内の特定の場所にリンクすることができます。

【他のウェブページへのリンク】
下記のコードでは、href属性にリンク先のURLを指定しています。ユーザーがリンクをクリックすると、指定されたURLのウェブページに移動します。

html

<a href=“https://www.example.com”>他のウェブページへのリンク</a>

【同じページ内の特定の場所へのリンク（アンカーリンク）】
下記の例では、href属性に#section1というアンカーを指定しています。ユーザーがリンクをクリックすると、同じページ内のid属性がsection1である要素（ここでは<h2>タグ）にジャンプします。

html

<a href=“#section1”>セクション1へのリンク</a>
<h2 id=“section1”>セクション1</h2>

<img>タグ

<img>タグは画像を表示するために使用されます。

以下のような属性を指定して使用します。

属性	用途
src	表示する画像のファイルパスを指定。相対パスや絶対パスのいずれかを使用。
alt	画像の代替テキストを指定。画像が表示されなかった場合や、スクリーンリーダーが読み上げる際に代わりの情報として使用。
width	画像の幅をピクセル単位で指定（オプション）
height	画像の高さをピクセル単位で指定（オプション）

下記の例では、src属性に画像ファイルのパスを指定しています。また、alt属性には画像の代替テキストを設定し、widthとheight属性で画像の幅と高さを指定しています。これにより、指定した画像が表示されます。なお、<img>タグは単独で使用される自己完結型のタグであるため、終了タグは不要です。

html

<img src=“path/to/image.jpg” alt=“代替テキスト” width=“300” height=“200”>