職業訓練の授業で、HTML5について学びました。
これまでHTMLを書いてきましたが、今回の授業で特に印象に残ったのは、<header>や<nav>などの「意味を持つ要素」です。
これまでは、ページのまとまりを作るときに<div>を使うイメージが強くありました。
しかし、意味に合わせて要素を使い分けることで、HTMLのコードがぐっと読みやすくなることを知りました。
HTML5で学んだこと
授業では、HTML5で広く使われるようになった機能や要素について学びました。
特に印象に残ったのは、次の内容です。
・動画や音声をHTML上で扱えること
・ページ内の役割を表す要素が用意されていること
・以前よりシンプルに記述できる部分があること
動画には<video>、音声には<audio>を使います。
以前は外部の技術に頼っていた処理も、HTMLの要素として記述できるようになったと知り、Webページでできることの広さを感じました。
意味を持つ要素でコードが読みやすくなる
今回学んだのは、次のような要素です。
<header>は、ページや記事の導入部分を表します。
<nav>は、メニューなどのナビゲーションを表します。
<section>は、内容ごとのまとまりを表します。
<footer>は、ページや記事の末尾部分を表します。
これらを使うと、コードを見ただけで、それぞれの場所が何のためにあるのかを判断しやすくなります。
たとえば、すべてを<div>で囲んだ場合、クラス名を確認しなければ役割が分かりません。
一方で、<nav>と書かれていれば、そこがナビゲーション部分だとすぐに分かります。
この違いは、実際にコードを書いてみると想像以上に大きかったです。
CSSを書くときにも整理しやすい
HTMLの役割が分かりやすくなると、CSSを書くときも考えやすくなります。
「ナビゲーションの色を変えたい」
「ヘッダーの余白を調整したい」
このようなときに、どの部分へスタイルを設定すればよいのかを判断しやすくなります。
もちろん、HTMLの要素だけでデザインが完成するわけではありません。
それでも、最初にHTMLの構造をきちんと考えておくことで、その後のCSSも整理しやすくなると感じました。
家を建てる前に、柱や部屋の配置を決めておくようなものですね。
土台が整理されていれば、その上にデザインを組み立てやすくなります。
HTMLは見た目だけを作るものではない
今回の授業を受けるまでは、HTMLはWebページに文字や画像を表示するためのもの、という理解が中心でした。
しかし、HTMLには、文書の内容や役割を伝える働きもあります。
見た目が同じページでも、どの要素を使って書くかによって、コードの読みやすさは変わります。
今後は、ただ画面に表示できればよいと考えるのではなく、「この内容にはどの要素が合っているのか」を意識して書いていきたいです。
実際に作りながら覚えていきます
HTMLの要素は、名前や意味を読むだけでは、なかなか覚えられません。
ぼく自身、今回の授業で説明を聞いたときよりも、実際にコードを書いたときのほうが理解できました。
まずは、次のようなシンプルなページを作ってみるとよさそうです。
・ページ上部に<header>を置く
・メニュー部分に<nav>を使う
・本文を<section>で分ける
・ページ下部に<footer>を置く
最初から複雑なサイトを作る必要はありません。
小さなページを何度も作りながら、それぞれの要素の役割を覚えていきましょう。
まとめ
今回の職業訓練では、HTML5について学びました。
特に印象に残ったのは、<header>や<nav>など、意味を持つ要素です。
適切な要素を使うことで、ページの構造が分かりやすくなり、CSSを書くときにも整理しやすくなります。
まだ学び始めたばかりですが、HTMLは単に文字や画像を表示するだけのものではないと分かりました。
これからは、コードが動くかどうかだけでなく、読みやすく、意味の伝わるHTMLを書けるように練習していきます。
まずはシンプルなページから、コツコツ作っていきましょう。
コメント