HTMLの基本書式について知る【HTMLの書き方入門】

実際にタグを書きながら、HTMLの基本構造にいて学んでいきましょう。

HTML文書と基本構造

HTML学習の用意②制作するサイトの準備で作成した「edbase」フォルダの中に、Webページとして使用するファイルを作ります。

空のファイル index.htmlを作成してください。

index.htmlの、拡張子（.html）はHTML文書であることを示しています。

ファイル名である“index”は、デフォルトファイル（デフォルトドキュメント）として使えるよう決められているファイル名。デフォルトファイルとは、ファイル名が省略されたURLにアクセスされた時に、表示されるファイルを指します。

ブラウザでhttps://skillhub.jp/などのURLを開くと、トップページが表示されます。
これはデフォルトファイルが自動的に表示されているためです。

この仕組みから、サイトのトップページはindex.htmlで作成します。

作成したindex.htmlを使って、HTML文書の基本構造を書いてみましょう。

エディタでindex.htmlを開いてください。
空っぽのファイルに、HTMLページに最低限必要なタグを書いていきます。

<!DOCTYPE html>と<html><head><body>とその終了タグ、合計７個のタグを下記の順番で入力してみてください。
字下げはTabキーを使います。

<!DOCTYPE html>
<html>
  <head>

  </head>

  <body>

  </body>
</html>

最初の<!DOCTYPE html>はこのファイルはhtmlです、と宣言しています。
<html>～</html>は「この中がHTMLでマークアップされている」ことを意味します。

ですので、実際のページの中身は大きく

の２パートに分かれているイメージです。

head要素にはWebページのタイトルや説明など、Webサイトを開いた時には表示されない機械向けの情報が主に入ります。

body要素は、Webサイトを開いて目に見えている部分（文字や画像など）が主に入ります。

それぞれ、作成するページによって書くことは変わります。

次のレッスンではindex.htmlのhead要素を作っていきます。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る