【HTML入門】基本構造のサンプルコードと詳細を解説！
はじめに
HTMLに対する深い理解の必要性
HTMLはウェブ上の情報を構造化するための標準的なマークアップ言語であり、ウェブ開発において最も基礎的かつ重要なスキルと言えます。
初級レベルでは、HTMLの基本的なタグや属性を学んで、簡単なウェブページを作成できるようになるでしょう。しかし、中級レベルに進むにつれて、より複雑なウェブページを設計し、最新のHTML5の要素を利用し、ユーザビリティとアクセシビリティを向上させるための知識と技術が求められます。
これらを理解し、適切に使用することで、効率的に、そしてより深みのあるウェブページを作成することが可能となります。
この記事の目的と対象読者
この記事の目的は、すでにHTMLの基本的な知識を身につけている方が、より深いレベルでHTMLを理解し、使いこなすためのガイドを提供することです。
HTML5の新要素の概観から、レスポンシブデザインの実現方法、さらにはアクセシビリティを考慮したウェブページの構築方法について深掘りします。
具体的なサンプルコードとそれらの詳細な解説を交えながら、読者が理論と実践の両方でHTMLの理解を深められるよう配慮しています。
HTMLを一通り学習したが、次に何を学べばよいか迷っている方、より高度なウェブページを作成したいと考えている方に最適な記事です。
目次
HTML5の新要素
HTML5は、Webの未来を切り開くための新たな標準として、ウェブ開発者に様々な革新的な機能をもたらしています。特にHTML5で導入された新要素は、ウェブページの表現力を大幅に広げ、より良いユーザー体験を提供する可能性を秘めています。
この章では、HTML5の新要素について深く掘り下げ、それぞれがどのように機能し、どのように使用されるべきかを詳細に解説します。
実際のサンプルコードとともに学ぶことで、より深い理解と実践的なスキルを身につけることができます。
セマンティック要素（article, section, aside, etc）
セマンティック要素は、ブラウザや検索エンジンがウェブページの各部分が何を表しているかを理解するための重要な要素です。
以下に、これらの要素の具体的な使用例を示します。
・<article>
ページ内で完結して意味を成すコンテンツを囲むための要素です。
ブログの記事やフォーラムの投稿などがこれに当たります。
一つのページに複数の<article>要素が存在することもあります。
<article>
<h2>Article Title</h2><p>This is an example of an article.</p></article>・<section>
ページ内の特定のセクションを定義するための要素です。これは一つのトピックまたは目的に対応するコンテンツを囲むために使用されます。<section>要素は通常、見出し(<h1>-<h6>)と共に使用されます。
htmlCopy code
<section><h2>Section Title</h2><p>This is an example of a section.</p></section>・<aside>
ページの主要なコンテンツからは離れた、補足的な情報を含むための要素です。
サイドバーの内容やページの注釈などがこれに当たります。
<aside>
<h3>Additional Information</h3>
<p>This is an example of an aside.</p>
</aside>フォーム要素（datalist, output, progress, etc）
HTML5のフォーム要素は、ユーザーとのインタラクションをより良く制御するための機能を提供します。
以下に、これらの要素の具体的な使用例を示します：
・<datalist>
テキストフィールドに予測候補を提供するための要素です。
この要素を<input>要素と組み合わせることで、ユーザーが入力を始めたときに提示されるオプションを定義することができます。
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">
</datalist>・<output>
フォーム内の二つ以上の値の結果を表示するための要素です。
この要素は、一つ以上の<input>要素の値を基に計算を行い、結果を表示します。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+
<input type="number" id="b" value="50">
=
<output name="x" for="a b"></output>
</form>・<progress>
タスクの進行状況を視覚的に表示するための要素です。
この要素は、タスクの現在の進行状況（value）と完了するために必要な全体の作業量（max）を属性として持つことができます。
<label for="file">Downloading progress:</label>
<progress id="file" value="70" max="100"> 70% </progress>これらのサンプルコードは、HTML5の各要素がどのように使用されるかを示す基本的な例です。
実際のプロジェクトでは、これらの要素をさらにカスタマイズして、特定のニーズや目標に合わせて使用します。
メディア要素（audio, video, source, track）
HTML5のメディア要素は、音声や動画をウェブページに直接組み込むための強力なツールを提供します。
これらの要素には、<audio>、<video>、<source>、そして<track>があります。
以下に、これらの要素の具体的な使用例を示します。
・<audio>
音声ファイルをウェブページに埋め込むための要素です。
この要素は、コントロール（再生、停止、ボリュームなど）を表示するためのcontrols属性を持つことができます。
htmlCopy code
<audio controls><source src="audio.ogg" type="audio/ogg"><source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>以上で、HTML5の新要素についての解説と実用的なサンプルコードの提供を終えます。
HTML5の新要素がどのように使われ、どのように働くかを理解することで、ウェブ開発の広がりと可能性を見つけることができるでしょう。これらの要素を活用すれば、より豊かなユーザーエクスペリエンスを提供することが可能になります。
次の章では「レスポンシブデザインとHTML」に焦点を当てます。
スマートフォン、タブレット、PCといった多種多様なデバイスに対応したウェブページを作成するための重要な考え方や技術を紹介します。
HTML5の新要素と組み合わせることで、どのように最適なユーザーエクスペリエンスを提供するかを学んでいきましょう。
レスポンシブデザインとHTML
この章では、ウェブページがさまざまなデバイスと画面サイズに適応できるようにするためのHTMLの役割について詳しく説明します。
スマートフォン、タブレット、デスクトップなど、ユーザーが使用するデバイスの種類は多岐にわたります。
それぞれのデバイスに適した表示を提供するためには、レスポンシブデザインの原則を理解し、適切なHTML要素と属性を使用することが重要です。
この章では、HTMLの中心的な役割について掘り下げ、さまざまなデバイスと画面サイズに対応したウェブページの作成に役立つ具体的なテクニックとコードのサンプルを提供します。
メタタグのviewport
HTML5から導入されたviewportというメタタグは、デバイスに応じたレンダリングを指示するために重要な役割を果たします。
これにより、ページの幅をデバイスの幅に合わせたり、初期のズームレベルを設定したりすることが可能となります。具体的には以下のようなコードとなります。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- コンテンツ -->
</body>
</html>上記コードは、ビューポートの幅をデバイスの幅に合わせ（width=device-width）、初期のズームレベルを1.0に設定（initial-scale=1.0）しています。
media属性を持つlink要素
link要素のmedia属性を使って、特定のメディア（例えばスクリーン、プリントなど）または条件（ビューポートの幅など）に基づいて異なるスタイルシートを適用することが可能です。
これは、レスポンシブデザインのための一つの手法となります。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop-style.css">
<link rel="stylesheet" media="screen and (max-width: 899px)" href="mobile-style.css">
</head>
<body>
<!-- コンテンツ -->
</body>
</html>上記コードでは、ビューポートの幅が900px以上の場合にはdesktop-style.cssを、それ未満の場合にはmobile-style.cssを適用しています。
picture要素とsource要素の利用
picture要素とsource要素を使うことで、ビューポートの幅などに応じて表示する画像を変えることができます。これにより、デバイスの幅に最適化された画像を提供することが可能となります。
<picture>
<source media="(min-width: 600px)" srcset="large.jpg">
<img src="small.jpg" alt="画像">
</picture>上記コードでは、ビューポートの幅が600px以上の場合にはlarge.jpgを、それ未満の場合にはsmall.jpgを表示します。
実際のレスポンシブデザインのHTMLコードとその解説
今まで学んできたレスポンシブデザインの原理を活かした実際のHTMLコードを見てみましょう。
以下に示すコードは、デスクトップとモバイルで異なる画像を表示するシンプルなウェブページの例です。
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(max-width: 799px)" srcset="small.jpg">
<img src="small.jpg" alt="A description of the image">
</picture>
</body>
</html>このコードの解説をします。
<!DOCTYPE html>: 文書型宣言。これはHTML5を使用していることをブラウザに伝えます。
<meta name="viewport" content="width=device-width, initial-scale=1">: viewportの設定。デバイスの画面幅に応じてページの幅を調整し、初期のズームレベルを1に設定します。
<picture>要素: 条件によって異なる画像を提供します。ここでは、デバイスの画面幅に応じて異なる画像を表示します。
<source>要素: media属性を使用して条件を指定します。ここでは、画面幅が800px以上の場合と799px以下の場合で表示する画像を切り替えています。
上記のようにHTMLを使ったレスポンシブデザインでは、ブラウザとデバイスの特性を活用して最適なコンテンツをユーザーに提供します。
このように理解と実践を重ねていくことで、あらゆるデバイスで適切に表示されるウェブページを作成する能力が身につきます。
ウェブアクセシビリティとHTML
ウェブアクセシビリティは、ディジタル製品やサービスが全ての人に対して利用可能であることを確保する重要な要素です。
HTMLは、アクセシビリティを確保する上で重要なツールとなります。
ここでは、HTMLを使用してウェブアクセシビリティをどのように改善できるかを見ていきましょう。
alt属性と画像のアクセシビリティ
<img>要素のalt属性は、視覚的な要素をテキスト形式で説明するために使用されます。
視覚障害を持つ人々や、帯域幅の制限により画像をダウンロードできないユーザーが、画像の内容を理解するために使用します。
例えば、以下のように使用することができます：
<img src="logo.jpg" alt="OpenAIのロゴ">ここでは、alt属性を使用して画像の説明を提供しています。
これにより、視覚障害を持つユーザーや、画像が正しく表示されないユーザーでも、画像の内容を理解することができます。
セマンティック要素とアクセシビリティ
HTML5では、いくつかの新たなセマンティック要素（<header>, <footer>, <article>, <section>など）が導入されました。
これらの要素を使用すると、ウェブページの構造が明確になり、スクリーンリーダーや検索エンジンなどがページの内容をより正確に理解することができます。
<article>
<h2>記事のタイトル</h2>
<p>ここに記事の内容が入ります。</p>
</article>上記の例では、<article>タグを使用してウェブページの一部分を表現しています。
これにより、この部分が独立したコンテンツ（この場合、一つの記事）であることが明確になります。
ARIAを利用したアクセシビリティの強化
ARIA（Accessible Rich Internet Applications）は、HTMLにアクセシビリティの情報を追加するための一連の属性です。
これらの属性を使用すると、視覚障害を持つユーザーなどがウェブサイトの操作やナビゲーションを容易に行うことができます。
<button aria-label="閉じる">X</button>上記の例では、aria-label属性を使用してボタンの機能を説明しています。
この情報はスクリーンリーダーによって読み上げられ、視覚障害を持つユーザーがボタンの機能を理解するのを助けます。
実際のウェブアクセシビリティに配慮したHTMLコードとその解説
以下のHTMLコードは、前述したalt属性、セマンティック要素、ARIA属性を使用したウェブページの例です。
<!DOCTYPE html>
<html>
<head>
<title>Accessible Web Page</title>
</head>
<body>
<header>
<h1>Accessible Web Page</h1>
</header>
<main>
<article>
<h2>Welcome!</h2>
<p>Welcome to our accessible web page. We strive to be inclusive to all users.</p>
</article>
<img src="welcome.jpg" alt="Welcome image">
<button aria-label="Go to top">Top</button>
</main>
<footer>
<p>Copyright © 2023 Accessible Web Page</p>
</footer>
</body>
</html>この例ではHTMLの<header>、<main>、<article>、<footer>のセマンティック要素を使用してページの構造を定義し<img>要素のalt属性と<button>要素のaria-label属性を使用してアクセシビリティを向上させています。
まとめ
本記事では、HTMLの基本構造から一歩進んで、HTML5の新要素の理解、レスポンシブデザインの適用、そしてウェブアクセシビリティへの対応といった、中級者にとって重要なトピックについて深く掘り下げました。これらの知識は、現代のウェブ開発において、ユーザーエクスペリエンスを高めるために絶対に必要なものです。
HTML5の新要素では、セマンティックなマークアップを通じて、より洗練されたウェブコンテンツの表現が可能となりました。
また、レスポンシブデザインのセクションでは、デバイスの種類に関わらず一貫したユーザーエクスペリエンスを提供するためのHTMLの役割について学びました。
そして最後に、ウェブアクセシビリティのセクションでは、全てのユーザーが情報に等しくアクセスできるようにするためのHTMLの重要性を確認しました。
しかし、これで学びが終わったわけではありません。
次のステップとしては、CSSやJavaScriptといった他のフロントエンドの技術を学ぶことをお勧めします。
これらの技術をマスターすることで、動的で対話的なウェブページを作成することができます。
また、ウェブアクセシビリティやレスポンシブデザインについて更に深く学び、自身のスキルを磨き上げていきましょう。常に新しいことを学び続けることで、より良いウェブ開発者になれます。