HTML 2

Разница по перфомансу (нет ни в каких селекторах - ну почти)

id - плохо, глобальная переменная, стилизация сильна специфична. Чтобы не привязались нужно манглить (добавлять hash)

Если вдруг нужен css-фреймворк - юзать mixins

meter - указывает на репрезентацию числового значения (надежность пароля). Есть шкала (min-max).
progress - шкала выполнения чего-то, которая меняется (загрузка)

a без href - тоже норм.
a role=button - ссылка, похожая на кнопку, так же на js сделать, чтобы нажималась не только enter, но и space

table - только для таблиц (с бордером и т.д.)

input types
Чтобы показать pass в поле меняем на text

Custom elements

link

<pokedex-card></pokedex-card>

надо регистрировать в js

<pokedex-header>
</pokedex-header>

<header is=pokedex-header>
</header>

window.customElements.define('sw-rey', class extends HTMLElement {}, {extends: "header"})

postHTML

const PostHTML = require('posthtml')
const html =
`
  <em>Hello, wrold!</em>
`

const plugin = tree => tree.match({ tag: 'em' }, node => {
  node.attrs = {class: 'hi'}
  return node
})

PostHTML([])
  .process(html)
  .then(result => {
    console.log(result.html)
  })

const PostHTML = require('posthtml')
const html =
`
  <a href="/something">Something</a>
  <a href="http://kottans.org">Kottans</a>
`

const attrs = {
  href: true,
  target: false,
  rel: false
}

const links = ['a', 'area'].map(tag => {
  return { tag, attrs }
})

const isAbsolute = RegExp('^(https?)?://')
const plugin = tree => tree.match(links, link => {
  let {attrs} = link
  let {href} = attrs

  if (isAbsolute.test(href)) {
    attrs.target = "_blank"
    attrs.rel = "external"
  }

  return link
})

PostHTML([])
  .process(html)
  .then(result => {
    console.log(result.html)
  })

microdata