<CodeLearn/>
HTML レッスン1

HTMLの基本構造

Webページの骨格となるHTMLの基本を学ぼう

HTMLとは

HTML(HyperText Markup Language)は、Webページの構造を定義するマークアップ言語です。 ブラウザはHTMLを読み取り、画面に表示する内容と構造を理解します。

すべてのWebページはHTMLで構成されており、Web開発の最も基本的な技術です。 「タグ」と呼ばれる記号で文書の構造を記述します。

DOCTYPE宣言

HTMLファイルの先頭には、必ず <!DOCTYPE html> を記述します。 これはブラウザに「このファイルはHTML5で書かれている」と伝える宣言です。

  • <!DOCTYPE html> - HTML5の文書型宣言(必須)
  • この宣言がないと、ブラウザが古い互換モードで表示する場合があります

html / head / body

HTMLの基本構造は3つの主要な要素で成り立っています:

  • <html> - ドキュメント全体を囲むルート要素
  • <head> - メタ情報(タイトル、文字コードなど)を記述する領域
  • <body> - ブラウザに表示されるコンテンツを記述する領域

meta charset と title

<head> 内には重要なメタ情報を記述します:

  • <meta charset="UTF-8"> - 文字エンコーディングの指定。日本語を正しく表示するために必須
  • <title> - ブラウザのタブに表示されるページタイトル
  • <meta name="viewport"> - スマホ対応のための表示設定

はじめてのWebページ

基本構造をすべて含んだHTMLページです。コードを編集して結果を確認してみましょう。

index.htmllazy
13 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview

まとめ

  • <!DOCTYPE html> でHTML5を宣言する
  • <html> がルート要素で、<head><body> を含む
  • <meta charset="UTF-8"> で文字コードを指定する
  • <title> でページタイトルを設定する
  • <body> 内に表示したいコンテンツを書く