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
Kaneko Takeshi
August 30, 2019
Technology
1
19
セマンティックマークアップ
Kaneko Takeshi
August 30, 2019
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
13
Eye Tracking on the Browser
tkckaneko
0
72
IEEE754を完全に理解した
tkckaneko
1
51
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
72
多分これが一番早いと思います
tkckaneko
0
23
暗黒面の話
tkckaneko
0
14
CSR / SSR / SSG / JAMstack
tkckaneko
0
51
BOLT
tkckaneko
0
11
CSS Logical Properties and Values
tkckaneko
0
24
Other Decks in Technology
See All in Technology
Money-saving tips for the frugal serverless developer
theburningmonk
1
350
技術力の伸ばし方を考える
khirata
0
140
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
7
3k
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
180
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.6k
生成AI活用推進の為にやったこと/やらなかったこと
ktc_wada
0
180
Dungeons and Dragons and Rails
joelq
0
230
Databricksの生成AI戦略
taka_aki
1
370
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
180
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
220
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
36k
TiDBにおけるテーブル設計と最適化の事例
cygames
0
800
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Clear Off the Table
cherdarchuk
86
310k
Unsuck your backbone
ammeep
664
57k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Web development in the modern age
philhawksworth
203
10k
Docker and Python
trallard
35
2.7k
Designing for Performance
lara
601
67k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Building Your Own Lightsaber
phodgson
100
5.7k
Designing the Hi-DPI Web
ddemaree
276
33k
Product Roadmaps are Hard
iamctodd
45
9.8k
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>
正しいマークアップをしましょう