めっきりhamlばかりでフロントを書いておりHTMLで久しく書いていなかったのですが、最近HTMLに触れて復習になったのでここにも書いておこうと思います。
HTMLとは
HTMLとはウェブページの土台を作るための言語です。表示したい文字や情報をタグで挟むことによりそれを実現していきます。
とまあ簡単に説明しましたがとりあえずはタグではさむことが重要なんだな、くらいで大丈夫だと思います。
HTMLをブラウザで表示する
<!DOCTYPE html>
<html>
<head>
<title>Qiita</title>
</head>
<body>
<h1>HTMLの超基本！</h1>
<p>HTMLとは</p>
</body>
</html>
最低限のHTMLの基本形を書いたサンプルコードを用意しました。
実際に手を動かした方が分かりやすいのでこれをブラウザで表示してみます。
(※使用ツールはVSCodeです。)
まずはサンプルコードを使用ツールにコピペします。
(※ここで注意点としてはファイル名を必ず○○○.htmlの形式で保存してください。今回はtest.htmlとしています。)
ブラウザへ行きファイルを開きましょう。
ブラウザでHTMLが表示されるかと思います。
<p>HTMLとは</p>
↓
<p>HTMLをブラウザに表示してみる</p>
pタグで挟まれた部分を変更してみます。
ブラウザに戻りリロードしてみると表示も変わりました。
HTMLの基本構造
<!DOCTYPE html>
ファイルの先頭のこれは「このファイルはHTMLの文書です」という宣言の役割を果たします。
<head>
<title>Qiita</title>
</head>
headタグの中には「ウェブページの情報」を書きます。
例えば「検索エンジンやブラウザがそのページを理解するための情報」「CSSファイルの読み込み設定」などです。
headタグの中身は基本的にはブラウザ上に表示されません。今まで見てきた通り「Qiita」の文字はブラウザ上には表示されていませんね。
<body>
<h1>HTMLの超基本！</h1>
<p>HTMLとは</p>
</body>
したがってウェブページの画面に表示されるのはbodyタグの中のものだけになります。
まとめ
headタグの中でウェブページの情報設定をし、bodyタグの中にウェブページの画面に表示したいものを書くというように覚えましょう。
bodyタグで使うタグの種類はたくさんあるのですがそれはまた別の記事にしようと思います。