はじめに
この記事を読めば、HTMLタグの使い方を習得して、独自のウェブページを作成することができるようになります。
HTMLタグ一覧を初心者向けに徹底解説し、使い方や注意点、カスタマイズ方法をサンプルコード付きで紹介します。
●HTMLタグの基本
まずはHTMLタグの基本を押さえましょう。
HTML(HyperText Markup Language)は、ウェブページを構築するためのマークアップ言語です。
タグを使って文章構造やデザインを定義します。
○HTMLタグの構造
HTMLタグは、次のような構造を持っています。
<タグ名 属性名="属性値">コンテンツ</タグ名>
<p style="color:red;">これは赤い文字です。</p>
●HTMLタグ一覧とサンプル
それでは、HTMLタグ一覧を見ていきましょう。
主要なHTMLタグを20個ピックアップし、それぞれの使い方や注意点、カスタマイズ方法をサンプルコード付きで紹介します。
①<!DOCTYPE html>
DOCTYPE宣言は、HTML文書のバージョンを指定するためのタグです。
HTML5では次のように記述します。
<!DOCTYPE html>
②<html>
htmlタグは、HTML文書のルート要素を表します。
属性として言語を指定することができます。
<html lang="ja">
③<head>
headタグは、ウェブページのメタデータを格納するためのタグです。
タイトルやスタイルシート、スクリプトなどを含みます。
<head>
<title>ページタイトル</title>
</head>
④<title>
titleタグは、ウェブページのタイトルを指定します。
ブラウザのタブに表示されます。
<title>ページタイトル</title>
⑤<body>
bodyタグは、ウェブページのコンテンツ部分を定義します。
表示されるテキストや画像、リンクなどを含みます。
<body>
<p>ここにコンテンツが入ります。</p>
</body>
⑥<h1>~<h6>
h1~h6タグは、見出しを定義するためのタグです。
h1が最も大きく、h6が最も小さい見出しになります。
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
⑦<p>
pタグは、段落を定義します。
改行やインデントが自動的に適用されます。
<p>これは段落です。</p>
⑧<a>
aタグは、リンクを定義するためのタグです。
href属性でリンク先のURLを指定します。
<a href="https://example.com">ここをクリック</a>
⑨<img>
imgタグは、画像を表示するためのタグです。
src属性で画像ファイルのパスを指定し、alt属性で代替テキストを記述します。
<img src="image.jpg" alt="サンプル画像">
⑩<ul>と<li>
ulタグとliタグは、箇条書きのリストを作成するためのタグです。
ulタグでリスト全体を囲み、liタグでリストの各項目を定義します。
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
⑪<ol>
olタグは、番号付きリストを作成するためのタグです。
使い方はulタグと同様です。
<ol>
<li>項目1</li>
<li>項目2</li>
</ol>
⑫<table>
tableタグは、表を作成するためのタグです。
trタグで行を、thタグで見出しセル、tdタグでデータセルを定義します。
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
⑬<form>
formタグは、入力フォームを作成するためのタグです。
action属性で送信先のURL、method属性で送信方法を指定します。
<form action="https://example.com" method="post">
<input type="text" name="username">
<input type="submit" value="送信">
</form>
⑭<input>
inputタグは、フォーム内でユーザーが入力できるコントロールを作成するためのタグです。
type属性で入力タイプを指定し、name属性で入力値の名前を設定します。
<input type="text" name="username" placeholder="ユーザー名">
⑮<textarea>
textareaタグは、複数行のテキスト入力エリアを作成するためのタグです。
rows属性やcols属性でサイズを指定できます。
<textarea name="comment" rows="5" cols="30"></textarea>
⑯<select>と<option>
selectタグとoptionタグは、ドロップダウンリストを作成するためのタグです。
selectタグでリスト全体を囲み、optionタグで各選択肢を定義します。
<select name="gender">
<option value="male">男性</option>
<option value="female">女性</option>
</select>
⑰<button>
buttonタグは、ボタンを作成するためのタグです。
type属性でボタンの機能を指定し、クリックイベントを実行できます。
<button type="button" onclick="alert('クリックされました')">クリック</button>
⑱<div>
divタグは、コンテンツをグループ化し、スタイルを適用するためのタグです。
特に意味を持たないため、CSSでデザインする際に便利です。
<div style="background-color: yellow;">
<p>この文章は黄色の背景になります。</p>
</div>
⑲<span>
spanタグは、インライン要素をグループ化し、スタイルを適用するためのタグです。
divタグと同様に特に意味を持たず、CSSでデザインする際に便利です
<p>この<span style="color: red;">文章</span>は赤くなります。</p>
⑳<style>
styleタグは、ウェブページ内にCSSスタイルを記述するためのタグです。
headタグ内に配置します。
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
これで、HTMLタグ一覧とそれぞれの使い方や注意点、カスタマイズ方法をサンプルコード付きで紹介しました。
これらのタグを組み合わせることで、独自のウェブページを作成することができます。
実践的な応用例として、シンプルなウェブページのサンプルコードを示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>サンプルページ</h1>
<p>これはサンプルページです。</p>
<ul>
<li><a href="https://example.com/page1">ページ1</a></li>
<li><a href="https://example.com/page2">ページ2</a></li>
</ul>
<form action="https://example.com/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" placeholder="ユーザー名">
<input type="submit" value="送信">
</form>
</body>
</html>
このサンプルコードでは、HTMLタグを使ってシンプルなウェブページを作成しています。
ページの構造やデザインをカスタマイズするには、HTMLタグの属性やCSSを変更してください。
まとめ
今回の記事を通じて、初心者でも簡単に理解できるHTMLタグ一覧と実践サンプルを紹介しました。
これらの知識を活かし、独自のウェブページを作成してみましょう。
記事の内容を理解し実践することで、HTMLタグの使い方を習得し、問題解決に繋がることでしょう。
これからも、さらなるスキルアップを目指して学びを深めていきましょう。