TOP / HTML・CSSコーディング / HTMLの基本とタグの構造を解説

HTMLの基本とタグの構造を解説

ミサキ

ねぇ、ナナさん！HTMLってなんですか？

ナナ

いい質問ね、ミサキ。HTMLは「HyperText Markup Language」の略で、ウェブページを作るための言語なのよ。

HTMLの定義と役割

HTMLは、ウェブページの内容を構造化するための言語です。これを使うことで、テキストや画像、リンクをウェブブラウザに表示できるようになります。具体的には、以下のような役割があります。

このように、HTMLはウェブサイトの基本的な要素を組み立てる役割を果たしています。

HTML文書の基本構造

HTML文書は、特定の構造を持っています。基本的な構造は次のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>段落のテキスト。</p>
</body>
</html>

ここで、<!DOCTYPE html>はこの文書がHTML5であることを宣言しています。そして、<html>タグの中に、ページのメタ情報や内容が含まれています。

ミサキ

なるほど、全体的な構造が決まっているんですね！

ナナ

そうよ、ミサキ。これを理解することがHTMLを学ぶ第一歩ね。

開始タグと終了タグの説明

HTMLでは、要素を構成するために「タグ」を使います。基本的には、開始タグと終了タグのペアで構成されています。

例えば、段落を作る<p>タグは次のように使います。

<p>これは段落です。</p>

ここで、<p>が開始タグで、</p>が終了タグです。

ブラケットとコーテーションの意味

HTMLでは、タグをブラケット（< と >）で囲みます。また、属性値を指定する際にはコーテーション（"または'）を使います。

例えば、以下のようなコードがあります。

<a href="https://www.example.com">リンクテキスト</a>

この例では、<a>タグが開始タグで、href属性がリンク先のURLを指定しています。このURLはコーテーションで囲まれています。

optionとは

オプション（option）とは、HTMLの特定の要素に追加情報を提供するためのものです。通常、属性として使用されます。例えば、<input>タグは多くのオプション属性を持っています。

<input type="text" placeholder="名前を入力" />

この場合、typeやplaceholderがオプションになります。これらの属性を使うことで、ユーザーインターフェースの動作や表示をカスタマイズできます。

属性（option）の使い方とその重要性

属性は、HTML要素の動作や表示を制御するために非常に重要です。属性は、開始タグの中で指定され、通常は「名前」と「値」のペアで構成されます。

代表的な属性

例えば、画像を表示する際には以下のように書きます。

<img src="image.jpg" alt="説明文" />

ここで、src属性で画像ファイルのパスを指定し、alt属性で画像の説明を提供しています。

ミサキ

属性って、要素をもっと具体的にするために必要なんですね！

ナナ

そう、ミサキ。これを理解することで、よりリッチなウェブページを作成できるわよ。

HTMLのコメント記述方法

HTMLには、コメントを記述する方法があります。コメントは、コードの中で説明やメモを書くときに使います。コメントはブラウザには表示されません。

コメントの書き方は次の通りです。

<!-- これはコメントです -->

コメントを使うことで、他の開発者や自分が後で見たときに理解しやすくなります。

実際のコード例を使った解説

では、実際に基本的なHTML文書を作成してみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>私のウェブページ</title>
</head>
<body>
    <h1>私のウェブページへようこそ！</h1>
    <p>これは私が作った最初のウェブページです。</p>
    <img src="myimage.jpg" alt="私の画像" />
    <a href="https://www.example.com">このリンクをクリック</a>
    <!-- ここに他のコンテンツを追加できます -->
</body>
</html>

この例では、ページタイトルや見出し、段落、画像、リンクが含まれています。コメントも追加して、他の人に説明を加えています。

まとめ

HTMLはウェブページを構成するための基本的な言語で、開始タグと終了タグのペアで要素を作成します。属性を使用することで、要素の動作や表示を細かく設定できます。また、コメントを使えば、コードの中での説明を残すことができ、後で見返すときに役立ちます。

ミサキ

なるほど、HTMLの基本がわかってきました！

ナナ

いい感じよ、ミサキ！これからもっと色々なことを学んで、素敵なウェブデザイナーになってね。

← 前の記事 次の記事 →