タグ

htmlに関するrindenlabのブックマーク (91)

  • どうしてHTML5が廃止されたのか | フューチャー技術ブログ

    フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

    どうしてHTML5が廃止されたのか | フューチャー技術ブログ
  • W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス

    あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました(HTML5の完成は2022年!? | Web標準Blog | ミツエーリンクス)。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM

    W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
  • 「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31

    web屋さんたちのTLで話題沸騰の「img要素、下から見るか?横から見pで囲うか?」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を

    「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
  • W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血

    まえがき W3C(とWHATWG)からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG(Memorandumは日語で覚書などと訳されるので、ここでも覚書と呼びます)がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感

    W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
  • <menuitem> - HTML: ハイパーテキストマークアップ言語 | MDN

  • Emmetの使い方 - Atom講座 - [SMART]

    > でネストを作成 > を使ってULの中にLIを作成するといったネストが簡単に作成できます。 ul>li 展開後は下記のとおりです。 <ul> <li></li> </ul> + で同階層に要素を作成 同階層に複数の要素を追加したい場合、下記のように記載します。 div>h1+p 展開後は下記のとおりです。 <div> <h1></h1> <p></p> </div> 子要素を含めて作成 UL、SELECTなど子要素がある要素は + で子要素付きで作成することができます。 ul+ dl+ select+ table+ 展開後は下記のとおりです。 <ul> <li></li> </ul> <dl> <dt></dt> <dd></dd> </dl> <select name="" id=""> <option value=""></option> </select> <table> <tr>

    Emmetの使い方 - Atom講座 - [SMART]
  • Emmet Documentation

    Emmet — the essential toolkit for web-developers Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “Expand Abbreviati

  • 「HTMLタグリファレンス」の記事一覧

    タグHTMLの「HTMLタグリファレンス」についての投稿一覧です。

    「HTMLタグリファレンス」の記事一覧
    rindenlab
    rindenlab 2015/04/02
    ブロックかインラインかが分かりやすい気がした
  • テーブル用CSS設定ツール[Web便利ツール] - TAG index

    CSSコード .example table { border: 1px #000000 solid; } .example td { border: 1px #000000 solid; } HTMLコード <div class="example"> <table> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table> </div> まずHTMLの設定で、表の列と行、キャプション(表のタイトル)、見出しのセルなどを設定してください。設定内容の詳細は、HTML テーブルタグカテゴリーでご覧になれます。 続いてCSSの設定で、枠線や背景色、余白など、見栄えに関する設定を行なってください。設定内容の詳細は、CSS テーブルカテゴリーで

    テーブル用CSS設定ツール[Web便利ツール] - TAG index
  • HTML[meta要素]ビューポートを設定する - TAG index

    width の既定値は、ブラウザにより異なる場合があるようです。 複数のプロパティを指定する場合は、カンマ( , )で区切って記述します。 content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2" widthプロパティについて width は、ビューポートの幅を設定します。値にはピクセル数、または device-width (端末画面の幅に合わせる)を指定します。 <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> device-width を指定するのが一般的です。 device-width を指定した場合は、初期のズーム倍率が 1 になります。(

    HTML[meta要素]ビューポートを設定する - TAG index
  • [速報]HTML5、ついにW3Cの勧告となる

    W3Cが発表したプレスリリース(日語)の冒頭を引用します。 2014年10月28日(アメリカ): ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ=リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の

    [速報]HTML5、ついにW3Cの勧告となる
  • 「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは?

    By Steven Martin 「blinkタグ」とはテキストを点滅させる効果を持つHTMLコマンドの1つで、多くの人々に最も嫌われるタグの1つとして知られています。Netscape Navigator 2.0に独自に実装されていたものですが、IEはもともとサポートしておらず、2013年にFifefoxがblinkタグのサポート廃止したこともあり、近頃は見かけることもなくなっています。そんなBlinkタグの発明者自らが、「なぜblinkタグを開発したのか?」というおもしろおかしな開発秘話を語っています。 the origin of the tag - www http://www.montulli.org/theoriginofthe%3Cblink%3Etag 1994年当時、ルーさんはNetscapeを設立したエンジニアの1人であり、現在のポピュラーなブラウザの先駆けとなったテキスト

    「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは?
  • [JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference

    javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block(またはその逆)にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display

    rindenlab
    rindenlab 2014/05/27
    "tr要素 に display:block; を指定すると表示が崩れてしまう" 存分にはまった…
  • IE11 で submit するとフリーズする不具合? - あきそふと開発日記

    ここの所、忙しくてブログを書いている時間も無かったのですが、毎月更新してる太陽光発電の記録だけは行おうとしてブログを書こうと思いましたら・・・ あれ?ブログの記事作成が動かない? どうも記事作成画面に入ろうとすると動かなくなるようです。 そういえば、IE10 に入れ替えたら色々と IE がダメだったんで、IE9 で止めておいたのですが、先日の Windows Update で IE11 に更新されてしまって、そのままだったなーと思い出して、なんか HTML に不具合があるのかと思い、デバッグ用コードを入れた状態で動かしたんですが、関数まで届いていません。 あれあれ?と、コードの一番先頭にデバッグ出力を突っ込んでみたのですが、それすら動いていません。 サーバのプロセスを見ても、CGI が起動している気配が無いので、どうやら IE11 自身がコールした時点でフリーズしているようです。 なんだそ

    rindenlab
    rindenlab 2014/04/15
    ちょっとハマった…手元の環境だとname属性付きの要素が1個以上あれば回避出来るっぽい
  • なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin’ Codes

    注意 内容については一切保証しません。 ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。 ここに書かれていることが正しいかどうかは、自身で判断して下さい。 事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。 ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか?」の議論はしません。 「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。 ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。 そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT

  • なぜ html の form は PUT / DELETE をサポートしないのか?

    なんで html の from は PUT / DELETE ができないのか、「セキュリティ的理由」とか「歴史的経緯」とか、わかったような分からないような説明はよく聞くけど、実際なんでなのか調べてたら色々教えてもらった話。 ここまでわかったことを blog にまとめました。 / “なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin’ Codes” http://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete

    なぜ html の form は PUT / DELETE をサポートしないのか?
  • IE8のX-UA-Compatibleの使い方/動作仕様 - ふろしき Blog

    IE8では、X-UA-Compatibleという制御パラメータを利用し、過去のWebブラウザの機能をエミュレートさせることができます。 記事では、X-UA-Compatibleの利用方法について解説します。 動作の仕様 設定方法 HTMLドキュメント内にX-UA-Compatibleを追加する ApacheでHTTPレスポンスヘッダにX-UA-Compatibleを追加する IISでHTTPレスポンスヘッダにX-UA-Compatibleを追加する 1. 動作仕様 IE=EmulateIE8 : DOCTYPE宣言に応じて、IE8モードかQuirksモード(IE5)を選択する。 IE=EmulateIE7 : DOCTYPE宣言に応じて、IE7モードかQuirksモード(IE5)を選択する。 IE=8 : 必ずIE8モードを選択する。 IE=7 : 必ずIE7モードを選択する。 IE=5

    IE8のX-UA-Compatibleの使い方/動作仕様 - ふろしき Blog
  • META タグと将来の互換性のロック

    注 : このドキュメントは暫定版であり、変更される場合があります。 ドキュメントの互換性は、Web 開発者にとっての重要な考慮事項です。Windows Internet Explorer 8 には、ドキュメント互換モードが用意されており、Web 開発者はブラウザが古いバージョンと同じ方法でページをレンダリングするように指定できます。これにより、開発者は更新の時期を調整することができます。 このドキュメントでは、Windows Internet Explorer 8 でサポートされるドキュメント互換モードについて説明し、カスタム ヘッダーを使用してそれらのモードをページごとまたはサイトごとに実装する方法を解説します。適切な互換モードを実装することにより、サイトでは Windows Internet Explorer 8 およびそれ以降のバージョンとの互換性を確保できます。 各種の互換モード

    META タグと将来の互換性のロック
  • IE9以降でもHTMLフォームでファイル名とファイルの中身を外部から指定できる

    昨日の日記「IE8以前はHTMLフォームでファイル名とファイルの中身を外部から指定できる」にて、福森大喜さんから教えていただいた内容として、ファイルアップロードのHTMLフォーム(enctype="multipart/form-data")にて、アップロードするファイル名とファイルの中身を外部から指定できることを報告しました。この際にIE8以前という条件がありましたが、今度は、三井物産セキュアディレクションの望月岳さんから、「それIE9以降でもできるよ」と教えていただきました。既にご存じだったそうです。福森さん、望月さんという日を代表するバグハンターから「秘伝のたれ」をおすそわけいただいたようで、興奮気味ですw まず、おさらいとして、IE8以前でのパターンは下記の通りでした(要点のみ)。 <form enctype="multipart/form-data" action="pro_ad

  • 世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog

    2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。当にダメ。 じゃあどうするか?基的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし

    世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog