My current HTML boilerplate - Manuel Matuzovic
My current HTML boilerplate posted on 09.04.2021 Every element I use for the basic structure of a HTML document, with explanations why. Traducción a Español by www.ibidemgroup.com. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document
Native image lazy-loading for the web!
April 6, 2019 In this post, we'll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here's a sneak preview of it in action: <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> We are hoping to ship support for loading in ~Chrome 75 and are working on a deep-dive of the feat
中国語ウェブサイトの言語コード指定（lang属性） | 国際ウェブマーケティングのエクスポート・ジャパン
htmlのlang指定は端末の表示や、SEOに影響するので、正しく設定しましょう。 さて、中国語ウェブサイトの言語コードとして、これまで利用していた、 zh-CN（簡体字）、zh-TW（繁体字）は推薦しない書き方になってしまい、現時点で、古い端末の対応も考えて、正しい書き方は以下になります。 中国語簡体字サイト：html lang=”zh-cmn-Hans” 中国語繁体字サイト：html lang=”zh-cmn-Hant” 個々のコードは以下の通りになります。 “zh”はMacrolanguageで、つまり中国語です。（省くことも可） ”cmn”は”普通話”あるいは”国語”、中国の公用語です。対して、方言もいろいろあります。例えば広東語の指定は”yue”。 ”Hans”は”簡体字”ですが、”Hant”は”繁体字”です。 下記例ですが、 html lang=”zh-cmn-Hant” とい
7 Rules of Using Radio Buttons vs Drop-Down Menus
Source: www.formassembly.comForms are essential parts of user interface whether you are working on mobile apps or web based tools. They are the best source of user interaction. User provides his information and input through forms and system interprets this information to fulfill user requests. There are certain items that make a form usable including input controls, input validation, error handli
Welcome to HTML 5.2! - Telerik Blogs
On the 21st of June 2016, HTML 5.1 has turned from being a Working Draft into a Candidate Recommendation. As you might know, this is the second step of the process that turns proposals into the standards that affect our lives daily when developing for the web. Because it has become a Candidate Recommendation, HTML 5.1 is a document that W3C believes has been widely reviewed and satisfies the Worki
Do You Know These Eight HTML5 Tags? — SitePoint
As a web developer, you will probably take advantage of a whole range of different tags when putting together your next site build. Chances are high that you are already well versed in some of the commonly known tags introduced in HTML5 such as <article>, <header> and <footer>, however you might not be aware of some of the lesser known / edge case tags you could be taking advantage of. Some of the
The Current State Of Telephone Links | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Telephone links are a thing. Like an anchor link you tap to (probably) go to another page, these are links you tap to call a number on a phone-capable device. They’ve been around for quite some time. Yet, they cause me a lot of confusion. For example, many devices will automagically recogniz
Checkbox Trickery with CSS
Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript. The Basic FormulaIt all starts with the HTML. <input id="toggle" type="checkbox"> <label for="toggle">Nothing tricky there. The for attribu
<picture>まわり雑感 その1 - fragmentary
Chrome 38が出て<picture>が有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Rocksのは<picture>の簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんは<picture>と<img srcset>, <img sizes>を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitで<picture>とかを実装しているYoavなので。 以下いろいろ。 だいたい<im
Don’t use <picture> (most of the time)
Browser support for the picture specification is landing and as Marcos Cáceres said, it is time to “go forth and <picture> all the things!” Except you shouldn’t. You shouldn’t <picture> all the things. But you should start using picture now for responsive images. No reason to wait. Confused? You’re not alone. Standards are developed in non-linear fashion. Ideas evolve and merge. And often at the e
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
Responsive Images: Use Cases and Documented Code Snippets to Get You Started IntroductionFinally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. The <picture> element and a couple of new attributes for the <img> element are behind a flag in Chromium 37 and shipping in Chromium 38 (so coming soon in Opera), in Firefox Nightly and are being impleme
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
HTML版『スタイルシートWebデザイン』
すみけんたろう著 簡略な目次 HTML版に寄せて 詳細な目次 まえがき 1. Introduction to CSS with HTML 2. tutorial of HTML as SGML 3. some more HTML 4. CSS syntax in detail 5. CSS properties for visual media in detail 6. road to mastering CSS 7. new feature in CSS2 解説と凡例――HTML版編者より アーカイヴ版の配布 HTML版に寄せて いま私はプロの編集者として勤務しています。その目から見れば、本書の記述はあまりに固く、冒頭が長すぎ、リファレンスとして使いにくく…と欠点だらけです。 ところが本書は、専門家を含む一部のかたに一定以上の評価をいただいています。大変ありがたいことです。「美人は3日で
New HTML5 Attributes for Hyperlinks: download, media, and ping — SitePoint
Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble <a> tag to keep existing attributes like href, rel, and others company. The new attributes are: download, media, and ping. In this article, we’ll take a quick look at what these new attributes are, and how they can be used once browser support improves. The download
Comparing and contrasting ins, del, and s | HTML5 Doctor
Since the mists of HTML 2 we’ve been able to semantically indicate added or removed information using the elements <ins> and <del> respectively. While seemingly simple on the surface these elements have hidden depths. I’ll also compare and contrast <del> with <s>, recently out of font style rehab and back in HTML5. Let’s start with <ins> and <del>… Using ins and del These two elements have very si
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像の最適化 | Web | Google Developers
HEML
https://blog.mismithportfolio.com/web/20160117jadebeginner
GitHub - svenkreiss/html5validator: Command line tool to validate HTML5 files. Great for continuous integration.
Native Form Elements