W3C仕様日本語訳置き場WikiYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
知っておくと便利なHTML5の機能、要素や属性のまとめ
今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ
HTML5 入れ子チートシート | 吉川ウェブ
HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he
WHATWG版とW3C版の主な差異：HTML5.3各要素別メモ
目次に戻る WHATWG版とW3C版の主な差異：HTML5.3各要素別メモ 細かい差異は、いちいち取り上げない。 W3C版では外部仕様だけど、WHATWG版ではHTML仕様本体に含まれているもの Microdata→グローバル属性としてのitemscope属性、itemprop属性、itemtype属性、itemid属性、itemref属性。 WHATWG版のみに存在するもの カテゴリーとしてのAutocapitalize-inheriting element グローバル属性としてのinputmode属性 グローバル属性としてのenterkeyhint属性 イベントハンドラ属性としてのonsecuritypolicyviolation属性 イベントハンドラ属性としてのoncontextmenu属性 イベントハンドラ属性としてのonformdata属性 body要素のonmessageerr
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。 先日、HTML 5.1が公式にリリースされました。 興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。 削除 アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。 変更 hea
HTMLチェッカーはchecker.html5.orgを推してみたい - 水底の血
次の3つのチェッカーについて、 Validator.nu Living Validator https://validator.nu/ Nu Html Checker https://validator.w3.org/nu/ Nu Html Checker https://checker.html5.org/ 次のHTMLコードを投入して比較してみたよという話。 <!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <!-- dlの中のdivは現時点のHTML 5.2に規定されない --> <dl> <div> <dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> </div> <div> <dt> Recommended update interva
“マークアップ”
クリスマスにTwitterで@glatyouと少しマークアップについてやりとりをした。そこではTwitterなのでだいぶ端折ったものの、だいたい伝わったとは思う。あわせて今年はHTML5勧告のタイミングだ。このようなマークアップについての考え方を述べるにはもってこいだろう。そこで僕の考えを文書としてまとめ、“マークアップ”するということ ～ HTML5勧告に寄せて ～というタイトルで公開した。この文書を持って今年のまとめとしたい。 当該文書では、著作権表示という日本ではおよそ実践的でないものを例としたので、多少哲学的な側面が強い。他に良い例がうまく思いつかなかったのもあるし、元々のTwitterでのやりとりがそれだったのもある。他に例を考えるとするとトップニモドルのマークアップでも良かったかもしれない。 <footer> <nav> <ul> <li><a href="#logo">Bac
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
HTMLのアウトライン意識してますか？ - QiitaのSEO事情（前編） - Qiita
「最近Qiitaを検索結果でよく見るようになったなぁ」と感じる人はいませんか？ SEOを頑張ってるWebサービスは数多存在しますが、Qiitaもその中の1つです。 SEOっていうとやれキーワードがどうだこうだ、サイト内リンクがどうだこうだ、という話になってしまいがちですが（そういうのが不要と言っているわけではないですよ）、今回はQiitaがSEOの一環として行なっている数多の取り組みの中で、比較的Web上での言及数の少ない印象のある、HTMLのマークアップについて、外に出せる範囲で、前編と後編に分けて解説したいと思います。 後編はこちら 免責事項的な SEOというのは完全に結果論でしか語ることのできないものです。また時と共に効果的とされるテクニックは変わっていきます。この記事はQiitaの中の人が「効果あるんちゃうか」と試行錯誤しながらあれこれ行なっていることの一部を紹介するものであって、
HTML Standard 日本語訳
4.8.4 画像4.8.4.1 導入4.8.4.1.1 アダプティブ画像4.8.4.2 source、imgおよびlink 要素の共通属性4.8.4.2.1 srcset共通属性4.8.4.2.2 size属性4.8.4.3 Processing model4.8.4.3.1 When to obtain images4.8.4.3.2 Reacting to DOM mutations4.8.4.3.3 The list of available images4.8.4.3.4 Decoding images4.8.4.3.5 Updating the image data4.8.4.3.6 Preparing an image for presentation4.8.4.3.7 Selecting an image source4.8.4.3.8 Creating a source s
HTML5でタグをどれだけ省略できるか調べてみた
ご存知の方も多いと思いますが、HTML5ではタグの省略が可能になっています。 ということで、タグをどれだけ省略できるのか調べてみました。 なお、HTML5に準拠したWebブラウザ上であれば、省略した要素と同一のDOMが生成されることが保証されるようですので、そのあたりも踏まえてます。 １．タグ自体の省略が可能な要素 タグ自体の省略が可能な要素、つまり開始タグ・終了タグの両方の省略が可能な要素は以下です。 html head body colgroup tbody これらのタグを省略した次のようなソースコードをFirebugで参照すると、html要素、head要素、body要素がきちんと生成されていることが分かります。 ソースコード <title>foo</title> <style> body { font-size: 100%; } </style> <script src="http:
link要素「rel="canonical"」のまとめ
link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、検索エンジンでは別のURLとしてインデックスされます。 検索エンジンのインデックス内での重複コンテンツ問題 link要素の「rel="canonical"」を利用することで、URLの正規化が行われ、重複コンテンツ問題を解消します。 解消イメージ 2009年2月、Google、Yahoo!、Microosftの大手検索エンジン企業が、URLの正規化に対応する共通の取り組みとして、「rel="cano
HTML5で誤用されがちな各要素の正しい使い方 | コリス
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
Re:犯してはいけないHTMLタグの過ち10個
Re:犯してはいけないHTMLタグの過ち10個 ネタ元：犯してはいけないHTMLタグの過ち10個 基本的には良い記事なんだけども、原文が2年近く前の物でXHTMLを前提に書かれているので少しだけ内容が古いかなと思ったりします。 1. インライン要素の中にブロック要素を入れない <a href="#"><h2>これは間違いです</h2></a> aタグのようなインライン要素の中にhタグのようなブロック要素を入れてはいけません、となってるけどこれはHTML5的にはこれはあり。 a要素は基本的にフロー・コンテンツが記述できる場所に記述できます。ただ、他のほとんどのインライン要素はフレージング・コンテンツしか内包できないのでNG。 <span><h2>これは間違いです</h2></span> HTML5だとコンテンツモデルの概念が変わっているので要注意。 参考：コンテンツ・モデル - HTML5タ
HTML5の登場で、XHTMLは結局どうなったの？
HTML5の登場で、XHTMLは結局どうなったの？：HTML5“とか”アプリ開発入門（3）（1/2 ページ） 最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします XHTMLは、まだまだ健在だ！ 前回の「HTML5でWebページをマークアップするための基礎知識」では、HTML5の文法（HTMLシンタックス）について説明しました。 今回は、連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」から続く、HTML5に関する基礎知識を締めくくる話題として、XHTMLとの関連についてお話ししたいと思います。 XHTMLの立ち位置を、もう一度確認しておこう
“Misunderstanding Markup” 日本語訳
このコミックは、“Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip”にあるコミックを、著作者の許可を得て日本語に訳したものです。 元になった記事の翻訳も行っています。“Misunderstanding markup”をご覧ください。 先週、W3CはXHTML 2 Working Groupが年内でその活動を終了すると発表したんだ。単刀直入で、歓迎されるべきことだったんだけど、「XHTMLが終わってしまう」と多くの人を混乱させてしまった。Zeldmanのblogポストに寄せられたコメントを読むと、それが分かると思う。 仕方のない部分もある。異なる技術に、同じような名前がついていたことが原因なんだから。しかも、これは今に始まったことじゃあない。 たとえば、JavaScript。Javaになにか関係しそうだけど、そうじゃないよね。書き方がすこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い
HugeDomains.com
