HTMLタグ入門：初心者向けガイド
ウェブページの構築には、HTML（HyperText Markup Language）の知識が欠かせません。HTMLは、ウェブページにテキスト、画像、リンクなどの構造を与えるためのマークアップ言語です。
このガイドでは、HTML文書を作成する際に最低限知っておくべき基本的なタグについて、初心者の方でも理解しやすいように説明します。
現代ではAIの技術も利用できるため、HTMLの基本を最低限理解しておくだけで、簡単に見栄えの良いウェブサイトを作成することができます。
HTMLとは？
HTMLは、テキストに「タグ」と呼ばれる特別なコードを追加することで、ウェブページの構造を定義します。タグは通常、開始タグ`<タグ名>`と終了タグ`</タグ名>`のペアで使われ、ウェブページのさまざまな要素を囲みます。
基本的なHTMLタグ(ブログ)
`<h2>`から`<h6>`
ページ内の見出しを定義します。`<h2>`は最も大きな見出しで、`<h6>`へ行くにつれて小さくなります。適切に使用することで、コンテンツの構造を明確にできます。
<h2>これは大きな見出しです</h2> <h3>これは少し小さな見出しです</h3>`<p>`
テキストの段落を定義します。読みやすいテキストブロックを作成するために使用されます。
これは段落です。
↑
実際のソースコードは
<p>これは段落です。</p>`<a>`
ハイパーリンクを作成します。`href`属性を用いてリンク先のURLを指定し、他のページへのナビゲーションを提供します。
このリンクはトップページに飛びます
↑
実際のソースコードは
<a href="https://www.hitori-web.work/">このリンクはトップページに飛びます</a>`<img>`
画像をウェブページに埋め込みます。`src`属性で画像の場所を指定し、`alt`属性で画像が表示されない時の代替テキストを提供します。
<img src="画像のURL" alt="画像の説明">`<ul>`, `<ol>`, `<li>`
リストを作成します。`<ul>`は番号なしリスト、`<ol>`は番号付きリストで、`<li>`はリストアイテムです。
- リンゴ
- バナナ
- チェリー
↑実際の
<ul><li>リンゴ</li><li>バナナ</li><li>チェリー</li></ul>- 起床
- 朝食
- 出勤
<ol><li>起床</li><li>朝食</li><li>出勤</li></ol>`<div>`と`<span>`
汎用のコンテナです。`<div>`はブロックレベル要素で、大きな構造を作るのに使われ、`<span>`はインライン要素で、テキストの一部に特別なスタイルを適用するのに使用します。
基本的なHTMLタグ(全体)
`<!DOCTYPE html>`
文書がHTML5で書かれていることをブラウザに伝える宣言です。これはHTML文書の最初に置かれます。
`<html>`
HTML文書の全体を囲むルート要素です。文書の全内容がこのタグの中に入ります。
`<head>`
ウェブページのメタデータ（情報）が含まれる部分です。ページのタイトルやスタイルシートへのリンクなど、ページの設定に関する情報がここに配置されます。
`<title>`
ブラウザのタブに表示されるウェブページのタイトルを設定します。このタグは`<head>`セクション内にあります。
`<meta>`
文書に関する情報や、ブラウザへの指示を設定します。例えば、`<meta charset=”UTF-8″>`は文書の文字コードをUTF-8に指定します。
`<body>`
ウェブページの可視的なコンテンツを含むメイン部分です。テキスト、画像、リンクなどがここに配置されます。
応用、組み合わせ
こちらをカスタマイズすることで、ホームページができます。
まとめ
HTMLはウェブ開発の基礎であり、上記のタグはウェブページの基本的な構造を作る上で非常に重要です。
これらの基本を理解し、適切に使いこなすことができれば、より複雑なウェブページの構築に向けた第一歩を踏み出すことができます。
