HTMLとは?
HTML(HyperText Markup Language)は、Webページを作成するための言語です。HTMLを使うことで、テキスト、画像、リンクなどの要素を整理してWebブラウザに表示させることができます。
HTMLの基本構造
HTML文書は以下のような基本構造を持っています。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>ようこそ!</h1>
<p>これはHTMLの基本例です。</p>
</body>
</html>
各部分の説明
<!DOCTYPE html>
HTML文書であることをブラウザに伝えます(HTML5を指定)。<html>
HTML文書全体を囲むタグです。<head>
メタ情報(ページタイトルやCSSなど)を記述します。<body>
実際に画面に表示される内容を記述します。
よく使うHTMLタグ
見出し(Heading)
見出しを作るには<h1>
から<h6>
までのタグを使用します。
<h1>大見出し(重要)</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
**
<h1>
**は最も重要な見出し**
<h6>
**は最も小さい見出し
段落(Paragraph)
段落を作るには<p>
を使います。
<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。</p>
リンク(Anchor)
他のページやURLにリンクを貼るには<a>
を使用します。
<a href="https://www.example.com">Exampleに行く</a>
href
属性でリンク先を指定します。
画像(Image)
画像を表示するには<img>
を使用します。
<img src="https://via.placeholder.com/150" alt="サンプル画像">
src
属性: 画像のURLやパスalt
属性: 画像が表示されないときの説明
リスト(List)
順序付きリスト(番号付き)
<ol>
<li>最初のアイテム</li>
<li>次のアイテム</li>
</ol>
順序なしリスト(番号なし)
<ul>
<li>最初のアイテム</li>
<li>次のアイテム</li>
</ul>
表(Table)
表を作るには<table>
タグを使います。
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>田中</td>
<td>25</td>
</tr>
<tr>
<td>佐藤</td>
<td>30</td>
</tr>
</table>
<table>
: 表全体<tr>
: 行<th>
: ヘッダー(見出しセル)<td>
: 通常のセル
簡単なサンプル
以下は基本的なHTMLページの例です。このコードをコピーして、ファイル名をindex.html
として保存し、ブラウザで開いてみましょう。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>HTMLへようこそ</h1>
<p>これはHTMLの基本例です。ここでは、Webページの構造を学びます。</p>
<h2>リンク</h2>
<p><a href="https://www.google.com">Googleに行く</a></p>
<h2>画像</h2>
<img src="https://via.placeholder.com/150" alt="サンプル画像">
<h2>リスト</h2>
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
</body>
</html>
次に進むには?
HTMLを学んだら、次は以下を学ぶとWebページ作成がもっと楽しくなります。
CSS: ページのデザインを美しくする方法
JavaScript: ページに動きをつける方法
あなたも今日からWeb開発を始めましょう! 😊
最終更新
役に立ちましたか?