HTMLの基本
この記事ではHTMLの基本について説明します。
DOCTYPE宣言や<html>, <head>, <body>タグという主要なタグやについて説明しています。また、タグや属性、特殊文字についても説明しています。
YouTube Video
HTMLの基本
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>ファイルの先頭でHTML5文書であることを宣言し、この文書がHTML5のルールに基づいて作成されていることを示します。
-
<html><html>タグはHTML文書の最も外側の要素で全体を囲むタグです。 1つのHTMLファイルには<html>タグが１つのみ含まれ、他のタグは全て<html>タグの中に含まれます。<html>開始タグ内にあるlang="en"は属性と呼ばれ、HTML文書が英語で書かれていることをブラウザに伝えています。 これにより、スクリーンリーダーや検索エンジンに文書の言語を通知できます。 -
<head><head>タグは、ページのメタデータ（情報）を定義する部分です。ここには、ページのタイトルや文字エンコーディング、レスポンシブデザインの設定が含まれます。 ここで、レスポンシブデザインとは、ウェブサイトやアプリがさまざまなデバイスや画面サイズに適応して見やすく表示されるように設計された手法です。 これにより、ユーザーはスマートフォン、タブレット、デスクトップなどの異なるデバイスで快適にコンテンツを閲覧できます。<meta charset="UTF-8">により文書の文字エンコーディングをUTF-8に設定します。<meta name="viewport" content="width=device-width, initial-scale=1.0">はモバイルデバイスでの表示を最適化するための設定です。 ページがデバイスの画面幅に合わせて調整されます。<title>はブラウザタブに表示されるページのタイトルです。この例では「Basics of HTML」（HTMLの基本）というタイトルが設定されています。 -
<body><body>タグは、実際にユーザーに表示されるコンテンツを含む部分です。このタグ内に、テキストや画像、リンクなどを記述します。 -
<main><main>タグは、ページの主要なコンテンツを表します。この中に見出しや段落が含まれています。 -
<h1><h1>タグは、ページの最も重要な見出しを表します。<main>タグや<h1>タグは文書の中で一度だけ使用するのが一般的です。 -
<p><p>タグは、段落を表すタグです。 -
<!-- Comment -->このような形式でHTML内にコメントを記述できます。 クライアントサイドのHTMLは誰でも確認可能なため、コメントには、パスワードやAPIキーなどの機密情報を含めないようにしてください。
HTMLには多くのタグがありますが、ここでは次のポイントに注目してください。HTMLファイルはDOCTYPE宣言と1つの<html>タグから構成されています。そして<html>タグには1つの<head>タグと1つの<body>タグが含まれています。このようにHTMLでは全てのタグが<html>タグに含まれていて、木構造のように親子や兄弟関係でテキストの構造を表現できます。HTMLを記述する際は、文書の構造にも注目して記述してください。
タグと属性
次に、HTMLのタグと属性について見てみましょう。
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->タグは角括弧 (<, >) で囲まれ、基本的に開始タグと終了タグのペアで構成されます。ただし、<meta>タグや<img>タグのようにコンテンツを持たない単一タグもあります。単一タグは終了タグを記述する必要はありません。
タグは属性を持つことができ、これによりタグに追加情報を提供します。属性は、開始タグの中に記述され、属性名="値"の形式で表現されます。
ここで、<div>をタグ、<div>Content</div>全体を要素と呼びます。
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>HTML内で共通して使われる属性として、id、class、styleなどがあります。id属性は、要素に一意の識別子を付けるために使用され、同じidを持つ要素は1ページ内に一つしか存在できません。JavaScriptやCSSで特定の要素を操作する際に便利です。class属性は、要素にクラス名を付けることで、CSSやJavaScriptで複数の要素をまとめて扱うことができます。同じclassを複数の要素に付けることができ、スタイルを共通化できます。style属性は、インラインで要素に対してCSSスタイルを指定します。通常、外部スタイルシートや<style>タグでスタイルを定義しますが、個別の要素に対して直接指定したい場合に使用します。
HTMLの特殊文字
次に、HTMLにおける特殊文字について見てみましょう。
HTMLには特定の記号や文字を表示するために使用される特殊文字があります。これらの特殊文字はエンティティと呼ばれます。特殊文字は、& (アンパサンド)で始まり、その後に名前か番号が続き、最後に;(セミコロン)で終わります。
代表的なHTMLの特殊文字
いくつか主な特殊文字を以下に示します。
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
HTMLの特殊文字の使用例
特に角括弧 (<, >)やダブルクオーテーションはHTML内で正しく使う必要があります。
角括弧 (<, >)やダブルクオーテーションは以下のようにHTML内では特殊文字を使う必要があります。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTMLのバージョン
ここで、HTMLのバージョンについて見てみましょう。
HTMLのバージョンは、ウェブページの構造と機能を定義するために進化してきました。以下が主なバージョンです。
-
HTML 1.0 (1993年)
最初のHTMLバージョンで、非常に基本的なマークアップ機能しか持っていませんでした。リンクや見出し、段落、リストなどの要素を定義していました。
-
HTML 2.0 (1995年)
初めて標準化されたバージョンで、より多くの要素が追加され、フォームやテーブルのサポートが導入されました。
-
HTML 3.2 (1997年)
より多くのレイアウト機能が追加され、スタイル要素やスクリプトの埋め込みが可能になりました。また、
<table>要素を使ったレイアウトが一般的になりました。 -
HTML 4.01 (1999年)
構造とプレゼンテーションの分離が進み、CSSが導入されました。標準準拠のサイト作成が推奨されるようになりました。また、文書の国際化やアクセシビリティの向上が図られました。
-
HTML5 (2014年)
最新の主要バージョンであり、動画や音声のサポート、キャンバス、ローカルストレージ、地理位置情報などの新しいAPIが導入されました。モバイルフレンドリーで、よりインタラクティブなウェブアプリケーションの開発が可能です。
HTML5.2は、2017年に勧告されたHTMLのバージョンで、HTML5に対する改良版です。HTML5.2以降は、静的なバージョン番号ではなく、**HTML Living Standard（リビングスタンダード）**として、継続的に更新されています。
HTMLはこれらのバージョンを通じて進化し、より柔軟で強力なウェブ技術として発展しています。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。