HTML学習用サンプルページ

このページを写経しながら、HTMLの基本タグに慣れていきましょう。

このページについて

このサンプルページは、HTMLの基本的な構造よく使うタグをまとめたものです。

以下の要素が含まれています。

  • 見出しタグ(h1h3
  • 段落(p
  • リンク(a
  • リスト(ul),(ol
  • 表(table
  • フォーム(form

写経するときは、インデント(字下げ)やスペース、改行の位置にも気を配ると、読みやすいコードを書く練習になります。

リストの例

順不同リスト(ul)

Webページの基本ステップ:

番号付きリスト(ol)

HTMLを学ぶときのおすすめ順序:

  1. ページの基本構造を理解する
  2. テキストとリンクの書き方を覚える
  3. リスト・表・画像などを使ってみる
  4. フォームやレイアウトに挑戦する

表(table)の例

HTMLタグのごく一部を表にまとめています。

タグ 読み方 役割
<h1> エイチ・ワン ページで一番重要な見出し
<p> ピー 段落(パラグラフ)を表す
<a> アンカー リンクを作成する
<img> イメージ 画像を表示する

フォームの例

お問い合わせのフォーム風のサンプルです。

で区切る方がいいです。 ただ要素属性ごとに区切ると行数が膨大になっていきそうなので、視認性は良いのですが、使用しているモニターも大きな画面ではないので

!DOCTYPE

HTML

<head>

</head>

のように1行ごとにまとめるのが、分かりやすそうです。 classはそのように統一して頂きたすかります。初心者なものでご指摘助かります。