こんにちは！ProgRiroです。
本日のテーマは「HTMLの基本要素」です。Webページを構成するための超基本要素をまとめたので、復習がてら読んでいっていただけると幸いです。
Contents
1. 前回のおさらい
以前の記事ではHTMLの環境構築を行いました。
いきなりですが、以前学習した内容についての問題です。
【3択問題】環境構築とは何でしょうか？
- 学習に集中するため、身の回りの整理をすること
- ソフトウェアが動作する環境を整える作業のこと
- プログラミングをするため、パソコンを自作すること
正解は…
2. ソフトウェアが動作する環境を整える作業
知らなかった or 忘れていたという方は、以下の記事をご覧ください。
以前の記事をお読みになった方であれば
- Visual Studio Code（テキストエディタ）
- Google Chrome（ブラウザ）
- フォルダ
が準備されているはずです。
プログラムをする環境は整いました。
「よし！HTMLでWebサイト作るぞ！」と思われているかもしれません。
しかし、まだプログラムを記述するファイルを作成していませんね。これがないと、そもそもプログラムを記述することができません。
次の項目ではプログラムを記述するファイルを作成する手順を解説します。
2. ファイルの作成
この項目では、環境構築に必要な
- テキストエディタ（済）
- ブラウザ（済）
- フォルダ（済）
- ファイル
のうち、まだ作成していない「ファイル」を作成していきます。
前回は以下のところまで進んでいました。
サイドバーにある ①「新しいファイル」
をクリックします。
表示された入力欄に ② 任意のファイル名（○○.html）を入力します。
今後の説明が理解しやすくなるように今回は「index.html」としてください。
任意のファイル名（○○.html）を ③ 入力後 enterキー を押します。
サイドバーに「index.html」が表示されていたら ④ ファイルの作成 完了です。
3. Visual Studio Code による自動入力
ファイルが作成できたところで、Visual Studio Code の強みである自動入力を実際に体験してみましょう。
まずは、拡張機能をインストールする必要があります。以下の記事を読んでみてください。
【+α】Visual Studio Code の便利な拡張機能を紹介！
先程作成したファイルに ①「ht」と入力します。すると、入力の候補が出てくるので ②「html:5」を選択して enterキー を押します。
以下のような文字列が自動で入力されましたね！これが Visual Studio Code の自動入力機能です。便利ですね！
4. <!DOCTYPE html> とは
自動入力された文字列の1行目に
という文字列がありますね。
これは一体何を意味しているのでしょうか。
ズバリ、これは
- 文書がHTML5で作成されたものであること
- 文書がどのバージョンのHTMLを使用しているか
を示す宣言です。正式名称は Document Type Definition（文字型宣言）と言います。
HTML5というのは今現在における最新のHTMLのバージョンです。特に指定のない限り、この宣言で大丈夫です。ここではHTMLのバージョンについては詳しく説明しません。気になる方は調べてみてください。
5. HTMLの基本要素
HTMLには複数の基本要素が存在します。
本日は、Webページを作成するために必ず必要である
<html>
<head>
<body>
の3つを紹介します。
5-1. <html> とは
html要素は、HTMLファイルにおいて1番外側に当たる部分です。
【HTML】HTMLとは何かを徹底解説！ の例を参考にすると、この画像の日本列島（1番外側）ということになります。
つまり、これ以降記述する要素は全て html要素 の中に記述することになります。
5-2. <head> とは
自動入力された文字列の3, 8行目に「<head> … </head>」という文字列がありますね。
この「<head> … </head>」内に
- 文字コード
- ページタイトル
- CSSの情報
- JavaScriptの情報
などを記述します。
この詳しい話は、次回の記事を参考にしてください。
5-3. <body> とは
自動入力された文字列の9, 11行目に「<body> … </body>」という文字列がありますね。body要素の内側に記述した内容がブラウザ（Google Chrome）画面に表示されます。
6. 最後に
基本的な内容を理解していくことが実践力をつける近道です。頑張っていきましょう！
最後までお読みいただき、ありがとうございました。
