注目キーワード

HTMLの基本構造と必要なタグを理解して基礎練習をする

HTMLの基本構造と必要なタグを理解して基礎練習をする

はじめにHTMLの基本や基礎になるHTMLの基本構造を理解してから、HTMLファイルの土台になるHTMLタグの書き方を覚えていくとHTMLの基礎は分かりやすくなります。

完全にHTMLを覚えてからではなく、ある程度の理解ができたらHTMLの練習を実際にやってみるのが一番の近道です。

 

目次

HTMLの基本構造の基礎

 

HTMLの基本構造とは、HMTLタグでマークアップしていく前の土台作りと、HTMLファイルを問題なくブラウザの画面に表示できるようにするためにHTMLファイルの内部をいくつかの部分から組み立てをする基礎作りのことです。

 

HTMLファイルは基礎作りのためにHTMLタグで記述する必要があり、HTMLタグはHTML要素と呼ばれるブロックで構成されてます。

 

関連　HTMLの基本的な書式や階層関係を理解する

 

HTML文書はHTMLタグを使って構成していくとHTMLファイルの内部が構造化することができ「HyperTextMarkupLanguage」を頭文字をとったHTMLのファイル作成をすることができます。

このときのHTMLの構成で一番初めに必要なのがHTMLの基本構造です。

 

そして基本構造を基礎としてからHTMLタグを使ってのHTML要素作りは、CSSとも密接な関係があって、HTMLをCSSでレイアウトしやすくするためにも基本構造は基礎になります。

 

HTＭLのバージョン

 

HTMLの基本構造に基礎作り、そしてHTMLタグでマークアップしておくときにはHTMLのバージョンを理解しておく必要もあります。

HTMLバージョンは数年おきに改定されて新しいバージョンに変わります。

 

参考 W3C HTMLの仕様

 

2019年5月28日現在はHTML5.2が最新のバージョンです。

 

HTMLドキュメントの基本構造

 

HTMLドキュメントという表現が慣れないと少しわかりずらいかもしれませんが、HTMLドキュメントとはHTML文書のことです。

HTMLドキュメントはルールに則って記述する必要があります。

HTMLの基本構造はHTMLファイル内部をいくつかの部分から組み立てをする基礎作りなため以下のように基礎を作り全体を作っていきます。

 

<!DOCTYPE html>
<html>
　<head>
　HTMLドキュメント自身の情報
　</head>
　<body>
　文章の内容が表示される
　</body>
</html>

 

主に3つの部分に分かれます。

 

HTMLドキュメントの内部のすべての要素となるhtmlタグ

 

ブラウザにHTMLドキュメント自身の内容を伝えるためのheadの部分

 

HTMLドキュメントに書いてある文章をブラウザの画面に表示するbodyの部分

 

このようなHTML基本構造とタグの書き方は、HTMLドキュメントをブラウザの画面に正しく表示する前のブラウザのレンダリングで正しくHTMLドキュメントが読み込めるようにしておくためにも重要です。

 

関連　ブラウザレンダリングの仕組みを覚えておきたい

 

 

 

Advertisement

 

 

基本構造に必要なHTMLタグ

 

HTMLの基本構造に登場した3つのタグは共通するタグです。そしてHTMLファイルには必ず記述するので覚えやすいタグでもあります。

 

 

  • DOCTYPE宣言
  • htmlタグ
  • headタグ
  • bodyタグ

 

 

DOCTYPE宣言はHTMLファイルの中で一番上に記述します。なぜかというとブラウザが、そのHTMLドキュメントを把握するために「このHTMLドキュメントは、どのバージョンで書かれている文書なのか」を判断するために必要だからです。

そのためにHTMLファイルの一番上で、どんな文書かを宣言しています。

 

以下からはDOCTYPE宣言を除いた3つのタグを1つずつ説明していきます。

 

htmlタグは全てのタグの親要素

 

DOCTYPE宣言のすぐ下にはhtmlタグです。

htmlタグはHTMLファイル内に記述する宣言以外のタグの全てのタグの親要素になるタグです。

そのためhtmlタグをルート要素としてhtmlタグの中にはheadタグとbodyタグが入ります。

また文書の最後にはhtmlタグの閉じタグで文書を閉じます。

 

headタグ内に書くタグ

 

headタグの中にはメタデータというメタタグとリンクタグを主に使います。

 

 

  • title
  • meta
  • link

 

 

<title>そのページのタイトル</title>

ページのタイトル

 

 

<meta charset=”utf-8″/>

HTMLファイルの文字コード方式

 

 

<meta name=”description” content=”ページの内容を表す文章”/>

ブラウザの検索結果のタイトル下の説明になる部分

 

 

<link rel=”stylesheet” href=”cssファイルのURL”/>

外部スタイルシートの読み込みをするリンクタグ

 

 

<script src=”JavaScriptファイルのURL”></script>

外部スクリプトを読み込むリンクタグ

 

も少し細かいheadタグの中の意味は下記を参考にしてみてください。

 

関連　【HTML】headタグの場所を見つけて意味を理解する

 

 

bodyタグ内に書くタグ

 

HTMLのheadの閉じタグの下から記述するbodyタグです。

bodyタグ内で使うhtmlタグの種類はたくさんありますが、よく使うタグを挙げてみました。

 

<header>

ヘッダー

 

<footer>

フッター

 

<div>

意味を持たないタグ、主にclass属性やid属性をつけることが多い

 

<p>

文章の段落を作る

 

<br>

改行に使用

 

<a>

ハイパーリンク。指定した要素をハイパーリンクにできる。例えば画像など。

 

<img>

画像を使用するとき

 

<ul>

非序列リスト

 

<ol>

序列リスト

 

<li>

リスト項目

 

<strong>

文字の重要性を強調

 

<h>

見出しh1～h6まである

 

<nav>

ナビゲーション

 

divで囲んでブロックの親要素に使うことがあるクラス名は下記です。

 

wrapper

囲うものの親にする

 

 

container

コンテナ

 

 

main

主要なコンテンツをメインにして使うとき

 

 

side

主要コンテンツには関連するけど関連が少し薄いコンテンツ(サイドバーに使うことがある)

 

 

 

Advertisement

 

 

少しHTMLを書く練習

 

上記で紹介したHTMLタグを使ってHTMLの基本構造を実際に練習がてらブラウザに表示させてみます。

HTML初心者の人でしたら、基本構造を書く流れを書いていくので流れに沿って試してみるといいかと思います。

HTMLの練習の場合はコピペすると、まったく覚えが悪くなるのでHTMLタグは手打ちすることをおすすめします。

 

フォルダ構成

 

  • フォルダにindex.htmlファイル
  • index.htmlと同じ場所にCSSフォルダ作成
  • CSSフォルダの中にstyle.cssファイル

 

 

関連　HTMLファイルの作り方をMacとWindowsで覚える

 

 

<!DOCTYPE html>

 

index.htmlを作成したら、1行目にHTML宣言を記述します。

 

 

<html lang="ja">

 

2行目にhtmlタグを記述します。

 

<head>
　<meta charset="UTF-8">
　<title>Webサイトのタイトル</title>
　<link rel="stylesheet"href="style.css">
</head>

 

htmlタグの次の行にheadの部分を記述します。

 

<body>
<div class="wrapper">

<header>ヘッダー</header>

<div class="container">
　<div class="main">
　　<p>メイン</p>
　</div>    
　<div class="side">
　　<p>サイド</p>
　</div>    
　</div>
<footer>フッター</footer>
</div>    
</body>

 

次にheadの閉じタグのすぐ下にbodyの部分を記述します。

コンテンツを書く部分はコンテンツをブロック単位で要素分けします。

ここまでで、HTMLの基本構造を作ったのですが、実際にブラウザで表示させて確認できるのはheadに記述したサイトのタイトルとbodyに記述した文だけが表示されるだけなので基本構文がどう表示されるかリアル感が伝わりにくいので理解しずらいです。

 

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}
header {
  background-color: aqua
}
.container {
  display: flex;
}
.main {
  background-color: fuchsia;
  width: 70%;
}
.side {
  background-color: darkorange;
  width: 30%;
}
footer {
  background-color: chartreuse
}

 

それなので、スタイルをあててから表示を確認し直すとHTMLの基本構造が、どのように表示されるかの理解とbodyに書いたhtml要素の区別もしやすくなります。

 

 

さらにhtml要素をChromeデベロッパーツールで検証すると「なるほど」と練習したことの理解がさらに早くなります。

HTMLカテゴリの最新記事