Web開発 - HTMLとは
初めに
本記事はHTMLはどのようなものか、概要をまとめます。
HTMLとは
HTML（HyperText Markup Language）は、訪れたウェブサイトの構成をブラウザーに対して伝えるために使うマークアップ言語です。
（例）
<p>ここの文章を表示します</p>
HTML要素の構成
基本構成
HTML要素は、基本的に開始タグ、内容、終了タグで構成されます。
<!-- <p>:開始タグ --> <!-- タグに挟まれた部分:内容 --> <!-- </p>:終了タグ --> <p>ここの文章を表示します</p>
空要素
<p>のように開始タグ、コンテンツ、終了タグのパターンではなく、要素によっては単一のタグのみで構成されるものもあります。これを空要素といいます。
（例：空要素）
<!-- <img>タグ --> <img src="画像のurl" alt="画像の説明" />
コメント
HTMLでは、<!-- -- >で囲むことでコメント化することができます。
<!-- 単一行のコメント --> <!-- 複数行 の コメント -->
属性（Attribute）
空要素の説明に src や alt が出てきました。この alt のように要素に関する追加情報を保有するものを属性（Attribute）といいます。
属性は様々なものがあります。
<!-- id属性: 要素を識別するための一意の識別子を指定します --> <div id="myDiv">...</div> <!-- class属性: 複数の要素をグループ化するためのクラスを指定します --> <p class="paragraph">...</p> <!-- href属性: ハイパーリンク先のURLを指定します --> <a href="https://example.com">リンク</a> <!-- src属性: 要素のソースを指定します（例: 画像や動画の場所） --> <!-- alt属性: 画像の代替テキストを提供します（画像が表示できない場合やテキストベースのブラウザを使用している場合に表示されます） --> <img src="image.jpg" alt="画像の説明"> <!-- style属性: インラインで要素のスタイルを指定します（CSSプロパティを直接設定） --> <p style="color: red; font-size: 16px;">赤いテキスト</p>
属性は基本的には、右辺に属性値を記述します。しかし、属性値の記述を省略した記法もあります。
一般的に、属性名と同じ属性値だけとる属性を論理属性といい、属性値の記述を省略して書くこともできます。
<!-- disabled 属性を使用すると、エンドユーザーが入力ボックスにテキストを入力できないようにします。 --> <input type="text" disabled="disabled" /> <!-- 論理属性の省略記法 --> <input type="text" disabled />
HTML文書の構成
<!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> <!-- ページのコンテンツ --> </body> </html>
| 要素 | 説明 |
|---|---|
| <!DOCTYPE html> | HTML文書のバージョンを指定します。HTML5の文書ではこれを使用します。 |
| <html lang="ja"> | HTML文書全体を囲む要素で、lang属性を使って文書の言語を指定します。 |
| <head> | ページのヘッダー情報を含むセクションです。ここにはメタデータや外部リソースのリンクが含まれます。 |
| <meta> | 他の HTML メタ関連の要素では表現できないメタデータを表現します。 |
| <title> | ページのタイトルを指定します。ブラウザのタブに表示されたり、検索エンジンの検索結果に表示されます。 |
| <body> | 実際のページコンテンツを含むセクションです。テキスト、画像、リンク、動画など、ユーザーが閲覧するコンテンツがここに配置されます。 |
引用符
引用符とは、「 "（ダブルクォーテーション）」 や「 '（クォーテーション）」のことです。
下の例では、myDiv が引用符で囲まれています。
<div id="myDiv">...</div>
ダブルクォーテーションを二重引用符、クォーテーションを単一引用符といいます。HTMLにおいて、
