Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
セマンティックマークアップ
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Kaneko Takeshi
August 30, 2019
Technology
1
30
セマンティックマークアップ
Kaneko Takeshi
August 30, 2019
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
31
Eye Tracking on the Browser
tkckaneko
0
88
IEEE754を完全に理解した
tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
93
多分これが一番早いと思います
tkckaneko
0
28
暗黒面の話
tkckaneko
0
27
CSR / SSR / SSG / JAMstack
tkckaneko
0
73
BOLT
tkckaneko
0
31
CSS Logical Properties and Values
tkckaneko
0
36
Other Decks in Technology
See All in Technology
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
mikimatsumoto
0
260
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
260
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
17k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
210
usermode linux without MMU - fosdem2026 kernel devroom
thehajime
0
240
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
20260204_Midosuji_Tech
takuyay0ne
1
160
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
minorun365
4
220
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
190
Agile Leadership Summit Keynote 2026
m_seki
1
650
Amazon Bedrock Knowledge Basesチャンキング解説!
aoinoguchi
0
160
プロダクト成長を支える開発基盤とスケールに伴う課題
yuu26
4
1.4k
Featured
See All Featured
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
66
37k
We Are The Robots
honzajavorek
0
170
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
130
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
180
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
310
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
350
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
830
So, you think you're a good person
axbom
PRO
2
1.9k
Mind Mapping
helmedeiros
PRO
0
89
Crafting Experiences
bethany
1
49
Transcript
HTMLにセマンティックを求めるのは 間違っているだろうか
そもそHTMLとはなにか?
None
None
そもそHTMLとはなにか? HyperText Markup Languageは、ウェブページを表現す るために用いられる。ハイパーリンクや画像等のマルチ メディアを埋め込むハイパーテキストとしての機能、見出 しや段落といったドキュメントの抽象構造、フォントや文 字色の指定などの見た目の指定、などといった機能が ある。 〜
wikipediaより 〜
そもそもマークアップは コンテンツや人によって正解が違います
詳細度の違い - <span>や<div>など汎用的なタグを使う - <time>や<header>など意味を持つタグを使う どちらも間違いではありません 解釈の違い コンテンツの文脈やデザインの受け取り方次第で変わってしまい ます 個人的に<nav>や<aside>などはブレやすいと思ってます
それなら全て<div>で マークアップしとけば間違いない?
セマンティックであることが 望ましいです
そもそセマンティックとはなにか?
そもそセマンティックとはなにか? セマンティックとは、一般的には「意味」や「意味論」に関 することを指す語である。IT用語としては、コンピュータ に文書や情報の持つ意味を正確に解釈させ、文書の関 連付けや情報収集などの処理を自動的に行わせる技術 について用られる語である。 〜 weblio辞書より 〜
マシンリーダブルにすることで アクセシビリティを高めることができます
セマンティックなマークアップを 心がけましょう
間違えやすいマークアップ
コピーライト あるサイトのコピーライトです
コピーライト <small> 〜 </small> 小さいなどのスタイルとは関係なく、著作権表示や注釈 などを表します
画像とキャプション あるサイトの画像とキャプションです
画像とキャプション <figure> <img/> <figcaption> 〜 </figcaption> </figure> この形である必要はありませんが、<img/>に<p>などで ラップするのはやめましょう <p>はテキストの段落を表します
タブメニュー よくあるタブメニューです
タブメニュー <ul> <li><a href=”#id1”> 〜 </a></li> ... </ul> <section id=”id1”>
… </section>
カルーセル よくあるカルーセルです
カルーセル <div> <ul> <li><img/></li> ... </ul> <button type=”button” class=”left”> 〜
</button> <button type=”button” class=”right”> 〜 </button> </div>
正しいマークアップをしましょう