HTMLの基本構造を現役デザイナーが解説【初心者向け】

初心者向けにHTMLの基本構造について解説しています。HTMLはどういったマークアップ言語であるのか、またその基本構造について説明します。Webサイト作成の一番基礎となる部分なので、しっかりと理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLの基本構造について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

HTMLの基本構造について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLについて

HTMLは、HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略語です。イギリスの計算機科学者ティム・バーナーズ=リー氏によって設計されました。

ブラウザの技術に文書として識別させるためには、かならずHTMLが必要です。ブラウザがHTMLを読み込んでから、ブラウザが処理するための情報に変換されて、ブラウザに搭載された処理機構(エンジン)によるCSSやJavaScriptの動作につながります。HTMLに文法や構文の誤字脱字(エラー)がありますと、ブラウザが処理するための情報に正しく変換されず、動作不良になってしまいます。

 

HTML文書の基本構造について

構造の骨格を下記に列挙します。

  • HTML文書の種類の宣告文
  • htmlタグ
    • headタグ
      • メタ情報(metaタグ)
      • サイト情報(titleタグ)
      • 外部ファイル情報(linkタグ、scriptタグなど)
    • bodyタグ
      • 文書情報
        • ブロックレベル要素(HTML5から追加されたheaderタグなども含めて、divタグ、h1~6タグ、pタグ、ulタグ、liタグ、formタグなど)
        • インライン要素(inputタグ、aタグ、imgタグなど)
        • その他(テーブル要素、汎用セクション要素など)

この形式にてHTMLを定義することによって、ブラウザがbodyタグの内部を文書として画面に表示します。HTML文書の雛形として下記にサンプルコードを用意しました。

See the Pen
2020-01-20-sample08
by YOHEI INAI (@yohei_inai)
on CodePen.

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

一般的なWebサイトの基本構造について

一般的には、文書のデータとしてHTMLだけではなくて、見栄え(デザイン)を定義するためのCSS(Cascading Style Sheets:カスケーディング・スタイル・シート)や、振る舞いの表現や計算を処理するためのJS(JavaScript:ジャバスクリプト)によって構成されています。 下記に一般的なWebサイトの基本構造として、具体的なサンプルコードを用意しました。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Webサイトのタイトル</title>
  <meta name="description" content="Webサイトの概要">
  <meta name="keywords" content="Webサイトのキーワード1, Webサイトのキーワード2, Webサイトのキーワード3">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <header>
画面のヘッダーとしてロゴやナビゲーションを配置します。
  </header>
  <main>
画面のコンテンツやサイドバー(メニュー)を配置します。
  </main>
  <footer>
このWebサイトのコピーライトなどを表記します。
  </footer>
</body>
</html>

 

css/style.css

header {
  width: 1000px;
  margin: 0 auto;
}

main {
  width: 1000px;
  margin: 0 auto;
}

footer {
  width: 1000px;
  margin: 0 auto;
}

 

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。