普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
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以外の文字エンコー
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
意外と知らないHTMLタグ講座 | オモコロ
HTMLタグというのはWEBの文章やグラフィックの配置や装飾を指定する便利な記号です。かけだしブロガーも、バリバリのプロフェッショナルも要チェック！意外と知らない便利なタグがあるかも！ 原宿: うーーーん………どうもホームページ作りがうまくいかないな…… リックェ: こんにちはー 原宿: おー、リックェ リックェ: 「HTMLタグ」のことでお困りだって聞いたんですけど？ 原宿: そうなんだよ、全然わかんなくてさ リックェ： 任せといてください！ 僕、一応そっち系の仕事してますんで詳しいですよ 原宿： 頼りになるー！ 悪いけどちょっと教えてよ リックェ： はい。まぁHTMLタグってのはマークアップ言語（ランゲージ）のひとつで、ドキュメント、つまり文章やグラフィックですね。これの配置を決めたり装飾をしたりする…… 原宿： あー、ちょっと待って。口で説明されてもイマイチわからないから、とりあえず
『CSSのidなんかなくなっちゃえよー＾＾＾』に対するWEB屋、システム屋さんの反応
みゃみゅ玉子🐣 @myamyu @yuko985 idは、cssのためにあるわけではなく、Documentのなかで唯一のモノを表すためのものなので、cssだけ考えたらclassで全然オッケーかと思います。でも、jsでなにかするときには欲しい。。。 2010-10-05 10:46:28 アライユウコ @yuko985 @pomu0325 普段使いの用途だとページ内リンクくらいしか思いつかない・・・それだって代替のやりようがあるしな、とか思っちゃうとアレなんです。他に、『idがないとサイト制作やってらんねーーー』みたいなのってあるのかなあ。idがなくて死にそうな場面が思いつかない 2010-10-05 10:47:26
行長よりも長い親文字列のルビ - 日本語練習虫
HTML5(とCSS3)における縦書きやルビの仕様を見直しより良いものにしようという最近の努力がpublic-html-ig-jp@w3.orgに積み上げられているのを拝読して、深い敬意を覚えた。とりわけ、「Re: ルビ問題の妥協点を探る」の前後に刺激を受け、次のような実験を試みることにした。 実験は、「日本の神話時代の終わりに登場する神に、ウガヤフキアエズノミコトがいる。初代天皇神武の父であり、古事記では天津日高日子波限建鵜葺草葺不合命、日本書紀では彦波瀲武鸕鶿草葺不合尊と書かれている。」という例文に出てくる神の名にルビを振る、というもの。ただし以下の実験では都合により0208外字の「鸕鶿」を「〓〓」に置き換えている。 さて、実は私、決して日本神話について詳しいわけではない。それどころか、一般的な知識も持ち合わせていない。上記の例文は、Wikipediaの記述をもとに作文したものだ。 そ
HTMLで図まで描ける！進化した「HTML5」ってどんなもの？ - はてなニュース
HTML言語の最新バージョンとして、現在標準化作業が進められている「HTML5」。はてなブックマークでもこのキーワードを目にする機会が増え、「HTML5って何？」と疑問に思っている人も多いのではないでしょうか。今回は、「HTML5って何？どんなことができるの？」という疑問にお答えしたいと思います。 ■HTML5でできること まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。 ＜具体的に何ができるの？＞ ▽HTML5.JP - 次世代HTML標準 HTML5情報サイト ▽HTML5とは？変わるWebと注目の新要素 HTML5.0の情報サイト ▽大幅に進化した次世代 HTML 規格「HTML5」とは？ - japan.internet.com Webビジネス ▽HTML5, きちんと。 ▽めざましTech - HTML5 についての Q&A ▽2010年に勧告される「
W3C，マークアップ言語「XHTML 2」を「HTML 5」に統合へ
Web関連技術の標準化団体World Wide Web Consortium（W3C）は米国時間2009年7月2日，マークアップ言語HTMLをXMLで再定義した言語「XHTML 2」について，策定担当ワーキング・グループ（WG）の憲章（行動指針）「XHTML 2 Working Group charter」の適用を2009年末で打ち切ると発表した。同憲章を更新せず，HTML担当の「HTML WG」に投入するリソースを増やすことで「HTML 5」仕様の策定作業を加速させ，HTML開発の方向性を明確化する考え。 W3CはXHTMLをHTMLのXMLシリアライゼーション（XML形式への変換）と見なしている。HTML 5仕様にXMLシリアライゼーションを含め，引き続きHTML WGで検討していく。現在HTML 5仕様でこのXMLシリアライゼーションは「XHTML 5」と呼んでいるが，今後HTML
HTML の DOCTYPE 宣言で、SSL認証エラーでます。 - Yahoo!知恵袋
coocoo_nanさん HTML の DOCTYPE 宣言で、SSL認証エラーでます。HTML文書の最初に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> という記述をいれているのですが、 おそらく、http://www.w3.org/TR/html4/loose.dtd が原因で、SSLページへ移動しようとすると、 安全でないコンテンツが含まれた・・・ という認証エラーがでます。 ためしに、ここの記述をはずすとでません。 またこのサイトにアクセスすると、loose.dtd のファイルがダウンロード できるのですが、このファイルをダウンロードして、自分のサイトにアップして使ってもよいものなのでしょうか？ 自ドメインで使え
HTML5 における HTML4 からの変更点
この文書は「HTML5 differences from HTML4 (W3C Working Draft 25 May 2011)」の日本語訳です。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。 この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照してください。 更新日: 2011-09-15 公開日: 2011-05-26 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> HTML5 における HTML4 からの変更点 2011年5月25日付 W3C 草案 (Working Draft) この版: http://www.w3.org/TR/2011/WD-html5-diff-2011
ウェブブラウザなんかに気を遣わなくてもいい理由 (agenda)
いつの間にか2009年になってしまった。 IE6に気を使わなくてもいい理由とか「そういう系」 の話を聞くと、なんで非営利個人サイトが自分の嫌いなウェブブラウザなんかに一々気を遣わなきゃならないんだとか思う。もちろん気を遣うのには色々理由があるだろう。だが「気を遣わなくてもいい理由」というのもあっていいんじゃないか。そう思ってだらだらと悪文を書いてみた。本当に悪文だからまとまりはないよ。 相手にしていられないほど膨大な種類の「ウェブブラウザ」 この文脈においてはウェブブラウザではなく、所謂レイアウトエンジンやHTMLパーサの種類を把握すべきだろう。たとえばSleipnirもfubも、同じMSHTML.dllを利用しているなら一つとしてカウントできる。 ウェブページのレイアウトエンジン レイアウトエンジン等の名称主なバージョン（2009年1月現在）応用しているプロダクト他
hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一覧表だけ参照したい ! という場合は DOCTYPE スイッチの一覧表をご覧ください。 DOCTYPE スイッチとは何か そもそも DOCTYPE スイッチとは何か、というのがまず書くべきところですが、これは私が書かずとも良質のリソースが各種ありますのでそのリンクのみまとめておきます。 !DOCTYPE スイッチ 各UAのDOCTYPEスイッチについて - CSS Dencitie Mozilla's DOCTYPE sniffing - MDC Mozilla's DOCTYPE sniffing - MDC ( 日本語
HTML 5では「article」タグでページの「本文」が取れる - モジログ
次世代HTMLの「HTML 5」について、そのウワサは以前から耳にしながらも、中身については知らなかった。 仕様や解説記事（末尾にまとめた）をいくつか流し読みしてみて、驚いた。これこそ、私の求めていたものだ。 私は以前より、Webページの「本文」がどこからどこまでなのか、ソフトウェアで判定できる標準的な方法があればいいとずっと思っていた（「フィードをアイテム単位に区切れば、セマンティック・ウェブが一気に現実化する」）。HTML 5では、いくつか導入される新しい要素（タグ）の中に「article」というものがあり、これがまさに「記事」の範囲を示すものなのだ。 これさえあれば、プログラム的にWebページを取得して、その「article」タグの部分だけ抽出すれば「本文」になる。あらゆるWebページにこの「article」タグが入ってくれば、もうフィードに頼る必要もなく、どんなページの「本文」でも
HTML5 における HTML4 からの変更点
この文書「HTML 5 における HTML 4 からの変更点」は、W3C の HTML ワーキンググループ による「HTML 5 differences from HTML 4 (Working Draft 22 January 2008)」の日本語訳です。 規範的な文書は原文のみとなっています。この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。 原文が勧告 (Recommendation) ではなく、策定途中の草案 (Working Draft) であることにご注意ください。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。また、この日本語訳自身も更新されている可能性があります。日本語訳の最新版は、W3C 仕様書 日本語訳一覧 から参照することができます。 更新日: 2008-09-
2010年に勧告される「HTML5」は「HTML4」と何が違うのか？ - GIGAZINE
現在、ネットで一般的に使用されているHTML言語は「HTML 4」であり、1997年12月18日にW3C勧告として仕様が発表されたものです。これが実に10年以上の月日を経て、バージョンアップと言っても差し支えない「HTML 5」になるとのこと。最終版が登場するのは2010年9月頃の予定。 というわけで、来たるべき「HTML 5」時代に向けて、一体何がどう変わったのか、何が便利になるのかを見てみましょう。 HTML 5 HTML 5 differences from HTML 4 HTML 5 における HTML 4 からの変更点 面白いのがブログや記事向けの「article」要素や、画像やビデオなどの埋め込み内容に説明文やキャプションを付加する「figure」要素、マルチメディアのための「audio」および「video」要素、さらに新しい属性としてリンクをたどるときにpingされるリソース
実践アクセシブルHTML - フォームは送信してもらえばこそ
こんなフォームはイヤだ！ フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。
C90%M10%Y40%: HTML売りの少女
連載長編大河小説「HTML売りの少女」 最終回 「HTMLは要りませんか？」 「HTML買ってください。」 冷たい北風が吹き荒れる街角で、今日も少女は道行く人々にHTMLを売り続けました。 「HTMLはいかがですか？」 「心のこもった暖かくて分かりやすいHTMLです。」 「Web標準準拠のHTMLは要りませんか？」 しかしすれ違う人々は冷たく少女を突き放すのでした。 「内製してるから要らないよ。」 「ブログサービスがあるからそれで充分。」 「SEO？もうたっぷりやってあるわ。」 疲れ切った少女は街の片隅に座り込んでしまいました。 少しでも暖かさを得ようと、 DreamweaverでHTMLを「ブラウザでプレビュー」しました。 一枚目のHTMLでは、 ページの中で暖かそうな家族がひとときの団欒を繰り広げていました。 二枚目のHTMLでは、おいしそうな料理写真が表示されてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mynotes.jp/blog/2007/07/inline_in_div
ちょｗｗｗ頭よすぎる - capsctrldays (2007-01-23)