For full text search please use the '?' prefix. e.g. ? Onboarding

HTML

Collections

<a download> 동작 규칙

  • Same-origin URL (같은 출처):
    • download="filename.ext"로 파일명 지정 가능
    • 브라우저가 해당 파일명을 사용해 다운로드
  • Cross-origin URL (다른 출처):
    • download 속성 무시됨
    • 서버의 Content-Disposition 헤더가 우선 적용
    • Content-Disposition: attachment; filename="server-filename.ext"

Amazing HTML5 Features That Just 3% of Developers Knows

  • datalist
  • <input type="file" accept=".png, .jpg">
  • details
  • meter
  • progress

Working with forms with vanilla JavaScript

... Form fields must have a name attribute to be included in the object. Otherwise, they’re skipped. The id property doesn’t count.

Those HTML Attributes You Never Use

  • The enterkeyhint Attribute For Virtual Keyboards
  • The title Attribute On Stylesheets
  • The cite Attribute For The <blockquote> And <q> Elements
  • Attributes For Custom Ordered Lists
    • reversed, start, type, value
  • The download Attribute For The <a> Element
  • The decoding Attribute For The <img> Element
  • The loading Attribute For The <iframe> Element
  • The form Attribute For Form Fields
  • The cite And datetime Attributes For Deletions/Insertions
  • The label Attribute For The <optgroup> Element
  • The imagesizes And imagesrcset Attributes For Preloading Responsive Images
  • The crossorigin attribute which can apply to multiple elements, including <audio>, <img>, <link>, <script>, and <video>, providing support for cross-origin resource sharing (CORS);
  • The title attribute for <dfn> and <abbr>;
  • The new disablepictureinpicture attribute for the <video> element;
  • The integrity attribute for scripts, which helps the browser verify that the resource hasn’t been improperly manipulated;
  • The disabled attribute for the <fieldset> element, to easily disable multiple form elements simultaneously;
  • The multiple attribute for email and file inputs.

template

https://news.ycombinator.com/item?id=33089975

<template> is special, very different from display: none; and definitely has a few advantages:

  • The elements in it are parsed into a different document and are inert until cloned or adopted into the main document. Images don't load, scripts don't run, styles don't apply, etc. This is very important.

  • The content model validation is turned off, so a <template> can contain a <td>

  • Mutation observers and events are not fired for parsed content.

  • The <template> element itself can appear anywhere, including restricted content elements like <table>

  • Other HTML processing libraries generally know to ignore <template>, unlike other content just hidden with CSS.

This makes parsing faster and guaranteed to have no side effects, and conveys the correct semantics to the browser and tools.

Semantics

In addition - “template” also conveys correct semantics to the other developers working on the codebase. If I see an html at the bottom with “display: none” it’s very possible that the intended usage is to leave it there and set “display: block”, ie a modal. “display: none” doesn’t convey “clone me”, but “template” does.

Forms

Inputs

How to Use Responsive HTML Video (...and Audio!)

<video>
  <source media="(min-width: 2000px)" src="large.webm" type="video/webm" />
  <source media="(min-width: 2000px)" src="large.mp4" type="video/mp4" />
  <source media="(min-width: 1000px)" src="medium.webm" type="video/webm" />
  <source media="(min-width: 1000px)" src="medium.mp4" type="video/mp4" />
  <source src="small.webm" type="video/webm" />
  <source src="small.mp4" type="video/mp4" />
</video>
Children
  1. 11 HTML best practices for login & sign-up forms
  2. 24 Powerful HTML Attributes Every Senior Web Engineer Should Master!
  3. A practical guide to using shadow DOM
  4. All You May Need Is HTML
  5. HTML First
  6. How To Choose The Right Tag
  7. How to Favicon in 2023: Six files that fit most needs
  8. How to prevent buttons from causing a form to submit with HTML
  9. I bet you didn't know about these 15 HTML features.
  10. Should I Use a Button or a Link?
  11. Techniques to Break Words
  12. Text Fragments
  13. You don't need a modal window