Webサイトを作るHTMLの基本的な構造タグと要素

この記事ではWebサイトを作るために必要なHTMLの基礎について解説していきます。

1 Webサイトを作るHTMLの基本タグ・要素・属性
2 HTMLの構造
- 2.1 DOCTYPE宣言
- 2.2 HTMLの構造
3 まとめ

Webサイトを作るHTMLの基本タグ・要素・属性
HTMLの構造
1. DOCTYPE宣言
2. HTMLの構造
まとめ

Webサイトを作るHTMLの基本タグ・要素・属性

HTMLとは、HyperText Markup Languageの略で、Webページの文書を記述するためのマークアップ言語です。コンピュータがわかる言語で文書を作成します。また、マークアップ言語は「プログラミング言語」ではありません。

HTMLのタグ

HTMLを記述していく上で、要素をタグ < > で挟んで記述していきます。タグには開始タグと終了タグをセットで使う要素と、終了タグがない要素があります。

開始タグと終了タグ

開始タグと終了タグがある要素の記述の仕方です。終了タグにはスラッシュを記述します。

<開始タグ> 内容 <終了タグ>

<h1>タイトル</h1>

終了タグがない要素

終了タグがない要素は下のimg要素のようにタグ内に要素を記述します。また、終了タグがない要素を空要素といいます。空要素は親要素にはなれません。

<タグ> 内容

<img src=”URL” alt=”#”>

要素

要素は内容を含めた開始タグから終了タグまでの一文を要素といいます。下はh1要素です。

タグと要素の違いは、<h1>、<p>、<a>のようなときは「h1タグ」といい、タグがない h1、p、a のときは「h1要素」、「p要素」、「a要素」といいます。

属性

HTMLの記述にはタグ内に属性を記述します。静的・動的なデザインの設定、そのほか動作の調整や位置の調整をするために記述します。

＜開始タグ属性=”属性値“＞内容＜/終了タグ＞

<div class="text">
        <p>テキストテキストテキストテキストテキスト</p>
</div>

この場合、 class=”text” が属性の部分になります。もう少し説明すると class を属性といい、”text” が属性値になります。属性値は “” ダブルクォーテーションで挟んで記述します。

id属性とclass属性

さて、静的・動的なデザインの設定、そのほか動作の調整や位置の調整には属性を設定るすると前述しました。属性ではid属性とclass属性が必須になるので説明します。この２つはグローバル属性となり、HTML要素で共通して使うことができます。

id属性・・・id属性の属性値は一か所でのみしか使用することができず重複はできません。

claass属性・・・class属性は複数個所で同じ属性値を使用することができます。

HTMLの構造

DOCTYPE宣言

HTML文書を作成するときに一番上に記述するのがDOCTYPE宣言です。DOCTYPE宣言はHTMLファイルのバージョンをブラウザに伝えるために記述します。

<!DOCTYPE html> を記述したあとに <html lang=”ja”> を記述していきます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Webサイトの説明文">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

HTMLの構造

<head>

headにはWebページを作るための情報（メタ要素）、title要素やWebサイトの説明文、link要素、Webフォントの設定などを記述していきます。headの内容はWebブラウザには表示されません。

メタ要素・・・

UTF-8という文字エンコードで書きますということを意味しています。この宣言がないと文字化けを起こしてしまう原因となります。

Googleなどの検索エンジンで上位表示するためのSEO対策のため記述します。

title要素・・・Webブラウザのタブに表示されるタイトルを記述します。

link要素・・・link要素にはCSSなどの外部ファイルの読み込みやWebフォントなどを指定するリンクを記述します。

<link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

<body>

bodyにはWebページの内容となる部分を記述します。<body>タグ内に、<header>・<main>・<footer>の内容をそれぞれ書きます。

<header>

headerはWebサイトの各ページの上部のことを指します。ナビゲーションや検索フォーム、プロフィールなどのメニューバーにあたる部分です。

<main>

Webページの文書の中で主要となるコンテンツをmainに記述します。mainだけではなく、間接的な内容を示すasideなどを追加することができます。

<footer>

footerはWebページの一番下の部分です。footerには著作者やコピーライト、プライバシーポリシー、お問い合わせ、SNS情報を記述します。