Webページを作るHTML
HTML（HyperText Markup Language）は、Webページの構造や内容を記述するための言語です。Webページの文章や画像、リンクなどを、ブラウザが正しく表示するための指示書のような役割を果たします。
HTMLは、タグと呼ばれる要素を使って記述します。例えば、見出しを表す「h1」タグ、段落を表す「p」タグなど、様々なタグがあります。タグは開始タグと終了タグで1対になっていて、終了タグの中は「/」(スラッシュ)で始まります。たとえば「h1」タグなら、
<h1> こんにちは！</h1>というような形でなり、このタグで囲まれた「こんにちは！」の部分が「見出し１」のフォーマットが適用されます。
HTMLの基本構造
HTMLファイルは、以下の基本構造で構成されます。HTMLファイルは、テキストエディタなどでだれでも作成できます。真っ白なテキストファイルを用意して以下のタグを打ち込み、ファイル名の拡張子に「.html」をつければHTMLファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html>: HTML5で記述されていることを宣言します。
- <html lang=”ja”>: HTML文書の開始と、言語を日本語に設定します。
- <head>: ページのタイトルや文字コードなど、Webページに関する情報を記述します。
- <body>: Webページに表示されるコンテンツを記述します。
よく使うHTMLタグ
HTMLには様々なタグがありますが、ここではよく使うタグをいくつか紹介します。
| タグ | 説明 | 例 |
|---|---|---|
<h1>～<h6> |
見出し（h1が最も大きな見出し、h6が最も小さな見出し） | <h1>HTML入門</h1> |
<p> |
段落 | <p>これは段落です。</p> |
<a> |
リンク | <a href="https://www.example.com">リンク</a> |
<img> |
画像 | <img src="image.jpg" alt="画像の説明"> |
<ul> |
リスト（番号なし） | <ul><li>項目1</li><li>項目2</li></ul> |
<ol> |
リスト（番号付き） | <ol><li>項目1</li><li>項目2</li></ol> |
Webページ作成の流れ
- テキストエディタでHTMLファイルを作成: 拡張子が「.html」のファイルを作成します。
- HTMLの基本構造を記述: 上記の基本構造を参考に、HTML文書を作成します。
- コンテンツを記述: 必要なタグを使って、Webページのコンテンツを記述します。
- ブラウザで確認: 作成したHTMLファイルをブラウザで開き、表示を確認します。
HTMLはWebページ作成の基礎となる言語です。この記事で紹介した基本を理解すれば、簡単なWebページを作成することができます。
補足:
- HTMLタグは、
<タグ名>で始まり、</タグ名>で終わります（例:<p>段落</p>）。 - タグの中には属性を記述することができます（例:
<a href="URL">リンク</a>）。 - HTMLの記述には、インデント（字下げ）を使うと、コードが見やすくなります。