<article> vs. <section>: How To Choose The Right One — Smashing Magazine
In this article, Olushuyi explores a mental model that helps you decide between the <article> and <section> elements when writing documents. You will explore how grouping content affects accessibility and how you can make it all count for users. “Do I use a <section> or an <article> element?” I have had to ask myself this question an unhealthy amount of times whenever I have to group content in a
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
document outline algorithm と h1 要素 | きるこの日記帳
没ネタの供養。 TL;DR h1 を複数置けるわけじゃない アウトラインを生成するアルゴリズムはブラウザで実装されてない 見出しレベルを自動調整するように動いていたが頓挫した section お前は何者だ document outline algorithm について "document outline algorithm" とは、HTML のアウトラインを生成する都市伝説のこと。 アウトラインとは、見出しを持ったセクションで構成される枠を指す。 HTML5 より前は、このアウトラインを表現する方法がなく、広義な wrapper の div が採用されていた。 見出し要素もセクションごと、というよりは文書の階層にかかるもので、兄弟としてのフラットな構造だった。 HTML5 から、 section や nav などで囲みアウトラインを生成する謎のアルゴリズム "document outlin
Links And Buttons Guide | CSS-Tricks
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript. Brought to you by DigitalOcean DigitalOcean has the cloud computing services you need to support your growth at any stage. Get started with a free $200 credit! There is a lot to know about links and buttons in HTML. There is markup implementation and related attributes, styling best practices, things to avoi
WAI-ARIA Authoring Practices 1.1のBreadcrumb Exampleについて思うこと
2019年7月14日 著 パンくずナビと呼ばれる存在については、過去にも何度か覚え書きしてきました。古いものから時系列に沿って並べるとこんな感じ（改めて調べてみると意外に書いている）： 第1回「アクセシビリティBAR（仮称）」初夏のパンくず祭 パンくずナビとマイクロデータ パンくずナビゲーションにまつわる議論、再び パンくずナビのマークアップ パンくずナビゲーションのマークアップ再考 BreadcrumbListの実装 でまぁ最近になってふとBreadcrumb Example | WAI-ARIA Authoring Practices 1.1を目にする機会がありました。このナビゲーションに対しnavとかol/li要素を使うことの是非については敢えてスルーするとして、不可解な点が2つあります。 <nav aria-label="Breadcrumb" class="breadcrumb"
制作者のためのHTML
主にユーザー側の視点から語られることが多いアクセシビリティですが、制作という側からはどのように捉えることができるのでしょうか。2つの切り口から考えてみます。 # アクセシビリティという文脈において、何のためにHTMLを書くかという話になると マシンリーダビリティのため スクリーンリーダーのアクセシビリティのため というように、ユーザーが利用するため、というところにフォーカスした語られ方が多いように感じています もちろんユーザーのために作るというのは正しいのですが、今回はあえて視点を変えて、制作者自身の作るというところに視点を合わせて話してみたいと思っています 僕がどういうものなのかというと、 # 参照: 全部入りHTML太郎(@_yuheiy)さん | Twitter ツイッターでは「全部入りHTML太郎」という名前でやっています # 参照: シフトブレイン／スタンダードデザインユニット
アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える
前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベースにしつつ、列をスパンさせる場合のcolgroupと、行をスパンさせる場合のrowgroup + tbodyを使ったコーディングのやり方を整理してみました。 それ、本当に役に立つの？ はじめにネタばらし的に書いてしまうと、実は今回紹介するデータ・テーブルの例では、colgroupやrowgroupを使っても使わなくてもVoiceOverでの読み上げに違いがありませんでした。ググると出てくるidとheaders属性を使うやり方も試してみましたが、こちらも読み上げに変わりはありませんでした（idとhea
アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）
先日、ふと「アクセシビリティを考慮したデータ・テーブルのコーディングってどうやるんだっけ？」と、思ったのでやり方をまとめてみます。これまでもセマンティックなコーディングはしていたものの、セマンティックス以外に注意すべき点はあるのか？データ・テーブルはスクリーンリーダーでどのように読まれるのか？が気になったので、調べて整理してみました。 主にWebAIMの「Creating Accessible Tables 」とWAI Web Accessibility Tutorialsの「Table Concepts 」という2つのサイトを参考にさせてもらいました。 ちなみに、データ・テーブルとはデータを表形式で表示する以下のようなテーブルのことを言います。
How To Add Breadcrumb (BreadcrumbList) Markup | Google Search Central | Documentation | Google for Developers
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン #frontrend
2017年4月30日 著 4月28日の覚え書き。オシャンティーな渋谷プライムプラザ 4F Creative Loungeで催されたイベント、Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホンにブログ絶対に書くパーソン枠で参加したので、以下に感想など徒然なるままに書こうと思います。ちなみにブログ絶対に書くパーソン枠で参加しておきながらブログ書かなかったら何が起こるのかというのに個人的興味があったけど、社会人としてどうかと思うので、書きます。 継続的にアクセシビリティを高めるために 〜まずは無理なく基本を押さえる〜 サイバーエージェントでアクセシビリティおじさんを務めるますぴーさんのプレゼン。担当されているサービス、FRESH!（本イベントの録画も同サービスで公開されています）での取り組みを「まずはできるところから」「みんなでやる」の2種類に大別して紹介さ
Google、画像検索で商品リッチスニペットを表示開始
[レベル: 上級] Googleは、画像検索での商品リッチスニペットのサポートを始めした。 【UPDATE】記事公開時は実際に確認できていなかったのですが、確認できたため記事タイトルを変えました。 Productsの構造化データ解説ページを更新 構造化データを解説するデベロッパーサイトのProducts（商品、製品）ページが2016年12月12日付けで更新されました。 画像検索でのリッチスニペットに対する言及が加わっています。 Add markup to your product pages so Google can provide detailed product information in rich Search results — including Image Search. Using markup to enable rich product results lets yo
【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について
2016年11月1日付でW3CがHTML5.1を勧告しました。 HTML5からの変更差分はこちらにまとめられていますので、詳細はこちらを見ていただくとして、 今回はその中で「removed」つまり削除された仕様の一覧の中にあった次の項目に注目したいと思います。 ・The use of nested section elements each with an h1 to create an outline. （・アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること） HTML5でのアウトラインと見出しのルール 2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」という仕様がありました。 このことはHTML4.01からHTML5になったときの大きな仕様変更
マークアップの最適解を
見つけ出す方法
The document discusses markup and how to structure different elements like headings, paragraphs, lists, sections and comments. It provides examples of proper markup for navigation menus using unordered and ordered lists, adding headings and paragraphs within an article and section elements, and using comments to add notes that do not create paragraphs. The document serves as a guide for how to pro
マークアップのいらない未来を考える
みなさん、マークアップ好きですか？ 私はまあまあ好きです。デザインされたパーツをHTMLでどう組むかを考えたり、他の開発者と意見を戦わせたりするのは楽しいですよね！ ただ、自分はマークアップ行為そのものについて、「ここにそんな拘る意味あるのかな？」と疑ってしまうことがあります。<dl> を使うか使わないか、とか、パンくずナビはどうマークアップするか、とか、少しでも良いマークアップをするために切磋琢磨するのはきっと楽しいことなのでしょうが、エンジニアとしての自己満足に陥ってはいないだろうか？ と我に返る時があるのですよね。その時の感情を掘り下げてみようと思ったことが、この記事を書くきっかけとなりました。 この記事で私が最終的に述べたいことは、近い将来の標準的なWebプロジェクトにおいて、緻密なマークアップ作業の重要性は極めて低下するだろうということです。なぜ私がそう思うか、妄想を交えつつまと
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Markup from hell - HTMHell
You're using <em> wrong
A Guide To Schema Markup & Structured Data SEO Opportunities By Site Type
GitHub - hail2u/html-best-practices: For writing maintainable and scalable HTML documents
