html-semantic

semantic

Transcript

1. 【HTML】奥が深い セマンティクスの話 初めてのLT会 Vol.11 2022年3月12日
2. 目次 自己紹介 テーマを選んだ理由 セマンティクスとは？ HTMLタグの話 まとめ
3. やっぷ 徳島県在住 プラクティスはSinatra 趣味は家庭菜園、自然が好き 自己紹介
4. テーマを選んだ理由 HTMLが好きだから話したい フィヨルドでは習わないと思うので こんな技術もあるんだなーと知る きっかけになればいいなと思った
5. セマンティクスの話
6. そもそも セマンティクスって何？
7. 直訳すると「意味論」 分かりやすくいうと、 コードにどんな意味があるのか を持たせること
8. ティム・バーナーズ＝リーさんが作った概念 URLやHTTP、HTMLを最初に設計したスゴい人 Webはこうあるべきなんじゃない？と考えた セマンティクスについて
9. セマンティック Web
10. なんでこれが重要なの？
11. 意味を持たせることによって、コンピュータ がサイトの内容を理解できるようになる 検索結果の精度が上がるので、自分が本当に 求めてる情報を手に入れられる 情報を提供する側は、本当に届けたいユーザ に届けられてハッピー！ 1. 2. 3. 重要な理由
12. セマンティクスとは Web全体を より良くするためにあるもの
13. なんとなく セマンティクスの概要はわかった けど、具体的に何すればいいの？
14. 色々あるみたいだけど まずは... 構造化データ Schema.org
15. HTMLタグを適切に使うこと
16. この辺でちょっとまとめます。
17. なんだかややこしかった かもしれませんが 要するに...
18. コードには意味を持たせよう
19. それでは　 HTMLの話です。
20. みなさんご存知の通り、 HTMLはこんな感じで書かれます。
21. 初めてHTMLを学んだ時 1つ疑問に 思いませんでしたか？
22. 「p」ってなんやねん...
23. 「p」は　 「paragraph（段落）」 でした
24. 「p」は要素の名前（役割）のこと タグの中身がどんな情報かという 　 意味を表現しているもの
25. HTML要素を適切に使えば セマンティックWebに 1歩近づけそうですね。
26. 残念なお知らせがあります。
27. HTML要素の種類は 100以上ある （142くらいだった...）
28. 全てを完璧に 使いこなすのは不可能
29. 諦めないで
30. 少しづつ覚えましょう
31. 最後に
32. HTMLタグの種類多すぎるし、 めんどくさい
33. 全部「div」でも 問題ないんじゃない？
34. はい。問題ないと思います。 状況と場合によって 使い分けてください。
35. こんな世界もあるんだなーと 知ってもらえるだけで 嬉しいです。
36. ご清聴、ありがとうございました！
37. 参考文献 HTML Standard 日本語訳 MDN Web Docs ティム・バーナーズ＝リー （https://momdo.github.io/html） （https://developer.mozilla.org/ja/） （https://ja.wikipedia.org/wiki/ティム・バーナーズ＝リー）