HTMLとは、ウェブページを作成するための言語です。テキスト、画像、ビデオなどの情報をどのように表示するかを指定します。代表的なHTMLタグを利用して作成されたサンプルコードを基にして、HTMLを学びます。
HTMLの基本構造を理解しよう
このコードはHTMLと呼ばれる言語で書かれています。HTMLはウェブページを作るための言語で、文字や画像、ビデオなどの情報をどのように表示するかを指定します。
ドキュメントの型宣言
<!DOCTYPE html>
この行はHTML5というバージョンのHTMLで書かれた文書であることを示しています。この宣言をしておくことで、ブラウザはこのページを正しく読み込むことができます。
HTMLの始まりと終わり
<html lang="ja"> ... </html>
<html>と</html>の間にはウェブページの内容が全て含まれます。lang="ja"という部分は、このページの主要な言語が日本語であることを示しています。ヘッドセクション
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" /> <title>HTML5 Sample Code</title> </head>
<head>と</head>の間にはウェブページの設定情報が含まれます。ここにはページのタイトルや文字コード、CSSスタイルなどが設定されます。ボディセクション
<body> ... </body>
<body>と</body>の間にはウェブページの主要な内容が含まれます。この部分がブラウザに表示され、ユーザーが直接見る部分となります。ヘッダー
<header> <h1>Welcome to My Website!</h1> <nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> </ul> </nav> </header>
<header>タグはページのヘッダー部分を表します。ここには、ウェブサイトのタイトルやナビゲーションメニューなどが含まれます。メインコンテンツ
<main> <section id="section1"> <h2>Section 1</h2> <p>This is an example paragraph.</p> <img src="your-image-source.jpg" alt="description of image"> </section> <section id="section2"> <h2>Section 2</h2> <p>This is another example paragraph.</p> <video src="your-video-source.mp4" controls></video> </section> </main>
<main>タグは、文書の主要なコンテンツを囲むために使用されます。このコンテンツは文書のユニークな本体で、他のすべてのウェブページからは独立しています。<header>, <footer>, <nav>などのサイト全体で共有されるコンテンツは、通常、<main>内には含まれません。フッター
<footer> <p>© 2023 My Website</p> </footer>
<footer>タグはページのフッター部分を表します。ここには、コピーライト情報や製作者の情報などが含まれます。metaタグ
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
metaタグは文書に関する情報を提供します。ここでは、2つのmetaタグを使用しています。
1つ目の
charset="UTF-8"は、このページがUTF-8という文字コードを使用していることを指定しています。文字コードとは、文字をコンピュータが理解できる数字の形に変換するルールのことです。2つ目の
name="viewport"は、ウェブページがモバイルデバイスで見られる時の表示方法を制御します。content="width=device-width, initial-scale=1.0"は、ページの幅をデバイスの幅に合わせ、初期のズームレベルを100%に設定することを指定しています。linkタグ
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
linkタグは外部リソースへのリンクを作ります。そのリソースはページの表示や動作に影響を与えます。この例では、外部のCSSファイルをリンクしています。スタイルシート（CSSファイル）はウェブページの見た目を制御します。色やフォント、レイアウトなど、ウェブページのデザインに関する全ての指示がこのファイルに書かれています。
rel属性
rel属性はリンクの関係（relationship）を示します。ここではrel="stylesheet"となっており、リンク先のファイルがスタイルシートであることをブラウザに伝えています。href属性
href属性はリンク先のURLを指定します。ここではSimple.cssが指定されています。これにより、ブラウザは指定されたURLからCSSファイルを読み込んで、そのスタイルルールを現在のページに適用します。
navとul, li, aタグ
<nav> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> </ul> </nav>
navタグはナビゲーションリンクのセクションを表します。ulタグは順序のないリストを、liタグはリストの各項目を表します。
そして、aタグはハイパーリンクを作成します。href属性はリンク先のURLを指定しますが、ここでは"#section1"と"#section2"と書かれていて、これはページ内の特定のセクションにジャンプする内部リンクを指定しています。
imgとvideoタグ
<img src="your-image-source.jpg" alt="description of image"> <video src="your-video-source.mp4" controls></video>
imgタグとvideoタグは、それぞれ画像と動画を表示するために使用されます。src属性にはファイルのURLを指定します。
imgタグのalt属性は、画像が表示できないときに代わりに表示されるテキストを指定します。そして、videoタグの
controls属性は、再生、一時停止、音量調整などのビデオコントロールを表示することを指定します。<h1>から<h6>までの見出しタグ
<h1>Welcome to My Website!</h1>
見出しタグは、
<h1>から<h6>までの6つのレベルがあります。<h1>が最も重要な見出しで、<h6>が最も低いレベルの見出しです。このサンプルでは、ウェブサイトのメインタイトルとして<h1>タグを使用しています。<p>タグ
<p>This is an example paragraph.</p>
<p>タグは段落を表します。文章の一部をこのタグで囲むと、その部分が一つの段落として扱われます。まとめ
以上が、このHTMLコードに含まれるすべての要素とその役割です。HTMLは、これらの要素を使ってウェブページの構造を作り上げます。そして、CSSを使ってその構造に色やレイアウトを追加することで、見た目の美しいウェブページが出来上がります。
HTMLを学ぶことは、ウェブページの構造を理解するための第一歩です。これからも一緒に学んでいきましょう！
プログラミングのメンターサービスを提供中！まずはお気軽にご相談ください
この記事の著者mosugi
Web系の企業でITエンジニアとして働いて12年になる、プライベートでは子育てに奮闘する3児の父です。仕事の傍らで子供たちとプログラミングを楽しむ方法を日々模索しています。
運営者について記事一覧
HTML5で一般的に使用される基本的なタグを学ぶ
HTMLとは、ウェブページを作成するための言語です。テキスト、画像、ビデオなどの情報をどのように表示するかを指定します。代表的なHTMLタグを利用して作成されたサンプルコードを基にして、HTMLを学びます。
HTML
Notionでそのままプレゼン！Chrome拡張機能による資料作成術📊
Chrome拡張機能のNotion Presentationを使ってプレゼンテーションを行う方法を紹介します
プログラミングで開発ができるパソコンは数万円の中古ThinkPadがおすすめ
中古市場で数万円程度で購入できるため、初心者や学生でも手軽に導入できます。また、ThinkPadは耐久性が高く、長期間使用することができるため、コストパフォーマンスが優れています。
パソコン
プログラミング
SmalRubyでScrachからRubyを学ぶ
SmallRubyは、学習用のプログラミング言語です。この言語は、Ruby言語をベースにしており、初心者が簡単にプログラミングを学ぶことができるように設計されています。SmallRubyは、Ruby言語の基本的な文法を抽象化し、より直感的に操作できるようにしています。 SmallRubyを使用することで、初心者が簡単にプログラミングを学ぶことができます。
Scratch
Ruby
カテゴリ一覧
