【HTML入門】基本的なタグと要素の使い方

2023.07.10

1 イントロダクション
2 基本的なタグと要素の使い方
3 コード例を交えた解説

イントロダクション

HTMLはウェブページの構造を記述するためのマークアップ言語です。

この記事では、HTMLの基礎となるタグと要素の使い方について解説します。
タグは要素を囲んで意味を持ち、ブラウザに対してどのような内容を表示するかを伝えます。

正しいタグと要素の使い方を学ぶことで、ウェブページの構造をしっかりと作り上げましょう。

基本的なタグと要素の使い方

htmlタグ

<!DOCTYPE html>
<html>
  <head>
    <title>ページのタイトル</title>
  </head>
  <body>
    <!-- ページの内容をここに記述 -->
  </body>
</html>

htmlタグはHTML文書全体を囲むルート要素です。
head要素はページのメタデータやスタイルシートのリンクなどを含み、body要素は実際のページの内容を含みます。

h1〜h6タグ

<h1>見出し1</h1>
<h2>見出し2</h2>
<!-- 以下、h3〜h6の見出し -->

h1〜h6タグは見出しを定義するためのタグです。
h1が最も大きな見出しであり、h6が最も小さい見出しとなります。

pタグ

<p>段落のテキスト</p>

pタグは段落を作成するためのタグです。
テキストの内容をpタグで囲むことで、ブラウザはそれを段落として表示します。

aタグ

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

aタグはリンクを作成するためのタグです。
href属性にリンク先のURLを指定し、リンクテキストをタグで囲みます。

imgタグ

<img src="image.jpg" alt="画像の説明">

imgタグは画像を表示するためのタグです。
src属性に画像のファイルパスを指定し、alt属性には画像の説明を記述します。

コード例を交えた解説

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <p>はじめてのウェブページ作成です。</p>
    <p>以下はリンクの例です。</p>
    <a href="https://example.com">サンプルの公式サイト</a>
    <h2>写真を載せます</h2>
    <img src="image.jpg" alt="美しい風景の写真">
  </body>
</html>

この例では、基本的なHTMLタグと要素を使ってシンプルなウェブページを作成しています。
h1タグで大きな見出しを表示し、pタグでテキストを段落ごとにまとめています。
リンクや画像も適切なタグを使って配置されています。

HTMLの基本的なタグと要素の使い方を理解することで、ウェブページの構造を作成し、内容を適切に表示することができます。
これを基礎として、さらに多彩なHTML要素やスタイルを学び、魅力的なウェブページを作成しましょう。
HTMLのタグと要素は無限の可能性を持っており、それらを適切に組み合わせることで美しく機能的なウェブページを実現できます。

また、HTMLの学習には実際のコーディングの練習が重要です。
上記のコード例を参考にして、自分自身でタグや要素を試してみましょう。
ブラウザで結果を確認しながら、理解を深めることができます。

HTMLはウェブページ制作の基礎となる言語ですので、しっかりと基本をマスターし、柔軟に応用することが大切です。
素晴らしいウェブページを作成するために、HTMLの学習を楽しみながら進めてください。