セマンティックHTMLとは

date_range 2024/04/25
エンジニアインターン
池田 駿
_229b6317-821d-437e-91b5-380f7547c911

こんにちは、

今日はHTMLの基礎を学習し直していました。

というのも昨日までは思い通りのサイトを表示する、

という"実装優先"の取り組みでCSSを主に学習していたのですが、

HTMLをもう少しちゃんと勉強しようということで

"理解優先"で進めました。

HTMLにもよしあしがある

同じ表示ならサイトの価値は同じかというとそうではありません。

実はインターネット上ではクローラーというものが巡回していて、

WEBサイトを見ては情報を収集しています。

そしてそのクローラーがそのサイトに何が書いてあるのか判断します。

誰かがWEBを検索したときには、クローラーが読み取った内容と

検索エンジンに入れた内容が近いようなWEBサイトを表示します。

ここで関連用語を検索した人にサイトが表示されやすくすることを

「SEOを上げる」と言います。

さて、クローラーはロボットなのでCSSなどで書いたUIを見ることはできません。

HTMLのコードを見てどんなサイトか判断します。

この時HTMLのタグがめちゃくちゃで、階層構造も見た目と違う、

となるとどうなるでしょう?

サイト制作側が重要だと思って強調しているところを

クローラーは重要だと判断してくれなくなります。

という知識を手にしたところで私が昨日まで書いたコードを見てみましょう…

...divとspanばっかですね。てかbrbrbrはやばい。

これではクローラー君が理解してくれるはずもありません。

CSSで見た目を整えるだけではなくて、

HTMLでSEO対策をするのも重要だと学んだ一日でした。

*COMMENT*

  • 井坂 かなこ

    井坂 かなこ

    更新日:2024-04-25 17:58

    *コメント*

    HTMLへの理解を深めているようですね!私も学んだ事はあるとは言え、まだまだ理解できていない部分があるので勉強をしないといけないと思っています、、、。分かっていない場所はどこかと気づくことも大切だと思うので素晴らしいことだと思います!

    *コメント*

  • 寺田 ゆり

    寺田 ゆり

    更新日:2024-04-26 07:14

    *コメント*

    お疲れ様です。
    とてもいい学びですね!
    HTMLでの記述方法は様々ですがシンプルできれいに書けるように頑張ります…!

    *コメント*

  • 水落 えり

    水落 えり

    更新日:2024-04-26 08:24

    *コメント*

    駿くん、HTMLの基本的な構造や意味合いを理解することは、WEBサイト制作において非常に重要なことですね。

    見出しにはhタグ、本文にはpタグ、リストにはulまたはolタグなど、意味に応じた構造化が求められますね。

    アクセシビリティの観点からも、マークアップの重要性は高まっているそうですね。的確なコーディングがなされていれば、視覚障がい者の方々もコンテンツを確実に認識できるようになるようですね✨

    引き続きHTML学習がんばってますね!!
    応援しています!

    *コメント*

  • 石川 航

    石川 航

    更新日:2024-04-26 18:43

    *コメント*

    お疲れ様です
    シンプルで見やすいHTML、簡単に見えて結構難しいですね

    クローラーはCSS以外にも画像の内容も読み取ってくれないので、
    画像を多用した一見美しいデザインのサイトで合っても、
    検索エンジンから見たら大した評価にならないというのは珍しくありません
    画像が多いということは、読み込み時間に影響もでるのが厳しいところ

    画像を使わずCSSだけで作れるデザインも少なくないので、色々試してみましょう

    *コメント*

  • 奥村 優

    奥村 優

    更新日:2024-04-27 08:15

    *コメント*

    お疲れ様です。
    セマンティックに書くことはとても大事ですよね。
    SEOだけでなく見た時もわかりやすくなるので、引き続き頑張ってください!

    *コメント*

  • 吉村 せいこ

    吉村 せいこ

    更新日:2024-04-30 09:44

    *コメント*

    私も学んだ割に全然理解出来てない部分があります。
    自分で作ったものでさえ、見直すとなんだこの記述は?とか、なぜここにこんな記述をかいたのやら‥なんて事もよくあります。
    もっとシンプルに、無駄な記述をなくしていけるよう頑張っていきたいと思います!

    *コメント*

  • 鈴木 健太

    鈴木 健太

    更新日:2024-05-01 09:46

    *コメント*

    表層での見た目を作り出しつつ、文章をマークアップして意味のある構造をつくる、その両立がコーディングの一つの楽しみだと思っています!
    調べてみると、今まで知らなかったタグや属性が見つかってそれもまた面白いです。
    HTMLとの戦いの続報を楽しみにしています。

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード

NEW