空のdiv要素について - uhyo/blog
昨日はこちらの記事に端を発する形で、空のdiv要素やspan要素は妥当なのかといった話題が見られました。 中身のない空の div 要素や空の span 要素は HTML 仕様として妥当なのか？ - dskdこの記事は空のdiv要素やspan要素が妥当かどうかという疑問にHTML仕様の観点から考察を加える大変面白い記事です。記事の結論としては、“僕の結論としては「否」である。”としています。 しかし、いくらHTML仕様を読んだといっても、こういった議論には解釈が入りがちです（こちらの記事でも結論の前に“ここからは完全に僕の解釈として書く。”と明記されています）。 仕様なのに解釈を入れる必要があるのはどうなのと思いつつ、実はこの記事でこれから紹介するように、HTML仕様もなかなか曖昧に書かれており解釈が必要なのは仕方のないことです。 筆者はどちらかというと空のdivを肯定する考えを持っていたの
On the ‹dl›
Introduction The <dl>, or description list, element is underrated. It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you've probably seen these layouts out in the wild… Each of these examples shows a list (or lists!) of name–value pairs. You might have also seen lists of name–value pairs to describe lodging
My current HTML boilerplate - Manuel Matuzovic
My current HTML boilerplate posted on 09.04.2021 Every element I use for the basic structure of a HTML document, with explanations why. Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document
2021年のウェブ標準とブラウザ | gihyo.jp
2021年になりましたね。 矢倉眞隆（myakura）です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています
HTMLの最新仕様ってどこで確認すればいいんだっけ？
最近、デモページ作成用のクラスレスCSSフレームワーク を作っていて、HTML要素をもう一度学び直しています。リファレンスには主にMDN Web Docs を見ているんですが、先日、仕様を探していて「HTMLの仕様ってどこで見ればいいんだっけ？」と迷ってしまいました。 「W3CとWHATWGの2つの仕様があって、ややこしいことになっていたよな…」というおぼろげな記憶は残っていたんですが、2019年5月のW3CとWHATWGの合意 でHTMLの仕様はHTML Living Standard に一本化されてたんですね。めでたい🎉 ということで、HTMLの正式な最新仕様の確認はHTML Living Standard を見にいけばいいんですね。HTMLの仕様の確認ってあまりしないので忘れてました😅 CSSの仕様は結構確認することあるんですけどね。 W3CのHTML5のページ（https://
HTML5 Boilerplate 8.0.0 Released
It took a little longer than I expected, but we released HTML5 Boilerplate 8.0.0 yesterday. As I mentioned a few weeks ago, it’s the 10th anniversary release, and if I do say so myself, it’s a pretty good way to celebrate 10 years of the project. It was a lot of work getting this one out the door, but I’m really happy with how it turned out. I’ve been involved with HTML5-Boilerplate from before th
HTML can do that?
After witnessing some awesome things CSS can do, it's time for HTML to come in the same spotlight! It's amazing that you can do so much with just HTML. 1. Dropdown with searchable text 2. Dialog box 3. Measuring progress Styling this is not an easy task, I agree! But there's always some workaround and it's nicely explained here - How to style progress element 4. Expand/collapse details 5. Show cor
HTML To CSV/Excel Converter
Your HTML input should contain at least one TABLE tag. If your HTML contains more than one TABLE tag, you can choose which table to convert by changing the "Which Table" selection. All tables will be converted by default into 1 CSV file. See also CSV to HTML Table Step 1: Select your input Step 2: Choose output options (optional) Output Options Output Field Separator: , ; : Bar-| Tab Other-Choose
アクセシビリティを考慮したちょっと複雑なデータ・テーブルのコーディングについて考える
前回の「アクセシビリティを考慮したデータ・テーブルのコーディングやってますか？（基本編）」の続きで、今回はもう少し複雑なテーブルについて（の考察を）まとめてみます。具体的に言うと行と列をスパンさせる場合のコーディングのやり方です。そもそも複雑なテーブルはシンプルなものに置き換えるという考えをベースにしつつ、列をスパンさせる場合のcolgroupと、行をスパンさせる場合のrowgroup + tbodyを使ったコーディングのやり方を整理してみました。 それ、本当に役に立つの？ はじめにネタばらし的に書いてしまうと、実は今回紹介するデータ・テーブルの例では、colgroupやrowgroupを使っても使わなくてもVoiceOverでの読み上げに違いがありませんでした。ググると出てくるidとheaders属性を使うやり方も試してみましたが、こちらも読み上げに変わりはありませんでした（idとhea
HTML 5.2 is done, HTML 5.3 is coming | W3C Blog
Author(s) and publish date By: Charles McCathie Nevile Published: 14 December 2017 Skip to 15 comments Today W3C releases HTML 5.2. This is the second revision of HTML5, following last year's HTML 5.1 Recommendation. In 2014 we expressed a goal to produce a revision roughly every year; HTML 5.2 is a continuation of that commitment. This Recommendation like its predecessor provides an updated stabl
<input type="country" />
Recently, Lea Verou asked an important question about whether HTML should have a standardised way of letting users select a country from a list. HTML Idea: <input type="country"> which would become a searchable dropdown with all countries and their flags. Wouldn't that be awesome? — Lea Verou (@LeaVerou) October 21, 2017 You can read through the conversation and make your own mind up (while also m
meta name="referrer"は、HTTPS→HTTPでもリファラを出す新しい仕様 | 初代編集長ブログ―安田英久
今日は、ちょっと技術的な話を。「meta referrer」という、リンクをクリックしてページ移動するときなどにリファラをどう送るかを、ページ側で指定できるタグの実装が進んでいるのです。 グーグルはHTTPSを推奨するけれども、リファラが……グーグルは、サイトがHTTPSかどうかを順位決定の要因とするなど、HTTPSを推奨しています。 でも、自分のサイトをHTTPSにすると、自分のサイトから非HTTPS（ふつうのHTTP）のサイトへのリンクをクリックしたときに、リファラが飛ばないんですよね。 これは、RFC 2616で、「セキュア接続のページから、非セキュア接続のページに移動するときは、リファラを送出するべきではない」と定められているからです（セクション15.1.3）。 とはいえ、Web担のようなメディアでは、「Web担のページから、うちのサイトにけっこう来る人いるんですよ」という反応も大
iframe 要素の seamless 属性を試してみた
WebKit Nightly Buildsが iframe 要素に追加された seamless 属性に対応したとのことなので、早速どんな感じになるのか確認してみました。 Last week in WebKit: Inspector's sources panel and private names ： Surfin' Safari Add seamless layout code (and pass most of the remaining seamless tests) ： Changeset 118291 WebKit 現在公開されている WebKit Nightly Builds の最新版、及び Google Chrome も、開発者向けビルド （Dev channel） の最新版 「21.0.1155.2」 で動作しているのが確認できました。インストール済みの方は下記にデモページ
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Caninclude
Offering Options for mailto: and tel: Links | CSS-Tricks
How to Italicize Text | CSS-Tricks
W3 Watch Reference
The ephemera of Nicolas Gallagher
How do I justify text on both sides on Web pages?