HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】

May 6, 2026June 21, 2026

この記事でわかること

Web制作で本当によく使うHTMLタグを、基本構造／テキスト／リンク／画像／リスト／表／フォーム／メディアの用途別に整理
各タグのコードサンプル付き。コピーしてそのまま使える早見表
<strong>と<b>、classとidなど混同しやすいタグ・属性の使い分け
終了タグが不要な空要素（void element）の一覧と、SEOで効くタグの押さえどころ

公的情報源: 総務省「情報通信白書」（参照）／W3C「HTML Standard」（参照）

HTMLそのものを基礎から知りたい方は、先に概念をつかんでおくと理解が速くなります。

HTMLとは？初心者向け解説もあわせてどうぞ。

結論を先に書きます

HTMLタグとは、Webページの構造や見た目を定義する「命令文」です。タグでテキスト・画像・リンクなどを配置し、ブラウザがそれを解釈して画面に表示します。

HTML5で定義されているタグは約110種類。ただし実務で日常的に使うのは30〜40種類程度です。この記事で扱うタグを押さえれば、大半のWebページは組み立てられます。

この記事の要点

覚えるべきは全タグではなく「用途別の主要タグ30〜40個」
タグは意味（セマンティクス）で選ぶのが現在の標準。見た目はCSSで整える
見出し<h1>はページに1つ、alt属性は必ず設定——この2点はSEOにも直結
タグ名は小文字が標準。<br>などは終了タグ不要の空要素

この記事では、Web制作の現場でよく使うHTMLタグを用途別に解説します。コードサンプルはコピペで動く形にしてあるので、リファレンスとして手元に置いて使ってください。

HTMLの基本構造タグ

まず押さえたいのが、すべてのHTMLファイルに共通する骨組みのタグです。<!DOCTYPE html>から<body>までの並びは、どのページでもほぼ固定です。

<!DOCTYPE html>：HTML5の宣言（ファイル先頭）
<html>：ドキュメント全体を囲むルート要素
<head>：メタ情報（画面非表示）
<body>：実際に表示されるコンテンツ

各タグの役割

<!DOCTYPE html>はHTMLのバージョンを宣言するタグです。現在はHTML5の宣言として、この1行を先頭に置きます。

<html>はドキュメント全体を囲むルートタグです。lang属性で言語を指定します。<head>はタイトル・文字コード・CSS読み込みなどのメタ情報を入れる場所で、画面には表示されません。一方<body>には、実際にブラウザへ表示するコンテンツを書きます。

基本構造のテンプレート（コピペ用）

新規ページを作るときは、まず以下をコピーして書き始めると確実です。

<!DOCTYPE html> <html lang="ja"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>ページタイトル</title> </head> <body>   <h1>見出し</h1>   <p>本文テキスト</p> </body> </html>

構造をもっと詳しく知りたい方はHTMLの基本構造を徹底解説でDOCTYPE・html・head・bodyの役割を整理しています。

メタデータタグ（headタグ内）

<head>の中に書く、ページの情報をブラウザや検索エンジンに伝えるタグです。表示はされませんが、文字化け防止・スマホ対応・SEOに直結します。

<meta>

文字コード・レスポンシブ対応・ページ説明文などを指定します。最低限、文字コードとviewportは必須です。

<!-- 文字コードの指定 --> <meta charset="UTF-8">



<!-- レスポンシブ対応（スマホ表示） --> <meta name="viewport" content="width=device-width, initial-scale=1.0">



<!-- SEO：ページの説明文 --> <meta name="description" content="ページの説明文をここに記述します（120文字以内が目安）">

<title>

ブラウザのタブと検索結果に表示されるページタイトルです。SEOで重要な要素なので、ページ内容を端的に表す語を入れます。

<title>HTMLタグ一覧 | Webサイト制作ノート</title>

<link>

CSSファイルやファビコンなど、外部ファイルを読み込むタグです。終了タグは不要です。

<!-- CSSファイルの読み込み --> <link rel="stylesheet" href="https://example.com/style.css">



<!-- ファビコンの設定 --> <link rel="icon" href="https://example.com/favicon.ico">

セクション・レイアウトタグ

ページの大枠を意味のあるブロックに区切るタグです。<div>で何でも囲むのではなく、役割に合ったタグを選ぶと、検索エンジンや支援技術がページ構造を理解しやすくなります。

タグ	役割
	ページのヘッダー（ロゴ・ナビ）
	ナビゲーションメニュー
	メインコンテンツ（1ページに1回）
	テーマごとのまとまり
	独立した記事・投稿
	サイドバー・補足情報
	フッター（著作権・リンク）
`<div>`	意味を持たないグループ化

意味を持つタグ（<header>など）をセマンティックタグと呼びます。たとえばメインコンテンツは次のように囲みます。

<main>   <article>     <h2>記事タイトル</h2>     <p>記事の内容</p>   </article> </main>

<div>は特定の意味を持たないブロック要素のグループ化に使います。CSSでスタイルを当てる単位としてよく登場します。意味づけが必要な場面では、まずセマンティックタグを検討しましょう。

見出しタグ

<h1>〜<h6>の6段階があります。数字が小さいほど重要な見出しで、文章を階層構造に整理する役割を持ちます。

<h1>最上位の見出し（ページに1つ）</h1> <h2>大見出し</h2> <h3>中見出し</h3> <h4>小見出し</h4>

SEOで効く見出しの使い方

<h1>はページに1つだけ。メインテーマのキーワードを含める
<h2>〜<h3>で内容を階層構造に整理する
見た目の大きさで選ばず、文章の構造で選ぶ（サイズはCSSで調整）

見出しを正しく階層化すると、検索エンジンがページの論理構造を理解しやすくなります。装飾のために順番を飛ばす（<h1>の次にいきなり<h4>など）使い方は避けましょう。

テキストタグ

文章を組み立てる基本のタグです。<p>が中心で、強調や改行を補助的に組み合わせます。

タグ	役割
	段落
	一部だけスタイルを当てるインライン要素
	重要なテキスト（意味的な強調・太字）
	強調（斜体）
	強制改行（終了タグ不要）
	水平線・区切り（終了タグ不要）

<strong>と<b>は見た目が似ていますが、役割が違います。<strong>は「意味的に重要」を示すタグで、検索エンジンや読み上げ環境にも重要度が伝わります。単に太字にしたいだけなら<b>でも構いませんが、重要度を伝えたい場合は<strong>を選びます。

<p><strong>重要な情報</strong>はこのように強調します。</p> <p>テキストの<span class="accent">ここだけ</span>にスタイルを当てます。</p>

改行は<br>を使いますが、段落の区切りには<p>を使い、<br>の多用は避けるのが基本です。詳しい使い分けはHTMLの改行方法｜brタグとpタグの違いで整理しています。

リンクタグ

ページ同士をつなぐ<a>（アンカー）タグです。href属性にリンク先URLを指定します。Webの最も基本的な機能を担うタグです。

<!-- 通常のリンク --> <a href="https://example.com/">リンクテキスト</a>



<!-- 別タブで開くリンク --> <a href="https://example.com/" target="_blank" rel="noopener noreferrer">別タブで開く</a>



<!-- ページ内リンク（アンカーリンク） --> <a href="#section1">セクション1へ移動</a>

別タブで開くときの注意点

target="_blank"で別タブを開くときは、rel="noopener noreferrer"を一緒に付けます。リンク先から元ページを操作されるセキュリティリスクを防ぐためです。

属性の細かい使い分け（target・rel・メールリンクなど）はaタグの使い方｜リンクの書き方・target属性・rel属性で詳しく解説しています。

画像タグ

画像を表示する<img>タグです。srcに画像のパス、altに代替テキストを指定します。終了タグは不要です。

<!-- 基本的な書き方 --> <img src="https://example.com/image.jpg" alt="画像の説明文">



<!-- 幅・高さを指定 --> <img src="https://example.com/photo.jpg" alt="写真の説明" width="800" height="600">



<!-- 遅延読み込み（パフォーマンス改善） --> <img src="https://example.com/image.jpg" alt="説明" loading="lazy">

alt属性は必ず設定する

alt属性（代替テキスト）は、画像が表示できないときの代替になるだけでなく、検索エンジンが画像内容を理解する手がかりになります。SEO・アクセシビリティの両面で重要なので、原則として省略しません。

書き方・レスポンシブ対応・altの書き方はimgタグの使い方｜HTML画像表示の書き方・alt属性でさらに掘り下げています。

リストタグ

項目を並べるリストのタグです。順序の有無で<ul>と<ol>を使い分け、項目はすべて<li>で囲みます。

タグ	役割
+	順序なしリスト（・マーク）
+	番号付きリスト（1, 2, 3…）
+ +	定義リスト（用語と説明）

手順や順番のあるものは番号付きリスト、並列の項目は順序なしリストを使います。

<!-- 順序なしリスト --> <ul>   <li>HTML</li>   <li>CSS</li>   <li>JavaScript</li> </ul>



<!-- 番号付きリスト --> <ol>   <li>まずHTMLを学ぶ</li>   <li>次にCSSを学ぶ</li>   <li>最後にJavaScriptを学ぶ</li> </ol>

用語とその説明をセットで並べたいときは、定義リスト（<dl>）を使います。<dt>が用語、<dd>が説明です。

テーブルタグ

表を作成するタグ群です。<table>で全体を囲み、行・ヘッダーセル・データセルを組み合わせます。比較表や仕様一覧で活躍します。

<table>   <thead>     <tr>       <th>タグ名</th>       <th>説明</th>     </tr>   </thead>   <tbody>     <tr>       <td>p</td>       <td>段落テキスト</td>     </tr>   </tbody> </table>

各タグの役割は次のとおりです。

タグ役割

テーブル全体を囲む
ヘッダー行グループ
本文行グループ
テーブルの1行
ヘッダーセル（太字・中央揃え）
データセル



表の構造や見出しセルの作り方はtableタグの書き方｜HTMLテーブル（表）の作り方で基礎から解説しています。



フォームタグ



ユーザーが入力するフォームを作るタグ群です。<form>で全体を囲み、入力欄・ボタン・ラベルを組み合わせます。



タグ 役割
フォーム全体を囲む
入力欄（typeで種類を指定）
</code></td><td>複数行のテキスト入力</td></tr><tr><td><code><select></code> + <code><option></code></td><td>ドロップダウンメニュー</td></tr><tr><td><code><label></code></td><td>入力欄のラベル</td></tr><tr><td><code><button></code></td><td>クリック可能なボタン</td></tr></tbody></table></figure>



<p class="wp-block-paragraph"><code><input></code>は<code>type</code>属性で種類が変わる、フォームの主役です。</p>



<p class="wp-block-paragraph"><pre><code><!-- テキスト入力 --> <input type="text" name="name" placeholder="お名前"></p>



<p class="wp-block-paragraph"><!-- メールアドレス入力 --> <input type="email" name="email" placeholder="メールアドレス"></p>



<p class="wp-block-paragraph"><!-- 送信ボタン --> <input type="submit" value="送信する"> </code></pre></p>



<p class="wp-block-paragraph">入力欄には<code><label></code>を紐付けるのがおすすめです。<code>for</code>属性と<code>id</code>を一致させると、ラベルをクリックしても入力欄が選択でき、操作性とアクセシビリティが向上します。</p>



<p class="wp-block-paragraph"><pre><code><label for="name">お名前</label> <input type="text" id="name" name="name"> </code></pre></p>



<p class="wp-block-paragraph">複数行入力は<code><textarea></code>、選択肢は<code><select></code>と<code><option></code>、ボタンは<code><button></code>を使います。</p>



<h2 class="wp-block-heading">メディアタグ</h2>



<p class="wp-block-paragraph">動画・音声・外部コンテンツを埋め込むタグです。<code><video></code>と<code><audio></code>はHTML5で標準化され、プラグインなしで再生できます。</p>



<p class="wp-block-paragraph"><pre><code><!-- 動画 --> <video src="https://example.com/movie.mp4" controls width="640" height="360">   お使いのブラウザは動画に対応していません。 </video></p>



<p class="wp-block-paragraph"><!-- 音声 --> <audio src="https://example.com/sound.mp3" controls></audio> </code></pre></p>



<p class="wp-block-paragraph">YouTube動画やGoogle Mapsなど、外部ページを埋め込むときは<code><iframe></code>を使います。</p>



<p class="wp-block-paragraph"><pre><code><iframe width="560" height="315"   src="https://www.youtube.com/embed/VIDEO_ID"   title="動画タイトル"   allowfullscreen></iframe> </code></pre></p>



<h2 class="wp-block-heading">よく使うHTMLタグ一覧（早見表）</h2>



<p class="wp-block-paragraph">最後に、実務でよく使うタグを属性つきでまとめます。リファレンスとしてご活用ください。</p>



<figure class="wp-block-table" style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="font-size:0.85em;white-space:nowrap;"><thead><tr><th>タグ</th><th>役割</th><th>よく使う属性</th></tr></thead><tbody><tr><td><code><html></code></td><td>ルート要素</td><td><code>lang</code></td></tr><tr><td><code><head></code></td><td>メタ情報の格納</td><td>—</td></tr><tr><td><code><body></code></td><td>表示コンテンツ</td><td>—</td></tr><tr><td><code><meta></code></td><td>ページ情報</td><td><code>charset</code> / <code>name</code> / <code>content</code></td></tr><tr><td><code><title></code></td><td>ページタイトル</td><td>—</td></tr><tr><td><code><h1></code>〜<code><h6></code></td><td>見出し</td><td>—</td></tr><tr><td><code><p></code></td><td>段落</td><td>—</td></tr><tr><td><code><a></code></td><td>リンク</td><td><code>href</code> / <code>target</code></td></tr><tr><td><code><img></code></td><td>画像</td><td><code>src</code> / <code>alt</code> / <code>loading</code></td></tr><tr><td><code><ul></code> / <code><ol></code></td><td>リスト</td><td>—</td></tr><tr><td><code><table></code></td><td>テーブル</td><td>—</td></tr><tr><td><code><div></code></td><td>ブロックのグループ</td><td><code>class</code> / <code>id</code></td></tr><tr><td><code><span></code></td><td>インラインのグループ</td><td><code>class</code> / <code>id</code></td></tr><tr><td><code><strong></code></td><td>重要テキスト</td><td>—</td></tr><tr><td><code><form></code></td><td>フォーム</td><td><code>action</code> / <code>method</code></td></tr><tr><td><code><input></code></td><td>入力欄</td><td><code>type</code> / <code>name</code> / <code>placeholder</code></td></tr><tr><td><code><button></code></td><td>ボタン</td><td><code>type</code></td></tr><tr><td><code><header></code> / <code><footer></code></td><td>ヘッダー・フッター</td><td>—</td></tr><tr><td><code><nav></code> / <code><main></code></td><td>ナビ・メイン</td><td>—</td></tr></tbody></table></figure>



<p class="wp-block-paragraph">CSSと組み合わせると、これらのタグの見た目を自由に整えられます。次のステップとして<a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本・HTMLとの違い</a>もあわせて読むと、デザインまで一気通貫で理解が進みます。</p>



<h2 class="wp-block-heading">よくある質問</h2>



<p class="wp-block-paragraph">HTMLタグを学び始めた方から、現場でよく受ける質問をまとめました。</p>



<p class="wp-block-paragraph"><div class="qa-card"></p>



<h3 class="wp-block-heading">Q1：HTMLタグはいくつ覚えればいいですか？</h3>



<p class="wp-block-paragraph">HTML5では約110種類のタグが定義されていますが、すべてを覚える必要はありません。実務で頻繁に使うのは<span style="background:linear-gradient(transparent 60%,#fff462 60%);font-weight:bold;">30〜40種類程度</span>です。</p>



<p class="wp-block-paragraph">まずはこの記事で扱った基本構造・テキスト・リンク・画像・リスト・表・フォームのタグを押さえれば、大半のWebページは作れます。残りは必要になったときに調べれば十分です。</p>



<p class="wp-block-paragraph"></div></p>



<p class="wp-block-paragraph"><div class="qa-card"></p>



<h3 class="wp-block-heading">Q2：タグは大文字でも小文字でもいいですか？</h3>



<p class="wp-block-paragraph">HTML5では大文字・小文字どちらでも動作します。ただし<code><HTML></code>より<code><html></code>のように<strong>小文字を使うのが現在の標準</strong>です。</p>



<p class="wp-block-paragraph">チーム開発でもコードの統一性を保ちやすいため、特別な理由がなければ小文字で書きましょう。</p>



<p class="wp-block-paragraph"></div></p>



<p class="wp-block-paragraph"><div class="qa-card"></p>



<h3 class="wp-block-heading">Q3：終了タグが不要なタグはどれですか？</h3>



<p class="wp-block-paragraph"><code><br></code>・<code><hr></code>・<code><img></code>・<code><input></code>・<code><meta></code>・<code><link></code>などは、終了タグが不要な「空要素（void element）」です。</p>



<p class="wp-block-paragraph">これらは中身を持たないタグなので、開始タグだけで完結します。</p>



<p class="wp-block-paragraph"></div></p>



<p class="wp-block-paragraph"><div class="qa-card"></p>



<h3 class="wp-block-heading">Q4：classとidの違いは何ですか？</h3>



<p class="wp-block-paragraph"><code>class</code>は複数の要素に同じ名前を付けられます（例：カード一覧の全カードに<code>class="card"</code>）。一方<code>id</code>は、1ページ内で1つの要素にしか使えません（例：ページ内アンカーリンクの目的地）。</p>



<p class="wp-block-paragraph">CSSで複数要素をまとめてスタイリングするなら<code>class</code>、JavaScriptで特定の1要素を狙うなら<code>id</code>、と使い分けるのが基本です。</p>



<p class="wp-block-paragraph"></div></p>



<p class="wp-block-paragraph"><div class="qa-card"></p>



<h3 class="wp-block-heading">Q5：HTMLだけでデザインは作れますか？</h3>



<p class="wp-block-paragraph">HTMLは「構造」を作る言語で、見た目のデザインはCSSが担当します。HTMLだけでも文章や画像は表示できますが、色・余白・レイアウトを整えるにはCSSが必要です。</p>



<p class="wp-block-paragraph">役割を分けることで、構造とデザインを別々に管理でき、保守性が高まります。</p>



<p class="wp-block-paragraph"></div></p>



<h2 class="wp-block-heading">まとめ：用途別に「使うタグ」から覚える</h2>



<p class="wp-block-paragraph">最後にこの記事の要点を整理します。</p>



<p class="wp-block-paragraph"><div class="summary-box"> <strong>この記事のまとめ</strong> <ul class="box-list"> <li>HTMLタグは全部覚える必要はなく、<strong>用途別の主要30〜40個</strong>から押さえる</li> <li>タグは見た目でなく<strong>意味（セマンティクス）で選ぶ</strong>。見た目はCSSで整える</li> <li><code><h1></code>はページに1つ、画像の<code>alt</code>は必ず設定——この2点はSEOにも直結</li> <li>タグ名は<strong>小文字が標準</strong>。<code><br></code>などは終了タグ不要の空要素</li> <li>早見表をリファレンスとして手元に置き、書きながら覚えるのが最短</li> </ul> </div></p>



<p class="wp-block-paragraph">HTMLタグは、暗記するより「書きながら使い方を覚える」のが定着の近道です。この記事の早見表とコードサンプルを下敷きに、実際に手を動かしてみてください。</p>



<p class="wp-block-paragraph">タグの背景にある仕組みを理解したい方は<a href="https://awcs.org/learning/html/what-is-html/" target="_blank" rel="nofollow noopener noreferrer">HTMLとは？初心者向け解説</a>、デザインに進みたい方は<a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本</a>へ進むと、理解がさらに深まります。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">関連記事</h2>



<ul class="wp-block-list"><li><a href="https://awcs.org/learning/html/what-is-html/" target="_blank" rel="nofollow noopener noreferrer">HTMLとは？初心者向けにわかりやすく解説</a></li><li><a href="https://awcs.org/learning/html/basic-structure/" target="_blank" rel="nofollow noopener noreferrer">HTMLの基本構造を徹底解説</a></li><li><a href="https://awcs.org/learning/html/a-tag/" target="_blank" rel="nofollow noopener noreferrer">aタグの使い方｜リンクの書き方・target属性・rel属性</a></li><li><a href="https://awcs.org/learning/html/img-tag/" target="_blank" rel="nofollow noopener noreferrer">imgタグの使い方｜HTML画像表示の書き方・alt属性</a></li><li><a href="https://awcs.org/learning/html/table-tag/" target="_blank" rel="nofollow noopener noreferrer">tableタグの書き方｜HTMLテーブル（表）の作り方</a></li><li><a href="https://awcs.org/learning/css/what-is-css/" target="_blank" rel="nofollow noopener noreferrer">CSSとは？書き方の基本・HTMLとの違い</a></li></ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p class="wp-block-paragraph"><strong>免責事項</strong></p>


<!-- DISCLAIMER_FOOTER -->


<p class="wp-block-paragraph"><div class="disclaimer-box"> <p>※本記事はWeb制作の公開仕様と一般的な実装慣行をもとにした整理です。HTMLの仕様・推奨される書き方は更新される場合があるため、最新の正式情報はW3C／WHATWGの公式仕様をご確認のうえご判断ください。</p> </div></p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "mainEntityOfPage": {
 "@type": "WebPage",
 "@id": "https://awcs.org/learning/html/html-tag-list/"
 },
 "headline": "HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】",
 "description": "Web制作でよく使うHTMLタグを基本構造・テキスト・リンク・画像・リスト・表・フォーム・メディアの用途別にコードサンプル付きで解説。混同しやすいタグの使い分けと早見表つき。",
 "author": {
 "@type": "Person",
 "name": "Sato",
 "url": "https://awcs.org/profile/"
 },
 "publisher": {
 "@type": "Organization",
 "name": "Webサイト制作ノート",
 "url": "https://awcs.org/",
 "logo": {
 "@type": "ImageObject",
 "url": "https://awcs.org/wp-content/uploads/logo.png"
 }
 },
 "datePublished": "2026-05-14T09:00:00+09:00",
 "dateModified": "2026-06-19T09:00:00+09:00",
 "articleSection": "html",
 "keywords": "HTMLタグ 一覧, HTMLタグ 早見表, HTMLタグ 一覧 コピペ",
 "inLanguage": "ja-JP"
}
</script>



<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [
 {
 "@type": "ListItem",
 "position": 1,
 "name": "ホーム",
 "item": "https://awcs.org/"
 },
 {
 "@type": "ListItem",
 "position": 2,
 "name": "HTML学習",
 "item": "https://awcs.org/category/html/"
 },
 {
 "@type": "ListItem",
 "position": 3,
 "name": "HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】",
 "item": "https://awcs.org/learning/html/html-tag-list/"
 }
 ]
}
</script>



<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "FAQPage",
 "mainEntity": [
 {
 "@type": "Question",
 "name": "HTMLタグはいくつ覚えればいいですか？",
 "acceptedAnswer": {
 "@type": "Answer",
 "text": "HTML5では約110種類のタグが定義されていますが、すべてを覚える必要はありません。実務で頻繁に使うのは30〜40種類程度です。基本構造・テキスト・リンク・画像・リスト・表・フォームのタグを押さえれば、大半のWebページは作れます。"
 }
 },
 {
 "@type": "Question",
 "name": "タグは大文字でも小文字でもいいですか？",
 "acceptedAnswer": {
 "@type": "Answer",
 "text": "HTML5では大文字・小文字どちらでも動作しますが、小文字を使うのが現在の標準です。チーム開発でもコードの統一性を保ちやすいため、特別な理由がなければ小文字で書きましょう。"
 }
 },
 {
 "@type": "Question",
 "name": "終了タグが不要なタグはどれですか？",
 "acceptedAnswer": {
 "@type": "Answer",
 "text": "br・hr・img・input・meta・linkなどは、終了タグが不要な空要素（void element）です。これらは中身を持たないタグなので、開始タグだけで完結します。"
 }
 },
 {
 "@type": "Question",
 "name": "classとidの違いは何ですか？",
 "acceptedAnswer": {
 "@type": "Answer",
 "text": "classは複数の要素に同じ名前を付けられます（例：カード一覧の全カードにclass=cardを付ける）。一方idは1ページ内で1つの要素にしか使えません（例：ページ内アンカーリンクの目的地）。CSSで複数要素をまとめてスタイリングするならclass、JavaScriptで特定の1要素を狙うならidと使い分けます。"
 }
 },
 {
 "@type": "Question",
 "name": "HTMLだけでデザインは作れますか？",
 "acceptedAnswer": {
 "@type": "Answer",
 "text": "HTMLは構造を作る言語で、見た目のデザインはCSSが担当します。HTMLだけでも文章や画像は表示できますが、色・余白・レイアウトを整えるにはCSSが必要です。役割を分けることで、構造とデザインを別々に管理でき、保守性が高まります。"
 }
 }
 ]
}
</script>
		</div>
		<div class="p-articleFoot">
	<div class="p-articleMetas -bottom">
			<div class="p-articleMetas__termList c-categoryList">
					<a class="c-categoryList__link hov-flash-up" href="https://awcs.org/./learning/html/" data-cat-id="5">
				HTML			</a>
			</div>
	<div class="p-articleMetas__termList c-tagList">
					<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/html/" data-tag-id="37">
				html			</a>
					<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/html-%e3%82%bf%e3%82%b0%e4%b8%80%e8%a6%a7/" data-tag-id="40">
				html タグ一覧			</a>
					<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/html%e3%82%bf%e3%82%b0/" data-tag-id="38">
				htmlタグ			</a>
					<a class="c-tagList__link hov-flash-up" href="https://awcs.org/tag/html%e3%83%aa%e3%83%95%e3%82%a1%e3%83%ac%e3%83%b3%e3%82%b9/" data-tag-id="39">
				htmlリファレンス			</a>
			</div>
	</div>
</div>
<div class="c-shareBtns -bottom -style-btn-small">
			<div class="c-shareBtns__message">
			<span class="__text">
				よかったらシェアしてね！			</span>
		</div>
		<ul class="c-shareBtns__list">
							<li class="c-shareBtns__item -facebook">
				<a class="c-shareBtns__btn hov-flash-up" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Fhtml-tag-list%2F" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;" target="_blank" role="button" tabindex="0">
					<i class="snsicon c-shareBtns__icon icon-facebook" aria-hidden="true"></i>
				</a>
			</li>
							<li class="c-shareBtns__item -twitter-x">
				<a class="c-shareBtns__btn hov-flash-up" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Fhtml-tag-list%2F&text=HTML%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%80%90%E5%85%A8%E3%82%BF%E3%82%B0%E8%A7%A3%E8%AA%AC%E3%83%BB%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E5%AE%8C%E5%85%A8%E7%89%88%E3%80%91" title="X(Twitter)でシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;" target="_blank" role="button" tabindex="0">
					<i class="snsicon c-shareBtns__icon icon-twitter-x" aria-hidden="true"></i>
				</a>
			</li>
							<li class="c-shareBtns__item -hatebu">
				<a class="c-shareBtns__btn hov-flash-up" href="//b.hatena.ne.jp/add?mode=confirm&url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Fhtml-tag-list%2F" title="はてなブックマークに登録" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=1000');return false;" target="_blank" role="button" tabindex="0">
					<i class="snsicon c-shareBtns__icon icon-hatebu" aria-hidden="true"></i>
				</a>
			</li>
							<li class="c-shareBtns__item -pocket">
				<a class="c-shareBtns__btn hov-flash-up" href="https://getpocket.com/edit?url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Fhtml-tag-list%2F&title=HTML%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%80%90%E5%85%A8%E3%82%BF%E3%82%B0%E8%A7%A3%E8%AA%AC%E3%83%BB%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E5%AE%8C%E5%85%A8%E7%89%88%E3%80%91" title="Pocketに保存" target="_blank" role="button" tabindex="0">
					<i class="snsicon c-shareBtns__icon icon-pocket" aria-hidden="true"></i>
				</a>
			</li>
									<li class="c-shareBtns__item -line">
				<a class="c-shareBtns__btn hov-flash-up" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fawcs.org%2Flearning%2Fhtml%2Fhtml-tag-list%2F&text=HTML%E3%82%BF%E3%82%B0%E4%B8%80%E8%A6%A7%E3%80%90%E5%85%A8%E3%82%BF%E3%82%B0%E8%A7%A3%E8%AA%AC%E3%83%BB%E3%82%B3%E3%83%94%E3%83%9A%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E5%AE%8C%E5%85%A8%E7%89%88%E3%80%91" title="LINEに送る" target="_blank" role="button" tabindex="0">
					<i class="snsicon c-shareBtns__icon icon-line" aria-hidden="true"></i>
				</a>
			</li>
												<li class="c-shareBtns__item -copy">
				<button class="c-urlcopy c-plainBtn c-shareBtns__btn hov-flash-up" data-clipboard-text="https://awcs.org/learning/html/html-tag-list/" title="URLをコピーする">
					<span class="c-urlcopy__content">
						<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-copy c-shareBtns__icon -to-copy" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M38,5.5h-9c0-2.8-2.2-5-5-5s-5,2.2-5,5h-9c-2.2,0-4,1.8-4,4v33c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4v-33
				C42,7.3,40.2,5.5,38,5.5z M24,3.5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S22.9,3.5,24,3.5z M38,42.5H10v-33h5v3c0,0.6,0.4,1,1,1h16
				c0.6,0,1-0.4,1-1v-3h5L38,42.5z"/><polygon points="24,37 32.5,28 27.5,28 27.5,20 20.5,20 20.5,28 15.5,28 "/></svg>						<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-copied c-shareBtns__icon -copied" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M38,5.5h-9c0-2.8-2.2-5-5-5s-5,2.2-5,5h-9c-2.2,0-4,1.8-4,4v33c0,2.2,1.8,4,4,4h28c2.2,0,4-1.8,4-4v-33
				C42,7.3,40.2,5.5,38,5.5z M24,3.5c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S22.9,3.5,24,3.5z M38,42.5H10v-33h5v3c0,0.6,0.4,1,1,1h16
				c0.6,0,1-0.4,1-1v-3h5V42.5z"/><polygon points="31.9,20.2 22.1,30.1 17.1,25.1 14.2,28 22.1,35.8 34.8,23.1 "/></svg>					</span>
				</button>
				<div class="c-copyedPoppup">URLをコピーしました！</div>
			</li>
			</ul>

	</div>
		<div id="after_article" class="l-articleBottom">
			<ul class="p-pnLinks -style-normal">
			<li class="p-pnLinks__item -prev">
				<a href="https://awcs.org/cms/what-is-canva/" rel="prev" class="p-pnLinks__link">
				<span class="p-pnLinks__title">Canvaとは？使い方・無料でできること・有料版との違いを解説</span>
	</a>
			</li>
				<li class="p-pnLinks__item -next">
				<a href="https://awcs.org/cms/nocode-tools-comparison/" rel="next" class="p-pnLinks__link">
				<span class="p-pnLinks__title">ノーコードツール比較5選｜Wix・STUDIO・Bubble・Notionの選び方</span>
	</a>
			</li>
	</ul>
<section class="l-articleBottom__section -author">
	<h2 class="l-articleBottom__title c-secTitle">
		この記事を書いた人	</h2>
	<div class="p-authorBox">
		<div class="p-authorBox__l">
			<img alt='Sato Daisukeのアバター' src='https://secure.gravatar.com/avatar/a9daa7ebccd9865edb60abfba5fa013927b585d0a352ffe49690cf070a60867b?s=100&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/a9daa7ebccd9865edb60abfba5fa013927b585d0a352ffe49690cf070a60867b?s=200&d=mm&r=g 2x' class='avatar avatar-100 photo' height='100' width='100' loading='lazy' decoding='async'/>			<a href="https://awcs.org/author/sato/" class="p-authorBox__name hov-col-main u-fz-m">
				Sato Daisuke			</a>
					</div>
		<div class="p-authorBox__r">
							<p class="p-authorBox__desc u-thin">
					大学卒業後、Web制作会社に入社し、コーポレートサイトやECサイト、キャンペーンサイトなど幅広い案件を担当。企画・設計からデザインディレクション、進行管理、納品後の運用改善までトータルで携わる。クライアントの課題整理から戦略立案まで踏み込む提案力と、円滑なチームマネジメントに定評がある。<br />
<br />
・Webサイト構築の企画・情報設計<br />
・UI/UX改善提案<br />
・制作進行管理・品質管理<br />
・マーケティング視点での運用改善<br />
<br />
Webサイトは“つくって終わり”ではなく、運用しながら成果を伸ばしていくものだと考えています。お客様のビジネスとユーザーの両方にとって価値のあるWebサイトを、戦略から実装まで全力でサポートいたします。				</p>
											</div>
	</div>
</section>
<section class="l-articleBottom__section -related">
	<h2 class="l-articleBottom__title c-secTitle">関連記事</h2><ul class="p-postList p-relatedPosts -type-card"><li class="p-postList__item">
	<a href="https://awcs.org/learning/html/table-tag/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="158"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_table-tag-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">tableタグの書き方｜HTMLテーブル（表）の作り方を基礎から解説</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2026-05-18" aria-label="公開日">May 18, 2026</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/html-line-break/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="158"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_html-line-break-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">HTMLの改行方法｜brタグとpタグの違い・正しい使い分けを解説</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2026-05-17" aria-label="公開日">May 17, 2026</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/img-tag/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="158"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_img-tag-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">imgタグの使い方｜HTML画像表示の書き方・alt属性・レスポンシブ対応</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2026-05-16" aria-label="公開日">May 16, 2026</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/a-tag/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="158"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-300x158.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-300x158.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-1024x538.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-768x403.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag.jpg 1200w" data-aspectratio="300/158" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/awcs-org_a-tag-300x158.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">aタグの使い方｜リンクの書き方・target属性・rel属性を徹底解説</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2026-05-13" aria-label="公開日">May 13, 2026</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/what-is-html/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="171"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2026/05/what-is-html-300x171.jpg" data-srcset="https://awcs.org/wp-content/uploads/2026/05/what-is-html-300x171.jpg 300w, https://awcs.org/wp-content/uploads/2026/05/what-is-html-1024x585.jpg 1024w, https://awcs.org/wp-content/uploads/2026/05/what-is-html-768x439.jpg 768w, https://awcs.org/wp-content/uploads/2026/05/what-is-html.jpg 1344w" data-aspectratio="300/171" ><noscript><img src="https://awcs.org/wp-content/uploads/2026/05/what-is-html-300x171.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">HTMLとは？初心者向けにわかりやすく解説【基本構造・書き方】</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2026-05-04" aria-label="公開日">May 4, 2026</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/display/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="200"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-1024x683.jpg 1024w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-768x512.jpg 768w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-1536x1024.jpg 1536w, https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-2048x1366.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2025/08/discover-streamlined-representation-web-server-concepts-information-data-captivating-300x200.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">HTMLがブラウザに表示される仕組み｜DNS・HTTPリクエスト・レンダリングを解説</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2025-08-14" aria-label="公開日">August 14, 2025</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/list/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="200"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-1024x684.jpg 1024w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-768x513.jpg 768w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-1536x1025.jpg 1536w, https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-2048x1367.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2025/08/html-tekisutowo-shi-yongshitafurokuraminkuno-bei-jing-300x200.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">HTMLタグ一覧【完全版】基本から応用タグをカテゴリ別に解説</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2025-08-14" aria-label="公開日">August 14, 2025</time></div>
</div>		</div>
	</a>
</li>
<li class="p-postList__item">
	<a href="https://awcs.org/learning/html/basis/" class="p-postList__link">
		<div class="p-postList__thumb c-postThumb">
			<figure class="c-postThumb__figure">
			<img width="300" height="200"  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" class="c-postThumb__img u-obf-cover lazyload" sizes="(min-width: 600px) 320px, 50vw" data-src="https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-300x200.jpg" data-srcset="https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-300x200.jpg 300w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-1024x683.jpg 1024w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-768x512.jpg 768w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-1536x1024.jpg 1536w, https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-2048x1366.jpg 2048w" data-aspectratio="300/200" ><noscript><img src="https://awcs.org/wp-content/uploads/2025/08/closeup-printed-html-code-300x200.jpg" class="c-postThumb__img u-obf-cover" alt=""></noscript>			</figure>
		</div>
		<div class="p-postList__body">
			<div class="p-postList__title">HTML入門｜はじめてのHTML・基本の書き方と学習ロードマップ</div>
				<div class="p-postList__meta"><div class="p-postList__times c-postTimes u-thin">
	<time class="c-postTimes__posted icon-posted" datetime="2025-08-07" aria-label="公開日">August 7, 2025</time></div>
</div>		</div>
	</a>
</li>
</ul></section>
		</div>
			</article>
</main>
</div>
<footer id="footer" class="l-footer">
	<div class="l-footer__inner">
			<div class="l-footer__foot">
			<div class="l-container">
			<ul class="l-footer__nav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-370"><a href="https://awcs.org/profile/">運営者プロフィール</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-371"><a href="https://awcs.org/contact/">お問い合わせ</a></li>
</ul>			<p class="copyright">
				<span lang="en">©</span>
				WEB制作ノート.			</p>
					</div>
	</div>
</div>
</footer>
<div class="p-fixBtnWrap">
	
			<button id="pagetop" class="c-fixBtn c-plainBtn hov-bg-main" data-onclick="pageTop" aria-label="ページトップボタン" data-has-text="">
			<i class="c-fixBtn__icon icon-chevron-up" role="presentation"></i>
					</button>
	</div>

<div id="search_modal" class="c-modal p-searchModal">
	<div class="c-overlay" data-onclick="toggleSearch"></div>
	<div class="p-searchModal__inner">
		<form role="search" method="get" class="c-searchForm" action="https://awcs.org/" role="search">
	<input type="text" value="" name="s" class="c-searchForm__s s" placeholder="検索" aria-label="検索ワード">
	<button type="submit" class="c-searchForm__submit icon-search hov-opacity u-bg-main" value="search" aria-label="検索を実行する"></button>
</form>
		<button class="c-modal__close c-plainBtn" data-onclick="toggleSearch">
			<i class="icon-batsu"></i> 閉じる		</button>
	</div>
</div>
<div id="index_modal" class="c-modal p-indexModal">
	<div class="c-overlay" data-onclick="toggleIndex"></div>
	<div class="p-indexModal__inner">
		<div class="p-toc post_content -modal"><span class="p-toc__ttl">目次</span></div>
		<button class="c-modal__close c-plainBtn" data-onclick="toggleIndex">
			<i class="icon-batsu"></i> 閉じる		</button>
	</div>
</div>
</div><!--/ #all_wrapp-->
<div class="l-scrollObserver" aria-hidden="true"></div><script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/swell_child/*","/wp-content/themes/swell/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="swell_script-js-extra">
var swellVars = {"siteUrl":"https://awcs.org/","restUrl":"https://awcs.org/wp-json/wp/v2/","ajaxUrl":"https://awcs.org/wp-admin/admin-ajax.php","ajaxNonce":"b3ee912f63","isLoggedIn":"","useAjaxAfterPost":"","useAjaxFooter":"","usePvCount":"1","isFixHeadSP":"1","tocListTag":"ol","tocTarget":"h3","tocPrevText":"\u524d\u306e\u30da\u30fc\u30b8\u3078","tocNextText":"\u6b21\u306e\u30da\u30fc\u30b8\u3078","tocCloseText":"\u6298\u308a\u305f\u305f\u3080","tocOpenText":"\u3082\u3063\u3068\u898b\u308b","tocOmitType":"ct","tocOmitNum":"15","tocMinnum":"2","tocAdPosition":"before","offSmoothScroll":"","psNum":"5","psNumSp":"2","psSpeed":"1500","psDelay":"5000"};
//# sourceURL=swell_script-js-extra
</script>
<script id="swell_script-js" src="https://awcs.org/wp-content/themes/swell/build/js/main.min.js?ver=2.16.0"></script>
<script id="swell_lazysizes-js" src="https://awcs.org/wp-content/themes/swell/assets/js/plugins/lazysizes.min.js?ver=5.3.1"></script>
<script id="swell_set_fix_header-js" src="https://awcs.org/wp-content/themes/swell/build/js/front/set_fix_header.min.js?ver=2.16.0"></script>
<script id="clipboard-js" src="https://awcs.org/wp-includes/js/clipboard.min.js?ver=2.0.11"></script>
<script id="swell_set_urlcopy-js" src="https://awcs.org/wp-content/themes/swell/build/js/front/set_urlcopy.min.js?ver=2.16.0"></script>

<!-- JSON-LD @SWELL -->
<script type="application/ld+json">{"@context": "https://schema.org","@graph": [{"@type":"Organization","@id":"https:\/\/awcs.org\/#organization","name":"WEB制作ノート","url":"https:\/\/awcs.org\/","logo":{"@type":"ImageObject","url":"https:\/\/awcs.org\/wp-content\/uploads\/2026\/01\/awcs-logo.png","width":850,"height":180}},{"@type":"WebSite","@id":"https:\/\/awcs.org\/#website","url":"https:\/\/awcs.org\/","name":"WEB制作ノート","description":"Webディレクター10年・300案件超の観察者が、Webサイト制作費の相場・コーポレートサイトのリニューアル・WordPress\/SWELL選びを現場目線で解説。"},{"@type":"WebPage","@id":"https:\/\/awcs.org\/learning\/html\/html-tag-list\/","url":"https:\/\/awcs.org\/learning\/html\/html-tag-list\/","name":"HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】","description":"この記事でわかること Web制作で本当によく使うHTMLタグを、基本構造／テキスト／リンク／画像／リスト／表／フォーム／メディアの用途別に整理 各タグのコードサンプル付き。コピーしてそのまま使える早見表 <strong>と<b>、classとidなど混同しやすいタグ・属性の使い分け 終了タグが不要な空要素（void element）の一覧と、SEOで効くタグの押さえどころ 公的情報源: 総務省「情報通信白書」（参照）／W3C「HTML Standard」（参照） HTMLそのものを基礎から知りたい方は、先に概念をつかんでおくと理解が速くなります。 HTMLとは？初心者向","isPartOf":{"@id":"https:\/\/awcs.org\/#website"}},{"@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/awcs.org\/learning\/html\/html-tag-list\/"},"headline":"HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】","image":{"@type":"ImageObject","url":"https:\/\/awcs.org\/wp-content\/uploads\/2026\/05\/html-tag-list.jpg"},"datePublished":"2026-05-06T09:00:00+0000","dateModified":"2026-06-21T00:38:02+0000","author":{"@type":"Person","@id":"https:\/\/awcs.org\/learning\/html\/html-tag-list\/#author","name":"Sato Daisuke","url":"https:\/\/awcs.org\/"},"publisher":{"@id":"https:\/\/awcs.org\/#organization"}},{"@type":"BreadcrumbList","@id":"https:\/\/awcs.org\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/awcs.org\/.\/learning\/","name":"Web制作基礎"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/awcs.org\/.\/learning\/html\/","name":"HTML"}}]}]}</script>
<!-- / JSON-LD @SWELL -->
</body></html>