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ページです。コードを編集して結果を確認してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
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>内に表示したいコンテンツを書く