タグ

htmlに関するmaRkのブックマーク (199)

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

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

    どうして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

    HTML5 入れ子チートシート | 吉川ウェブ
    maRk
    maRk 2018/06/30
  • W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開

    Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する<dialog>要素が追加されました。下記は<dialog>要素を用いたサンプルです。 ... <body> <div> <!-- body content --> </div> <dialog> <h1>Add to Wallet</h1> <label for="num">How many gold coins do you want to add to your wallet?</label> <div><input name=amt id="num" type=number min=0 step=0.01 value=10

    W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開
    maRk
    maRk 2017/12/15
  • HTML 5.1で追加されたHTMLフォームの検証メソッドとPromise関連の新機能

    HTML 5.1で追加されたHTMLフォームの検証メソッドとPromise関連の新機能:特集:HTML 5.1概説(1/3 ページ) HTML 5.1で追加された新機能のうち、フォームの検証に使用できるreportValidityメソッドと、Promiseオブジェクトに関連した新機能を紹介する。 連載目次 HTML 5.1で追加された新機能の中から、稿ではフォームの検証に使用できるreportValidityメソッドと、Promise関連の新機能を見ていくことにしよう。なお、稿では「HTML 5.1」のようにマイナーバージョンを含むHTMLの表記には「HTML」とバージョンの間に半角スペースを挟むことにする。 HTMLInputElement.reportValidityメソッド 最初に「HTML 5.1 Implementation report」ページに記載されている「report

    HTML 5.1で追加されたHTMLフォームの検証メソッドとPromise関連の新機能
    maRk
    maRk 2017/02/10
  • W3Cが「HTML 5.1」を勧告、レスポンシブイメージへの対応など。次のHTML 5.2は2017年末頃を目指す

    W3Cは11月1日付けでHTML 5.1が勧告になったことを発表しました。当初は9月にも勧告になる予定でしたが約2カ月延びた結果、2014年10月28日にHTML5が勧告されてからちょうど2年後のアップデートとなりました。 HTML 5.1の変更点は仕様書の「Changes」にまとめられています。 主な機能追加としては、Picture要素にsrcset属性が追加されたことでレスポンシブなイメージに対応したこと、Detail要素とSummary要素が追加されたことなどが挙げられます。 各ブラウザの対応状況は「HTML 5.1 Implementation report」のページにまとめられています。 微妙な状況にあるHTML5の仕様策定 HTML5の仕様策定は、Web Hypertext Application Technology Working Group(WHATWG)とW3CのWeb

    W3Cが「HTML 5.1」を勧告、レスポンシブイメージへの対応など。次のHTML 5.2は2017年末頃を目指す
    maRk
    maRk 2016/11/04
  • CSSになり損ねた言語たち | POSTD

    TeXMicrosoft Word、あるいはその他の汎用的なテキスト処理環境では簡単に実現できるような見た目に自分の文書を似せようと頑張る(文字どおり)無数の人たちに対して、 “悪いけど、うまくいかないよ” と繰り返し言い続けるのは、実際のところ、この1年間、私にとっては継続的な楽しみだった。- Marc Andreessen 1994年 Tim Berners-LeeによってHTMLが発表された1991年には、ページのスタイルを設定する方法はありませんでした。HTMLタグがどのように処理されるかはブラウザ次第で、多くの場合、ユーザの恣意的な入力が大きく影響しました。そうした事情から、ページがどのようなスタイルで処理されるかを”提案”するような標準的な方法を求める声が上がるようになりました。 しかし、CSSが導入されるのは5年先で、完全に実用化されるには10年の歳月を待たねばなりません。

    CSSになり損ねた言語たち | POSTD
    maRk
    maRk 2016/10/24
  • HTML 5.2: 4.13. Common idioms without dedicated elements

    This version: https://www.w3.org/TR/2016/WD-html52-20160818/ Latest published version: https://www.w3.org/TR/html52/ Editor's Draft: https://w3c.github.io/html/ Feedback: public-html@w3.org with subject line “[html] … message topic …” Editors: Steve Faulkner (The Paciello Group) Arron Eicholz (Microsoft) Travis Leithead (Microsoft) Alex Danilo (Google) Former Editors: Erika Doyle Navara (Microsoft

    maRk
    maRk 2016/08/21
  • <h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN

    HTMLBeginner's tutorialsYour first website: Creating the contentStructuring content with HTMLBasic HTML syntaxWhat's in the head? Webpage metadataHeadings and paragraphs in HTMLEmphasis and importanceListsStructuring documentsAdvanced text featuresCreating linksChallenge: Marking up a letterChallenge: Structuring a page of contentHTML imagesHTML video and audioChallenge: Mozilla splash pageHTML ta

    <h1>–<h6>: The HTML Section Heading elements - HTML: HyperText Markup Language | MDN
    maRk
    maRk 2016/03/16
  • モバイル閲覧に最適化するAMP(Accelerated Mobile Pages)HTMLに対応する方法(前編)

    好きなものは空と緑とS2000とガンダムとラジコン・ミニ四駆、Perfume(かしゆか)。ときどき子育てとキャンプ。 昨今Googleが対応するぞ、SEOに影響があるぞ、ないぞと話題のアクセラレーテッド・モバイル・ページ、AMP。今回試しにブログで対応してみたので、そのポイントをご紹介。 歴史は繰り返す 長くインターネットをやっていると、なんどか揺り戻しを体験します。AMP HTMLが出てきた背景を考えると非常にシンプル。 ・スマホの台頭と普及 ・スマホ用ページが必要 ・リニューアル時PC用とスマホ用HTML作るのが面倒 ・レスポンシブが流行 ・リッチなHTMLは貧弱な通信環境だと表示が遅い ・ならスマホ用のシンプルなHTMLにすればいいんじゃない? ・AMP HTMLの登場  ← イマココ i-mode登場時を思い出しました。 AMP HTMLの仕様 仕様については、元が一番よく分

    モバイル閲覧に最適化するAMP(Accelerated Mobile Pages)HTMLに対応する方法(前編)
    maRk
    maRk 2016/03/12
  • 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

    divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
    maRk
    maRk 2015/10/14
  • Ready to check - Nu Html Checker

    This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change Ready to check Checker InputShow sourceoutlineimage reportcheck error pagesUser-Agent Accept-Language

  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す(文字色も変更)ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
    maRk
    maRk 2015/03/17
    nifty corners はDLしたものの、1回も使わなかったなあ
  • 意味のわからない英単語よりHTMLのほうがオシャレじゃない? - 週刊アスキー

    オリジナル商品を簡単に作ることができるECサイト「SUZURI」から見つけたアイテム。 たぶんネット業界の飲み会ではウケること間違いなしのスウェットです。 CENTER

    意味のわからない英単語よりHTMLのほうがオシャレじゃない? - 週刊アスキー
    maRk
    maRk 2015/02/19
    LEGEND要素あったら欲しいです
  • 「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ フラップイズム

    ※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。 どうも、くーへいです。 今日はある方からリクエストされた記事を書こうかと思います。 皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか? 実際には案件ごとに使い分けているかもしれませんね。 この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。 例えば、「<html>・・・</html>」は要素ですが、「<html>」や「

    「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ フラップイズム
    maRk
    maRk 2014/02/23
  • aside を見直す - html5doctor - HTML5.JP

    サイト内検索 この記事は、html5doctor に掲載されている記事「Aside Revisited」を日語訳したものです。 原文タイトル Aside Revisited 原文ページ URL http://html5doctor.com/aside-revisited/ 著者 Mike Robinson 氏 原文投稿日 2009-10-28 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 aside を見直す これは、

    maRk
    maRk 2014/02/06
    {もし、メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切}
  • HTML-LINT RANKING終了の記録 (save_entropy問題関係への道) 【▲→川俣晶の縁側→ソフトウェア→技術雑記】

    nan.piedey.co.jpで稼働していたサービスであるHTML-LINT RANKINGを終了しました。一応、その経緯の記録です。 2012/08/29頃。見慣れないcronからのメールが届く。save_entropyの実行エラーだが、心当たり無し。最初はスルーしたが、侵入されて変なスクリプトを仕込まれ、それが侵入者の意図通りに動作していない可能性に気づいて調査開始nan.piedey.co.jpに遠隔ログインできないことが判明。ircdは正常稼働中だが、Tera Termでアクセスしても何も返事が返ってこない侵入者によるログイン妨害という可能性に思い至るネットを検索した結果、save_entropyは特に異常でも不正でもないと分かり、侵入よりも故障を疑うサーバ設置場所の管理者に依頼して、電源の入れ直しを依頼する (ログインできないので、通常の再起動は無理と判断)電源を入れ直した結果

    maRk
    maRk 2013/03/23
  • 正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ

    [HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由(目的)じゃないですし、2と5は同じことを言ってますし(SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉しいかという話ですので)、3と6はただのエゴですし、4の標準化っていうのはセマンティック云々の文脈でいうならばruleの話ではなくstandardの話をすべきではないでしょうか。カタチの想像もできないような未来を夢見る暇があるのなら、まずWebガバナンスからどうにかする努力をしたほうが何倍も有益でしょう。 2013/3/22 09:56追記:「セマンティックで正しいコードを書く6つの目的」のような構成であると読み取ってしまって(理由の箇条書きだと思って)上

    正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ
    maRk
    maRk 2013/03/21
  • ★HTML5タグリファレンス

    <dl>タグは、定義・説明リストを表す際に使用します。 <dl>~</dl>の中に、 <dt>タグで定義・説明される言葉を、 <dd>タグでそれに対応する説明を配置してリストを作成します。 例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。 ■HTML4.01からHTML5へのバージョンアップによる変更点 <dl>タグのdlの由来ですが、HTML4.01ではdefinition list(定義リスト)の意味であることが示されていました。 HTML5でははっきりとは示されていませんが、description list(説明リスト)という程度の意味のようです。 また、 <dt>タグはdefinition term(定義される言葉)からdescription term(説明される言葉)へ、 <dd>タグはdefinition description(定義の

    maRk
    maRk 2013/02/12
  • bestvpn.org

    Any elements with the contenteditable attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes. Go ahead, edit away! Here's a typical [and slightly self promotional! ;-)] unordered list element about VPN Services and tools I have on this site. I review every VPN honestly, and I've also written a lot of u

    maRk
    maRk 2013/01/30
  • 知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ

    調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。

    知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
    maRk
    maRk 2013/01/27