HTMLとは
HTMLの略はハイパーテキストマークアップランゲージ(Hyper Text Markup Language)。
- Hyper Text：文書内に他の文書へのリンクを埋め込むことで、情報を相互に結びつける仕組み
- Markup language：文書の構造と体裁を明確に記述するためのデータ記述言語
HTMLは、ウェブページを形作るためのツールであり、ハイパーテキストの能力を活かして情報同士を結びつけ、マークアップによって文書の構造を明示します。
HTML の構成要素
HTMLは以下の図のように3つの要素で構成されている。
| 種類 | 例 | 説明 |
|---|---|---|
| タグ |
<h1>, <p>
|
HTMLの要素を定義するためのマークアップ。例の<h1>は見出しを示し、<p>は段落を示す。 |
| 要素 |
<h1>メインタイトル</h1>, <p>これは段落です。</p>
|
タグで囲まれた内容全体が要素となる。<h1>要素はページのメインタイトルを示し、<p>要素はテキストの段落を示す。 |
| 属性 |
<a href="https://www.example.com">, <img src="image.jpg" alt="画像の説明">
|
タグに追加情報を提供するためのもの。<a>のhref属性はリンクの先を示し、<img>のsrc属性は画像のパスを示す。 |
よく使用される「タグ」
| タグ | 説明 |
|---|---|
<h1> |
ページの主な見出しを示します。 |
<p> |
段落を示します。 |
<a> |
ハイパーリンクを作成します。 |
<div> |
セクションやブロックの構造を作ります。 |
<img> |
画像を表示します。 |
<ul> / <ol>
|
順不同リスト / 順序付きリストを作成します。 |
<table> |
表を作成します。 |
↓コード記載例
tag.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タグの例</title>
</head>
<body>
<h1>ウェブサイトの主な見出し</h1>
<p>これは段落です。</p>
<a href="https://www.example.com">リンクテキスト</a>
<div>ここにセクションの内容があります。</div>
<img src="image.jpg" alt="説明用画像">
</body>
</html>
よく使用される「要素」
| 要素 | 説明 |
|---|---|
<h1>ウェブサイトのタイトル</h1> |
ページやセクションの主題を表す要素。 |
<p>これはサンプル段落です。</p> |
テキストの段落を表す要素。 |
<a href="https://www.example.com">リンク</a> |
他のページやリソースへのリンクを示す要素。 |
<div>コンテンツのセクション</div> |
スタイルや構造を管理するためのブロック要素。 |
↓コード記載例
youso.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の例</title>
</head>
<body>
<h1>メインタイトル</h1>
<p>これはサンプル段落です。</p>
<a href="https://www.example.com">こちらにアクセス</a>
<div>コンテンツのセクションです。</div>
</body>
</html>
よく使用される「属性」
| 属性 | 説明 |
|---|---|
href |
リンクの先を指定するための属性。 |
src |
画像やフレームのソースを指定するための属性。 |
alt |
画像が表示できない場合に表示される代替テキスト。 |
class |
CSSスタイルを適用するためのクラスを指定する属性。 |
id |
一意の識別子を指定し、JavaScriptやCSSで特定の要素を参照するための属性。 |
↓コード記載例
zokusei.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>属性の例</title>
</head>
<body>
<h1 id="main-title">ウェブサイトのタイトル</h1>
<p class="introduction">これはサンプル段落です。</p>
<a href="https://www.example.com" target="_blank">新しいタブでリンクを開く</a>
<img src="image.jpg" alt="説明用画像" class="responsive">
</body>
</html>