【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita

2023/07/06 87 users Qiita 戦意 HTML Living Standard

本記事の結論は、「とりあえずHTML Living Standardを読め」です。 正直明日からHTMLを勉強したいです！って人には全くオススメできません。 おそらく開始5秒で戦意を喪失することになると思います。 とはいえHTMLの仕様全てが記述されているので「セマンティックにマークアップしたい」って時は「HTML Living Standard... 続きを読む

[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS | コリス

2017/03/14 95 users セレクタ コリス アクセシブル valid CSS

HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです... 続きを読む

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ | コリス

2015/10/13 436 users ユーザエージェント セクショニング section コリス

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Con... 続きを読む

シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret | コリス

2015/02/10 388 users アクセシブル コリス フレームワーク 商用 HTML

シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークで... 続きを読む

t32k、怒られる！セマンティック バージョニングしてますか？ | HTML5Experts.jp

2014/12/09 65 users バージョニング バンクーバー ライブラリ OSS活動 t32k

どうも、バンクーバーでぶらぶらしている@t32kです。最近は暇なのでもっぱらOSS活動に勤しんでおります。そんなわけで日々のアプリケーション開発において重要になってくるのがバージョニングです。 今日はセマンティック バージョニングについて解説します。自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的だと思うのですが、実はどのようにバージョン... 続きを読む

フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法 | コリス

2013/06/18 92 users placeholder コリス title属性 スクリプト

フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベ... 続きを読む

正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ

2013/03/21 153 users ネコメシCEOブログ 正しいHTML 目的 Facebook

2013-03-21 正しいHTMLを書く目的はただ一つ [HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉し... 続きを読む

[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション | コリス

2012/04/05 152 users NAV Button コリス チュートリアル ナビゲーション

デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li>... 続きを読む

[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js | コリス

2012/02/20 143 users パララックス コリス jQuery スライダー スラ

普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスラ... 続きを読む

クリック可能な箇所でa要素を使用しない時に気をつけたい3つのポイント | コリス

2011/08/25 72 users コリス a要素 箇所 定義 アンカーリンク

リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。 下記は各ポイントを意訳したものです。 a要素は、いつ使うべきでしょうか。 私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました... 続きを読む

Googleの意味解析能力の向上によってライティング能力がますます重要になる | 海外SEO情報ブログ

2011/06/22 57 users ライティング能力 Google 向上 海外SEO情報ブログ

言葉だけを単に認識するのではなくその言語が表す「意味」を理解する、Googleの言語解析能力が年々向上しているのは間違いありません。専門用語で言うところの“Smantic”(セマンティック)で、このセマンティックを処理する力が特に最近飛躍的に伸びてきていることを、WebmasterWorldの管理者が次のような現象によって確信しています。検索キーワード（キーフレーズ）に入っているキーワードの同意語... 続きを読む

ちょっとしたメモ - SPARQL: セマンティック・ウェブとWeb 2.0が出会うところ

2006/01/08 80 users SPARQL RDBMS RDF SQL クエリ言語

RDBMSとRDFをマップすれば、両者の特徴を生かした「セマンティック・ウェブ的な応用」への道が開ける。しかし、RDFの背後にあるデータベースには、外部から直接SQLで問い合わせを行うことができない。ここをカバーするのがRDFのクエリ言語であるSPARQLだ。これは、"Web 2.0アプリケーション"にとってもキーになる可能性がある。少し古い記事だが、Kendall ClarkによるSPARQL:... 続きを読む

RDFとセマンティック･ウェブの現在

2005/06/16 113 users RDF オントロジー unicode URI 推論

セマンティック・ウェブのレイヤーケーキ URI, Unicode, XMLを基盤に ウェブの蓄積をベースにグローバルなデータ（OpenWorld）を扱う マシンが読める形でデータや知識を共有 RDFによるシンプルで柔軟なデータ形式 RDFS 、オントロジーによる語彙と知識の記述 推論規則と論理フレームワーク 述語論理、記述論理を用いた推論、高度な検索 検索結果をエージェントが判断してさらに処理を継... 続きを読む