strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった
「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01
<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
document outline algorithm と h1 要素 | きるこの日記帳
没ネタの供養。 TL;DR h1 を複数置けるわけじゃない アウトラインを生成するアルゴリズムはブラウザで実装されてない 見出しレベルを自動調整するように動いていたが頓挫した section お前は何者だ document outline algorithm について "document outline algorithm" とは、HTML のアウトラインを生成する都市伝説のこと。 アウトラインとは、見出しを持ったセクションで構成される枠を指す。 HTML5 より前は、このアウトラインを表現する方法がなく、広義な wrapper の div が採用されていた。 見出し要素もセクションごと、というよりは文書の階層にかかるもので、兄弟としてのフラットな構造だった。 HTML5 から、 section や nav などで囲みアウトラインを生成する謎のアルゴリズム "document outlin
1クリックでHTML要素の構造を可視化し、セマンティック要素が正しく実装されているか検証できる -Construct.css
Webページに実装されているHTML要素の構造を可視化し、header, nav, main, articleなどセマンティック要素が正しく実装されているか検証できるスタイルシートを紹介します。 デバッグ機能も備えており、不正なマークアップや問題のあるマークアップを表示することもできます。 Construct.css Construct.css -GitHub Construct.cssはセマンティックHTMLの使い方をより身近にするために、スタイルをフックとしてクラス名を使用するのではなく、直接タグをスタイルするCSSのライブラリです。目に見えないセマンティックのタグであることを視覚的に確認することができます。 ブラウザで簡単に利用できるブックマークレットも用意されています。 ブックマークレット Construct.cssのブックマークレット ブックマークレットを使用すると、以下のCSS
サイト内検索機能を開閉するボタンを「検索」ランドマークとすべきか？ | Accessible & Usable
公開日 : 2018年7月6日 カテゴリー : アクセシビリティ サイト共通ヘッダーに、サイト内検索機能を開閉するボタン (虫眼鏡アイコン) を配置して、ボタンが押されると検索窓を開く、というユーザーインターフェース (UI) をよく見かけます。関わっているプロジェクトで、この手のボタンに対して role="search" というランドマークを付けるべきか？という興味深い議論がありました。 サイト内検索機能を開閉するボタン (虫眼鏡アイコン) に role="search" というランドマークを付けるべきか？ ランドマークの利点 role="search" (以下、「検索」ランドマーク) とは、WAI-ARIA で定義されているランドマーク (Landmark Roles) のひとつです。HTML の要素の中に role 属性を書くことで実装できますが、role 属性値は「search」の
画像検索にバッジを表示して必要な情報を見つけやすく
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
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
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
【徹底解説】JSON-LDを使ったschema.orgの記述方法
[対象: 上級] この記事では、JSON-LDをシンタックスに用いたschema.orgの記述方法について詳しく解説します。 CSS Niteで講演 2014年9月20日（土）に、CSS Nite LP36 powered by In-house SEO Meetup 「ビジネスに活用できる2014年SEOトレンド」がベルサール神田 イベントホールで開催されました。 僕は出演者として登壇し、セマンティック検索と構造化データ、schema.orgをテーマに公演しました。 このなかで、JSON-LDの使い方についても説明しました。 [撮影：飯田昌之] 参加者には録画した動画とスライドが提供されています。 年内には（無償で）一般公開される予定です。 ですが、JSON-LDを使ったschema.orgをもっともっと多くのサイト管理者に使ってもらうことが僕の希望です。 3か月近くも待たせたくありませ
SVG画像にRDFでメタ情報を記述する：CCライセンスや派生元作品など - 聴く耳を持たない(片方しか)
これはSVG Advent Calendar 2014の第23日目の参加記事です。昨日はしょん(id:syonx)さんの「SVGでキラキラをつくりたい（願望） - X X X」でした。キラキラとした3Dの球体をSVGで表現するコンテンツを構想中ということで、完成が楽しみですね。 はじめに私はこれまで昨年、一昨年とSVG関連のAdvent Calendarに参加してきて毎度ファイルサイズの削減・最適化をテーマにしていました。 SVG画像を1キロバイトでも削るダイエット術！ SVG画像を1バイトでも削るためのコードゴルフ SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ 不要な記述は減らしてファイルサイズを抑える、というのは閲覧者の環境や転送速度を考えると重要な手法ではありますが、その一方で必要な情報はきちんと残す、というのも大切なことです。特にSVGは単なる画像ファイルでは
About HTML semantics and front-end architecture – Nicolas Gallagher
A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. About semanticsSemantics is the study of the relationships between signs and symbols and what they represent. In linguistics, this is primarily the stud
お知らせモジュールのマークアップ
2014年1月22日 著 本日開催のマークアップ部＠勤務先、お題の2つ目はお知らせモジュール。呼び名はさておき、よくサイトのトップページとかカテゴリーのトップページで目にするようなモジュールで、見た目はこんな感じ： マークアップを考えてみたところ、個人的にはあまり困らないというか、迷うことは無かったですね。主なポイントはこちら： 全体はリスト（ul.news）としてマークアップ。ol要素でも良いけれども、序列に関する情報（日付）がリスト項目に含まれているがゆえに、項目の並びを入れ替えても破綻しない、というのがolではなくulの理由。 dl要素を使い、日付の部分をdt要素、それ以外をdd要素にするという案も捨て難い（謎）けれど、あまり好きじゃないのですよ。個人的な好みもあるけど、スタイリングのしやすさというか、ul.news>liについている下線をつけやすいし（謎 ul.news>liのなか
http://foreignkey.jp/archives/1503
See related links to what you are looking for.
社内マークアップ部、活動開始
2013年12月21日 著 先日、勤務先で社内マークアップ部によるイベントがありました。html5jのマークアップ部（が開催しているMarkupCafe）にインスパイアされた活動で、各々が考える最強のマークアップ（謎）を披露し合うことにより、HTMLへの理解を深めよう的な活動です。今回は、この先の不定期開催に向けたテストという位置付けで催され、お題はページングでありました。 ページング、と言うのは検索結果ページなどの下のほうでよく見かけるアレです。呼び方にはパジネーションとか諸説あるようですが、ここでは続・よくある3つのデザインから考える、マークアップの最適解 | HTML5Experts.jpを参考に、ページングと記載しておきます。何の前提条件も縛りもなく、ワイヤーフレームだけを見て考えるというルールでしたので、それがかえって良かったというか、いろいろな切り口から妥当性を検討する面白味を
I am mitsuruog | HTML5のセマンティックとWAI-ARIAでWebの未来がおもしろい件
このエントリはHTML5 Advent Calendar 2013 ３日目の記事です。 前後の記事はこちらです ← youhei.iwasaki8 [iwahei の日記]geolocation api を使った位置情報取得 → あおいたん [GCG 研究所]手元にあった HTML5 アプリを FxOS と Tizen で動かしてみるの巻 「Internet of Things」と呼ばれる「モノがインターネットする」時代のコンテンツは、人が目にして理解できる程度では十分ではありません。すべてのモノが理解できるコンテンツ、その鍵は HTML5 が持つ「セマンティック」と「WAI-ARIA」での仕様の標準化だと思います。 このエントリでお伝えしたいこと。 たまに目にする「role=""」の意味を理解して欲しい。 「aria-」で意味付けすることで、ちょっと得することがある。 「セマンティック」
WAI-ARIA のランドマーク (Landmark Roles) を設置する | Accessible & Usable
公開日 : 2011年7月12日 (2018年1月20日 更新) カテゴリー : アクセシビリティ 当サイトでは、Web アクセシビリティ向上の一環として、WAI-ARIA の「ランドマーク (Landmark Roles)」をソースコードの中に記述しています。 WAI-ARIA とは、W3C (World Wide Web Consortium) の WAI (Web Accessibility Initiative) という組織が策定した、Web アクセシビリティ向上のための仕様書のひとつです。RIA (Rich Internet Applications) をアクセシブルなものにするための標準仕様がまとめられています (WAI-ARIA の「ARIA」は、「Accessible Rich Internet Applications」の略です)。 この WAI-ARIA、本来は RIA
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebAIM: Semantic Structure: Regions, Headings, and Lists
Semantics and the popover attribute: what to use when?
HTMHell Advent Calendar 2023 - HTMHell
http://all-web.org/ala/html5-semantic/