属性

まぼろしのマークアップ勉強会 #1 @masuP9

Attributes for ordered list

  1. パパさん 100pt
  2. ぴっぴさん 80pt
  3. プーさん 60pt
  4. ぺーさん 40pt
  5. ぽっぽさん 20pt
  1. パパさん 100pt
  2. ぴっぴさん 80pt
  3. プーさん 80pt

4位以下は...

  1. ぺーさん 40pt
  2. ぽっぽさん 20pt
start attribute
<ol>
  <li>パパさん100pt</li>
  <li>ぴっぴさん80pt</li>
  <li>プーさん80pt</li>
</ol>
<p>4位以下は...</p>
<ol start="4">
  <li>ぺーさん40pt</li>
  <li>ぽっぽさん20pt</li>
</ol>
  1. ぽっぽさん 20pt
  2. ぺーさん 40pt
  3. プーさん 60pt
  4. ぴっぴさん 80pt
  5. パパさん 100pt

🎉

reversed attribute
<ol reversed>
  <li>ぽっぽさん20pt</li>
  <li>ぺーさん40pt</li>
  <li>プーさん60pt</li>
  <li>ぴっぴさん80pt</li>
  <li>パパさん100pt</li>
</ol>
  1. パパさん 100pt
  2. ぴっぴさん 80pt
  3. プーさん 80pt
  4. ぺーさん 40pt
  5. ぽっぽさん 20pt
value attribute
<ol>
  <li>パパさん100pt</li><!-- 1 -->
  <li>ぴっぴさん80pt</li><!-- 2 -->
  <li value="2">プーさん80pt</li>
  <li value="4">ぺーさん40pt</li>
  <li>ぽっぽさん20pt</li><!-- 5 -->
</ol>
ol > li:not([value]) + li[value] {
  list-style: none;
}

hidden attribute

<p hidden>なにもないな、誰もいないな</p>
3.2.6.5 The style attribute - HTML Standard

Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed.

(NOTE)In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.)

To hide and show content,
use the hidden attribute.

OKay

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation.

6.1 The hidden attribute - HTML Standard

The hidden attribute must not be used to hide content

!?!?!?!?!?

it indicates that

  • the element is not yet, or is no longer, directly relevant to the page's current state, or
  • that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user.

inert attribute

https://github.com/WICG/inert

fieldset 要素 - HTML | MDN

はよ