ページの基本構造

まずは、ブラウザーに読んでもらう土台を作ります。

文法だけ見る

何をする書き方？

HTMLは、文章が「見出し」なのか「段落」なのかをタグで伝えるマークアップ言語です。headにはページの設定、bodyには画面に表示したい内容を書きます。見た目を整える前に、内容の役割を決めましょう。

基本の形

<要素名>内容</要素名>

<!doctype>HTMLの文書であることを宣言します。

head文字コードやページ名などを設定します。

body画面に見せる文章や要素を置きます。

短い例で確かめる

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>練習ページ</title>
</head>
<body>
  <p>こんにちは</p>
</body>
</html>

結果

こんにちは

準備・実行方法を確認する

テキストエディターで index.html を作り、UTF-8で保存します。ファイルをブラウザーで開くと表示を確認できます。変更したら保存して再読み込みしてください。

もう少し詳しいコードを見る

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>私の最初のページ</title>
</head>
<body>
  <h1>こんにちは。</h1>
  <p>今日から、コードを始めます。</p>
</body>
</html>

結果

こんにちは。今日から、コードを始めます。

ここで、書き換えてみよう

文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。

HTMLの練習コード

一問だけ、復習しよう

「ページの基本構造」の書き方はどれ？

少し変えてみよう

h1の「こんにちは。」を、自分の名前に変えてみましょう。titleも変えると、ブラウザーのタブの名前が変わります。

つまずいたら、ここを確認

閉じタグの / を忘れがちです。ただしmetaやimgなど、閉じタグを持たない要素もあります。

自分の言葉でメモ

分かったこと・あとで確かめたいこと

記録はこのブラウザーに保存されます。

公式資料で詳しく読む次：見出しと文章