初めてのHLML入門④
・HTMLの基礎
前回紹介したのはHTMLで必ず使うタグでした。
前回のnoteはこちら
それに対して今回はよく使われるタグを紹介していきます。
・meta
これは、文書の情報を伝えるために使われるタグです。
そういわれてもよくわからないかもしれませんが、使い方は実際に書きながら見ていきましょう。
・title
この文書のタイトルを伝えるために使われます。
・div
一つの塊を示します。
・span
文章の一部を示す。
では実際にこれらがどのように使われるのか確認をしていきましょう。
HTMLを書いてみる①
前回作ったファイルを利用しましょう。
※太字のタグは今回追加した内容です※
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
↑「UTF-8」という文字コードで
書かれていることを示す。
※metaタグは、情報を伝えるタグですので、
「ここから」「ここまで」のような二つのタグで
挟む必要はありません。
<title>MyPage</title>
↑このHTML文書のタイトルが「MyPage」
であることを示すことができます。
</head>
<body>
</body>
</html>
WEBページに表示させる①
では上書き保存をして、このようなHTMLファイルがどのように表示されるのかを実際に確認してみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
</body>
</html>
表示させると、タブのところに「MyPage」と書かれています。これが、この文書のタイトルであることを意味します。
HTMLを書いてみる②
続いては、一つの塊であることを示す”div”というタグの使い方について学んでいきましょう。"div"は表示させる内容なので”body”タグの内側に書くことになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これはdivです。</div>
</body>
</html>
WEBページに表示させる②
上書き保存をして、ブラウザを更新してみましょう。
すると、これはdivです。という風に表示されていると思います。
HTMLを書いてみる③
同じように、今度は文章の一部であることを示す”span”タグを書いてみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これはdivです。</div>
<span>これはspanです。</span>
</body>
</html>
WEBページに表示させる③
上書き保存をして、ブラウザを更新してみましょう。
すると、「これはspanです。」と表示されました。
この内容では、"div"タグと”span”タグの違いが分かりづらいかもしれません。
"div”タグはタグの内側が一塊であることを示すブロック要素と呼ばれるもので、”span”タグは文章の一部を示すインライン要素であるということがポイントです。
HTMLを書いてみる④
”div”と”span”の違いを分かりやすくするために、
"div”タグの内側に”span”タグを入れてみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これは<span>div</span>です。</div>
<span>これはspanです。</span>
</body>
</html>
WEBページに表示させる④
上書き保存をして、ブラウザを更新してみましょう。
見た目は何も変わっていませんが、実際には「div」の三文字が”span”タグで囲まれています。
それでは、”<div>これは<span>div</span>です。</div>”
を、”<div>これは<div>div</div>です。<div>"
のように、</div>に書き換えるとどのようになるでしょうか？
上書き保存をして、ブラウザを更新してみましょう。
”div”というタグは一つのブロックを示しています。
前の内容、後ろの内容とは別になるように表示される、
というのがブロック要素の基本です。
ですので、このように要素ごとに改行された状態で表示されました。
ブロック要素とインライン要素という二種類があるということは非常に重要なポイントですので是非この二つを覚えておきましょう。
この note は”TechAcademy”の動画で学んだことを文字に起こして
備忘録及び自分のアウトプットとして公開しています。
https://youtu.be/-51d4Z3FFw8
実際に動画を見ながら手を動かすのも有効だと思います。
いきなりハードルを上げると挫折してしまうので、簡単なことから継続して徐々にレベルアップしていきましょう。
この記事が気に入ったらサポートをしてみませんか？