HTMLの基礎②

テキスト目次 > HTMLとCSSの基礎 > HTMLの基礎②

HTMLの書き方を１から解説します。HTMLを書き始めるための基本的な構造やタグを理解することで、ウェブページの作成ができるようになります。

目次

HTMLとは

HTML (HyperText Markup Language) は、Web ページを作成するためのマークアップ言語です。

HTMLファイルは、標準テキストエディター (例: Notepad・TextEdit) を使用して作成できます。通常は .html または .htm の拡張子で保存します。

マークアップ言語とは、データや文書に構造を与えるために使われる言語のことを指します。

マークアップ言語では、特殊なタグや記号を使用して、データや文書の中で、見出しや段落、リンクや画像などの構造を記述します。

上記の<h1>とか<p>が、タグと呼ばれるもので、このタグの使い方・意味を学ぶのがHTMLの勉強になります。

HTMLの基本構造

HTMLは決まった形のテンプレート（基本構造・枠組み）が存在します。以下が、HTMLの基本構造です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML

実際にWebページのコンテンツとして表示されるのはbodyタグで囲われた「<!– ここにウェブページの内容を記述 –>」の内容だけ。

HTMLはそれ以外にもページ全体の情報を含むheadタグや、このファイルがHTMLファイルであることを示すhtmlタグなども存在します。まずは、HTMLファイル全体の構造がどのようになっているかを１つ１つご説明していきます。

HTMLの基本①：<!DOCTYPE html> ―ドキュメントタイプ宣言

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML

<!DOCTYPE html>は、ドキュメントタイプ宣言と呼ばれるもので、HTML文書の先頭に記述されるべき宣言です。

ドキュメントタイプ宣言は、ウェブブラウザにこの文書がどのバージョンのHTMLで書かれているかを伝えるために使われます。この宣言によって、ブラウザは文書を正しいルールに従って解釈・表示することができます。

ドキュメントタイプ宣言の意味と役割

  • HTMLファイルであることを示す
  • HTMLのバージョンを示す

これを省略すると、ブラウザは適切なモードで文書を解釈できず、意図しない表示や動作が起こる可能性があります。

したがって、HTML文書を作成する際には、必ず<!DOCTYPE html>を先頭に記述しましょう。

HTMLの基本②：htmlタグ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML

<html>タグは、HTML文書のルート要素（最上位の要素）を表します。

HTML文書のすべての要素は、<html>タグの内部に配置される形になります。<html>タグは、文書全体の構造と内容を包含し、ウェブブラウザにこの文書がHTMLであることを示す役割を果たします。

htmlタグはおまじないみたいなものなので、とりあえず１つのHTMLファイルに対して必ず１つのhtmlタグを記載するようにする！と覚えておけばOK。

Tips

<html>タグには、lang属性がよく使われます。

lang属性は、文書の主要言語を指定するために使用され、検索エンジンやスクリーンリーダーに言語情報を提供します。例えば、文書が英語で書かれている場合、<html>タグは次のようになります。

<html lang="en">
HTML

このように、<html>タグはHTML文書の基本的な構成を提供し、文書のメタデータと表示されるコンテンツを含む要素を包含します。新しいHTML文書を作成する際には、<html>タグを適切に使用して、文書の構造を明確にしましょう。

<html>タグは、通常、以下の2つの主要な子要素を持ちます。

  • <head>タグ
    <head>要素は、文書のメタデータや外部リソースへのリンク（CSSやJavaScriptファイルなど）を格納します。メタデータには、文書の文字エンコーディングやタイトル、説明、キーワードなどが含まれます。<head>要素は、ブラウザに情報を提供するだけで、通常、ユーザーに直接表示されることはありません。
  • <body>タグ
    <body>要素は、ウェブページの表示されるコンテンツを含みます。これには、テキスト、画像、リンク、リスト、フォーム、マルチメディアなど、さまざまなHTML要素が含まれます。<body>要素の内容は、ブラウザによってユーザーに表示されます。

HTMLの基本③：headタグ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML

<head>タグは、HTML文書のメタデータやリンク情報を格納する部分を表します。<head>要素は、HTML文書の<html>タグ内に存在し、通常、<body>タグの前に配置されます。この要素の内容は、通常、ウェブページ上には直接表示されませんが、ブラウザや検索エンジンが文書に関する情報を把握するために利用されます。

例えば、ブラウザのタブに表示される名称の定義などがbodyタグの中に記載される情報の例です。

図1：<head>タグ内の<title>タグ

タブに表示されるページ名称の他にも、 文字コードの指定やスタイル（CSS）などを記述したり、 そのページの作者情報・検索エンジン向けの情報などを記述したりすることもできます。

headタグ内に含まれる主な要素は以下の通り。

headタグ内の主な要素

  • <title>タグ
    ウェブページのタイトルを表し、ブラウザのタブやウィンドウのタイトルバー、検索エンジンの結果に表示されます。
  • <meta>タグ
    文書に関するメタデータを提供します。文字エンコーディング、ページの説明、キーワード、著者情報、ビューポート設定（レスポンシブデザインに必要）などが含まれます。
  • <link>タグ
    外部リソース（主にCSSファイル）をウェブページにリンクするために使用されます。
  • <script>タグ
    JavaScriptコードや外部JavaScriptファイルへのリンクを記述するために使用されます。ただし、現代のウェブ開発では、パフォーマンス上の理由から、<script>タグは主に<body>タグの終了直前に配置されることが一般的です。
  • <style>タグ
    ウェブページのインラインCSSスタイルを記述するために使用されます。ただし、通常は外部CSSファイルにスタイルを格納し、<link>タグでリンクすることが推奨されています。

これらの要素を使用して、<head>タグ内にウェブページに関する情報を提供し、外部リソースへのリンクを設定することができます。これにより、ブラウザや検索エンジンは、文書を適切に解釈し、表示や検索結果のランキングに適切な情報を利用できるようになります。

HTMLの基本④：bodyタグ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML

<body>タグは、HTML文書の表示されるコンテンツを格納する部分を表します。<body>要素は、HTML文書の<html>タグ内に存在し、通常、<head>タグの後に配置されます。この要素の内容は、ウェブページ上に直接表示され、ユーザーが閲覧・操作できる部分です。

<body>タグ内がHTMLファイルのメインとなる部分で、この部分に実際の見出しや段落、画像やリンクなどでマークアップしたテキストを記述していきます。

以下は、一般的に使用される要素のいくつかの例です。

一般的なHTMLタグ

  • <h1>～<h6>
    見出しを表し、<h1>が最も大きく重要で、<h6>が最も小さく軽微です。
  • <p>
    段落を表します。
  • <a>
    ハイパーリンクを表し、他のページやWebサイトへのリンクを提供します。
  • <img>
    画像を表示するために使用されます。
  • <ul>と<ol>
    点や番号付きのリストを作成するために使用されます。リスト項目は<li>タグで表現されます。
  • <table>
    テーブルを表し、<tr>（行）、<th>（見出しセル）、<td>（データセル）などの子要素と共に使用されます。
  • <form>
    入力フォームを作成するために使用され、<input>や<textarea>、<button>などの子要素が含まれます。
  • <div>と<span>
    コンテンツのグループ化やスタイリングの目的で使用される汎用的なコンテナ要素です。

これらの要素を使用して、<body>タグ内にウェブページの表示されるコンテンツを構築します。また、CSSやJavaScriptと組み合わせることで、見た目や動作をカスタマイズし、よりインタラクティブで魅力的なウェブページを作成することができます。

新しいHTML文書を作成する際には、<body>タグを適切に使用して、文書の表示部分の構造を明確にしましょう。これにより、ユーザーにとって使いやすく、情報が伝わりやすいウェブページができあがります。

HTMLの書き方の基礎：タグと要素

HTMLには、タグ、要素という２つの重要なキーワードがあります。

図2：タグと要素

タグ・要素

  • タグ
    タグは、HTML要素の開始と終了を示すために使われます。タグは、<と>で囲まれたキーワードで構成されます。ほとんどのHTML要素には、開始タグ（例: <p>）と終了タグ（例: </p>）のペアが必要ですが、一部の要素は自己閉じタグ（例: <img />）を持ちます。
  • 要素
    要素は、HTML文書の構成要素であり、開始タグ、終了タグ、要素の内容、および属性から構成されます。要素は、ウェブページの構造やコンテンツを表現します。例えば、<p>要素は段落を表し、<a>要素はリンクを表します。

HTMLの書き方の基礎

HTML：タグの基本的な使い方

タグは以下のように開始タグと終了タグをセットで利用します。

<開始タグ>～</終了タグ>

開始タグと終了タグがないと、どこからどこまでをマークアップすれば良いか？という情報が分からなくなるため、開始タグと終了タグは基本的には２つセットで用います。

はじめのうちは、終了タグの「/」を忘れてしまうことがあるため、注意が必要です。

HTMLタグの使い方―基本ルール

  • マークアップしたい内容を「開始タグと終了タグで囲む」
  • 終了タグには「/」（スラッシュ）を付けて終了タグであることを明示する
<p>これは、HTMLの例です。</p>
HTML

HTML：タグの書き方（大文字・小文字）

タグは大文字でも小文字でもOKです。もしくは、大小織混ぜてもOKです。

例えば、開始タグだけor終了タグだけを大文字で記述しても問題ありません。

<H1>見出し1</h1>
<h2>見出し2</H2>
HTML

全角で書こうが半角で書こうがシステム的には同じ意味で解釈されます。

ただし通常は小文字を用いるので、小文字で記載するようにしておくと良いでしょう。

そのうえで、HTMLではタグに全角を利用することはできないという点には注意が必要です。

<p>これは問題なし</p>

＜p＞かっこが全角なのでNG＜/p＞

<ｐ>Pが全角なのでNG<ｐ>
HTML

たまに、HTML初心者の方が間違えるところです。

HTML―コメント行挿入

HTMLではコメントを挿入することができます。コメントとは、コード中に挿入するメモ書きのようなものです。

<h1>見出し1</h1>

<!-- このコメントは表示されない -->

　　<p>段落の開始</p>
HTML

↑コメントはブラウザでは表示されません。コメントはあくまでもプログラマーがソースコードをデバッグした際に見るメモ書きです。

コードを見ただけでは何をしているのかわからない部分にコメントを挿入しておくと便利です。

HTML：タグを入れ子にして利用できる

HTMLでは、タグを「入れ子」構造で利用することができます。冒頭で解説したHTMLもよく見ると入れ子構造になっていることがわかるはずです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML
図3：タグの入れ子―イメージ

以上がHTMLの基本的な書き方・基礎となるルールのすべてです。このページで解説した内容を基本として応用的なテクニック・スキルを学んでいきましょう。

このページのまとめ

  • 基本構造
    HTML文書は、<!DOCTYPE html>宣言から始まり、<html>タグで全体を囲みます。<html>タグ内には、<head>タグと<body>タグが配置されます。
  • <head>タグ
    文書のメタデータや外部リソースへのリンク（CSSやJavaScriptファイルなど）を格納します。主な要素には、<title>、<meta>、<link>、<script>、<style>などがあります。
  • <body>タグ
    ウェブページの表示されるコンテンツを含みます。テキスト、画像、リンク、リスト、フォーム、マルチメディアなどのさまざまなHTML要素が含まれます。
  • タグと要素
    HTMLはタグを使用して要素を表現します。タグは、開始タグ（例: <p>）と終了タグ（例: </p>）のペアで構成されます。
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
</head>
<body>
  <!-- ここにウェブページの内容を記述 -->
</body>
</html>
HTML

チェックテスト

チェックテストを確認する

文書のメタデータや外部リソースへのリンクなど画面には表示されない設定タグを格納するタグ名を discordにて共有ください。

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP