正しいHTMLを書く目的はただ一つ 完結編
酒井優 @glatyou @securecat 記事での言及までして頂き、ありがとうございます。改めて記事にもコメントさせていただきたいと思いますが、記事のご意見非常にありがたく思っています。口を開くと長くなるなってしまうのですが、ここでもご返答させて頂きます。 2013-03-22 08:55:51 酒井優 @glatyou @securecat まず正直なところ私もまだタンポポ係程度のコーダーでして、セマンティックというものはそれなりに勉強してはいるつもりですが、まだまだ不勉強です。ご意見の中にもまだ理解していなかった言葉もあり、恥じるところです。とはいえ、曲がりなりにも部下に指導するとき、または 2013-03-22 08:58:32 酒井優 @glatyou @securecat 同業の方に質問されたとき、こうしたことを意識して話をしているつもりです。私も、順序としてはまずHTML
正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ
[HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉しいかという話ですので）、3と6はただのエゴですし、4の標準化っていうのはセマンティック云々の文脈でいうならばruleの話ではなくstandardの話をすべきではないでしょうか。カタチの想像もできないような未来を夢見る暇があるのなら、まずWebガバナンスからどうにかする努力をしたほうが何倍も有益でしょう。 2013/3/22 09:56追記：「セマンティックで正しいコードを書く6つの目的」のような構成であると読み取ってしまって（理由の箇条書きだと思って）上
[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者
web制作者は一人で制作するのではなく複数人で制作したリ、作ったものを他の人に渡したりします。その場合、コードは同じルールに基づいている方が引き継ぎ易いですよね。 一部の人間、または企業内のみで通っているルールは方言の様なもので、他では通用しません。 こうした、別の場所で制作している人間の間で通じる可能性のあるスタンダードな概念として、セマンティックwebという考え方が存在している(全ての制作者が行きつくべき概念としての存在意義もある、という意味です。その為にあるという話ではないです。コーディングルールもこの考え方を踏まえた上で作るべきで、地域やコミュニティの違う集団の中でも、皆がセマンティックというものを意識として持っていれば、マークアップも似通っていく、共通化されていくはずだと考えています)のです。現状、たくさんの制作者がこれ以外のルールに基づいて制作を行うという事はまあ、あり得ないで
![[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者](https://cdn-ak-scissors.b.st-hatena.com/image/square/3343a483084de927c8c30adc27a8dcb2562b73d2/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fsemantic-html-reason-01-150x150.png)
Structural Semantics: The Importance Of HTML5 Sectioning Elements — Smashing Magazine
Now that HTML5 has finally made sectioning elements available, many of us greet them with great reluctance. Make no mistake: Sectioning elements help you improve document structure, and they’re in the spec’ to stay. Once and for all, Heydon Pickering will be exploring the problems these elements solve, the opportunities they offer and their important but misunderstood contribution to the semantic
[HTML5 入門]実制作で迷わない為のマークアップ例：会話文
文書構造を意識したマークアップ例 今回から始める不定期連載です。HTMLのコーディングのやり方はリファレンスサイト等で例文を用いて行われることが多いですが、どうも抽象的だったり、実際の運用に即していない印象のものが多く見られるように感じています。 仕様に関する解説やコードの書き方も、遠まわしだったり、「だから結局どう書けばいいの？」という感は拭えません。また、ドキュメント自体が書かれた地域の文化を基準にしており、我々日本のweb制作現場の実際にそぐわない場合もありますよね。 こういったことについて、一つ一つ実際の事例や具体的な使われ方を挙げながらHTML、CSSのコーディングについて解説したいと思います。 また、この連載にはブログの記事と同じく私個人のHTML5のマークアップに対する考え方が強く織り交ぜられることと思います。もし見解の相違などありましたらご意見頂きたいと考えています。 シン
![[HTML5 入門]実制作で迷わない為のマークアップ例：会話文](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ad9c1f78cd469d6befc307d0ea1a7cddb12ebc2/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fhtml5-semantic-dialogue-01-150x150.png)
ちょっとしたメモ - HTML5＋Microdataへの全面移行
この春頃からMicrodataを試してみたりHTML5にかかわる機会が増えてきたので、いずれ実施しようと考えていたサイト全ページの書き換えを敢行しました。スタイルシートはごく一部を除いてほとんど従来のまま。ページ自身のメタデータほかの構造化データは、Schema.org語彙を中心にして表現しています。 Microdataの記述 今回使ったMicrodataの一部を紹介しておきます。Microdataは、文書内に記述されたものごとの特徴を表す名前-値の対（プロパティ）のグループをアイテムと呼び、基本単位として扱います。 アイテムと型 Microdataの場合、まず最初にアイテムの範囲（スコープ）をitemscope属性で示します。文書のメタデータを表現したいので、html要素にこの属性を加えて全体を一つのアイテムとします（itemscopeは真偽値属性で属性名のみを記述しますが、XHTML構
今知っておきたいHTML5と周辺技術
Webページを作成するための言語、HTMLは時代とともに様々な機能を取り入れ、進化してきました。最近では、単なる「マークアップされた文書の集まり」というだけではなく、「アプリケーション」としての仕組みも持つようになってきています。 本特集では、そういった潮流の中で生まれてきたHTML5について、便利になった新機能や、従来のHTMLとの違いなどについて、詳しく解説していきます。 他にも、HTML5には含まれていないものの、HTML5と同時期に多くのWebブラウザでサポートされたCSS3やSVGなどの有用な技術の解説や、実際にHTML5やマイクロデータを使ったセマンティックなマークアップの導入例を説明する連載など、充実した内容でお届けします。
検索結果をより目立たせるマークアップとは？
セマンティック・ウェブ 「セマンティック・ウェブ」とは、ウェブ上にあるあらゆる情報を、データとして正確に認識し整理しようする考え方、技術の向上を促進する動きのことです。 筆者はこれまで、複数ある自社SEOのSEOコンサルやアクセス解析を専門としてきましたが、今では気づくとHTML5のマークアップについて調べる日々が続いています。それは、検索エンジンはじめ外部のプログラムにとって扱いやすいマークアップを行うことが、HTML5で強く打ち出された「セマンティックなマークアップ」と直接つながっているからでした。そしてその先には「セマンティック・ウェブ」があります。 このセマンティック・ウェブの実現で、ウェブ上に存在する莫大なデータは整理され、検索エンジンをはじめとする様々なプログラムは、ユーザーが欲しい情報やそれに関連した多くの情報を正確に提供できるようになります。 また、社会や産業の基盤となりう
実践！すぐに導入できるセマンティックなマークアップ、4つのパターン
セマンティックなマークアップの実践 前回は、セマンティック・ウェブを中心に、HTML5やマイクロデータのマークアップについて簡単に説明しました。2回目となる今回は、もっと実践的なHTML5を使用したセマンティックなマークアップについて、以下の4つのサイトを例に挙げながら進めていきます。 ニュース配信サイト ブログサイト eコマースサイト コーポレートサイト 上に挙げたサイトの文書構造はそれぞれ異なりますし、また同じサイト内でも、ページによって構成は異なります。また、HTML5の仕様書を見ても、サイトごとやページに応じたような要素の使用例などは詳しく説明してあるわけではありません。 （＊）要素についての説明は、「HTML5の新機能、HTML4との違い」の記事を参照してください。 1つ1つの要素の定義を理解しても、実際にセマンティックなマークアップを施す際は、サイトによってケースが様々なため、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Courses and Tutorials in SEO | Envato Tuts+
CSS 20 stunning examples of CSS 3D transforms
HTML5を使って、セマンティックなWebサイトを作ろう