どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
HTMLに新しい要素ができる動き、ポップアップする通知パネル用のtoast要素
ブラウザの枠外からポップアップやスライドして表示される通知パネルを実装するために、HTMLの新しい要素<toast>ができるかもしれません。 ブラウザへの実装日はまだ決まっていませんが、Chromiumの開発者が提案しているので、けっこう早くに実装されるかもしれませんね。 Toast UI element -Chrome Platform Status UI要素としてのトーストとは toast要素の提案内容 UI要素としてのトーストとは UI要素としてのトーストは、最近のWebサイトやスマホアプリでもかなり多く見かけます。トーストを実装するためのライブラリも数多く存在します。 名前の由来は、通知パネルの表示アニメーションがトースターからトーストがでてくる感じだからでしょう。 Notyf React-Toastify Toast -Blueprint toast要素の提案内容 toast要素
JavaScriptでデッドロックを作ってみた
いきなりですが、皆さんは排他制御をご存知でしょうか。排他制御は並列コンピューティングにおける概念であり、複数のプロセスが資源を共有して使用する際に、複数のプロセスが同時に資源を使用している状況（競合）が発生しないように制御する手法です。（この分野にはあまり詳しくないのでまさかり等は歓迎します）。 排他制御の一手法としてロックが知られています。この手法では、ある資源を使用するためにはまずその資源のロックを取得する必要があります。そして、資源を使い終わったらロックを解放します。あるプロセスがロックを取得している間は、別のプロセスは同じロックを取得することができません。よって、ロックを取得できたときのみ資源を使用するようにプログラムを書くことによって、資源に対する競合を防ぐことができます。 典型的には、使用したい資源が他のプロセスに使用されている場合、その資源のロックが解放されるまで待つことにな
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
HTML5とHTML 5.1、それらの新機能
2016年11月に2年ぶりのバージョンアップを果たしたHTMLの言語仕様。その目指すところと、HTML 5.1の新機能を幾つか見てみよう。 連載目次 2016年11月1日付けでW3CはHTML 5.1を勧告した。これは2014年10月28日付けで勧告されたHTML5をバージョンアップするものだ。本稿ではその主な追加機能などをざっくりと見ていくことにしよう（なお、本稿ではメジャーバージョンのみを付加する場合には「HTML5」と、マイナーバージョンを含める場合には「HTML 5.1」などと表記する。これはW3Cでの仕様における表記とも合致している）。 そもそもHTML5とは 新機能の話をする前に「HTML5とは」について少し考えておきたい。1つは誰が仕様を策定しているか。もう1つはHTML5の位置付けだ。 仕様を策定するのは誰？ 前者に関していえば、現在、HTMLはWHATWG（Web Hyp
W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート
XMLこそがウェブの未来であるという見方が支配的だったために、2004年のOperaとMozillaの共同提案は却下され、W3CでHTMLを改良する道が閉ざされました。そこでブラウザーベンダーが集まってW3Cとは別の組織でHTMLやHTMLに関連する仕様の改良を行う、というのがWHATWGのはじまりです。 以来今日に至るまでずっと、WHATWGはHTMLの開発を（ある期間はW3Cと共同で、ある時期からはW3Cとは別に）し続けています。「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne van Kesterenの言葉の通り、WHATWG HTMLを第一に参照すべきでしょう。 HTML5勧告以降のW3Cの動向 さて、W3Cに話を戻します。HTM
プログレッシブウェブアプリ詳解 ─ 過去・現在・未来
Web技術でアプリ開発2016特集・第5弾は、プログレッシブウェブアプリ (Progressive Web Apps)をご紹介させていただきます。 はじめに プログレッシブウェブアプリ(Progressive Web Apps)という言葉が初めて登場したのは2015年8月のAlex Russellによる記事Progressive Web Apps: Escaping Tabs Without Losing Our Soulです。当時オフラインやプッシュ通知など、モバイルウェブを飛躍的に進化させる画期的な機能が次々と追加されていた状況において、このムーブメントを呼称するための言葉が求められていました。Google社内でいくつもの候補が挙げられましたが、Service Workerの発案者としてAlex Russellが推したのが、この「プログレッシブウェブアプリ」でした。 また、当初Goog
target="_blank" で開くリンクには rel="noopener" をつける - Qiita
The performance benefits of rel=noopener - JakeArchibald.com より target="_blank" でリンクを開く場合は、rel="noopener"をつけておくのが良い。 管理画面などでは rel="noopener noreferrer"というかたちでnoreferrerをつけるとさらに良いかもしれない（参考：http://qiita.com/wakaba@github/items/707d72f97f2862cd8000 ） target="_blank" で開いたWindowは、 window.opener を使って親のWindowを操作することができる。つまりtarget="_blank"で開いたサイトで任意の操作ができてしまうことになるけど、Same origin の仕組みが働く。ので、Same originではない場
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
[67]「mediagroup属性」でメディア要素を同期させよう
[67]「mediagroup属性」でメディア要素を同期させよう 最終更新日：2019年01月30日 （初回投稿日：2014年01月17日） mediagroup属性は、HTML5.1で削除されました。 現在どのブラウザも実装していませんのでご注意ください。 この記事とサンプルファイルでは、今でも一応使える「mediagroup.js」を併用していますので、その部分を中心に残しておきます。（2019年1月記） メディア要素（<video> と <audio>）の共通の属性 mediagroup属性は、「メディア要素どうしを同期」ができる属性です。 「mediagroup.js」を併用したほうがいいみたい 「mediagroup属性」は、Chrome が対応しています。（2014年1月） ただし、「mediagroup.js」という JavaScript を併用すると、Firefox, Sa
![[67]「mediagroup属性」でメディア要素を同期させよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3ffdfc0ad903f2a7e260635cdff27784f68307a/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-62.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131026-1.jpg)
Top | Diff of HTMLs
Unofficial diff viewer for WHATWG HTML Standard and W3C HTML. The Diff of HTMLs provides side-by-side diff view of each section between the specifications. Table of contents (TOCs) of the HTML specifications Legends: A section available at WHATWG HTML Standard. A section available at W3C HTML. Note: This site modifies TOCs to reduce unnecessary diffs. The following TOCs are not equal to the specif
HTML5Experts.jp
今年6月にJavaScriptの標準仕様であるECMAScript 2015（ECMAScript 6）が承認され、いよいよ次世代のJavaScript 開発が現実のものとなりつつあります。本特集では、このECMAScript 2015をテーマに、新しいJavaScriptの仕様を広く紹介しつつ、実践的な開発環境の構築や、個々の仕様の詳細解説を取り上げます。
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
もうネイティブアプリはいらない？ 「HTML5」で業務アプリはここまでできる
関連キーワード HTML5 | API | Ajax | アプリケーション | スマートデバイス Web型のモバイル業務アプリケーションは、幅広い端末で利用できるのが利点だ 前編「HTML5？ それともネイティブ？ スマホ業務アプリの作り方4種を徹底比較」では、スマートデバイスの利点である可搬性や、使いたいときにすぐ使い始めることができる即時性、タッチによる直観的な操作性などに配慮した「モバイル業務アプリケーション」の実現方法のうち、主要なものとして以下の4種を紹介しました。 Web型：Webブラウザで動作するWebアプリケーションとして開発 ネイティブ型：AndroidやiOSといったOSにインストールするネイティブアプリケーションとして開発 ハイブリッド型：Web型とネイティブ型を組み合わせたハイブリッドアプリケーションとして開発 MEAP型：モバイルアプリケーションの統合開発製品「M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新規タブリンクの恐ろしい仕様、Chrome 88で変更へ ～Safari/Firefoxに合わせた安全な仕様に／“rel=noopener”を付け忘れても大丈夫【やじうまの杜】
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
HTML5での追加・廃止タグ・ブラウザサポート等が一目で分かる「The HTML 5 Mega Cheat Sheet」:phpspot開発日誌