7가지 흥미로운 HTML 속성(모르실 수 있음)

allow in <iframe>

cite in <blockquote> (and <del>, <ins>, or <q>)

datetime in <ins> and <del>

headers in <th> and <td>

inputmode in <textarea> or with "contenteditable"

ping in <a>

poster in <video>

허용하다

allow 속성은 iframe 내에서 사용 가능한 기능으로 정책을 정의합니다. 일부 values that it can have : 가속도계, 전체 화면, 마이크, USB...

"허용"은 기능이 iframe.에 포함되는 방식을 재정의하고 앞으로 나아가는 방식이며 레거시를 위해 속성allowfullscreen 또는 allowpaymentrequest를 남겨둡니다.

사용 예:

<!-- 
The page in the iframe will be able to use the camera,
accelerometer, gyroscope, and geolocation; but it won't be
able to use the microphone or the magnetometer, for example.
-->
<iframe src="/url-to-load" 
        title="demo"
        width="700" 
        height="400"
        allow="accelerometer; camera; geolocation; gyroscope">
</iframe>

인용하다

이것은 <blockquote> 에 대한 흥미로운 속성이지만 <del> , <ins> 또는 <q> (인용 인용문의 인라인 버전)에서도 사용할 수 있습니다.

값은 인용된 참조(또는 <ins> 및 <del>의 경우 각각 삽입/삭제 정보)가 포함된 온라인 리소스를 포함하는 URL입니다.

필수 속성은 아니지만 온라인 기사나 문서를 인용하는 경우 흥미로울 수 있습니다.

사용 예:

<blockquote cite="https://dev.to/alvaromontoro/don-t-just-practice-coding-n0d">
  <p>
    Coding is fundamental for a developer, but there's more
    to it than just that: soft skills are essential too!
    Actually, social and communication skills are almost as 
    critical and not as easy to master.
  </p>
</blockquote>

날짜 시간

datetime를 <time> 과 함께 사용하는 것이 일반적이지만 <ins> 및 <del> 요소도 사용합니다!
ins 및 del 의 경우 datetime 는 삽입/삭제 시점을 나타내며 valid date 및 optional time string 이어야 합니다.

사용 예:

<p>
  Marie enjoys reading books, visiting new places,
  <del datetime="2010-07-10T19:00">listening to BSB,</del> 
  <ins datetime="2020-11-08T12:00">programming in HTML,</ins>
  and a nice cup of coffee.
</p>

헤더

테이블 셀( <td> 또는 <th> )은 다른 헤더로 정의할 수 있지만(예: 열 및 행 헤더가 가장 일반적임) 복잡한 테이블에서는 이 두 개 이상이 있을 수 있습니다. headers 속성에는 주어진 셀에 적용되는 헤더의 ID 목록이 포함됩니다.

이 속성은 시스템에 컨텍스트를 제공하므로 복잡한 테이블에서 유용합니다. 보조 기술이나 증강 경험에 흥미로울 수 있지만 불행히도 지원이 부족합니다. 따라서 주의해서 사용하십시오!

사용 예:

<table>
  <caption>Weekend plan</caption>
  <thead>
    <tr>
      <th></th>
      <th id="saturday">Saturday</th>
      <th id="sunday">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td><th id="morning" colspan="2">Morning</th>
    </tr>
    <tr>
      <th id="hour08">8:00-10:00</th>
      <td headers="saturday morning hour08">Soccer practice</td>
      <td headers="sunday morning hour08">Reading</td>
    </tr>
    <tr>
      <th id="hour10">10:00-12:00</th>
      <td headers="saturday morning hour10">Basketball game</td>
      <td headers="sunday morning hour10">Brunch</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td></td><th id="afternoon" colspan="2">Afternoon</th>
    </tr>
    <tr>
      <th id="hour12">12:00-14:00</th>
      <td headers="saturday afternoon hour12">Siesta</td>
      <td headers="sunday afternoon hour12">Golf</td>
    </tr>
    <tr>
      <th id="hour14">14:00-18:00</th>
      <td headers="saturday afternoon hour14">Party!</td>
      <td headers="sunday afternoon hour14">Monday readiness</td>
    </tr>
  </tbody>
</table>

입력 모드

<input> 태그에는 모바일에서 다양한 키보드 입력을 트리거하는 다양한 유형이 있습니다. 예를 들어 모바일에서 키보드를 열 때 "숫자"유형을 선택하면 숫자로만 열립니다.

<textarea> 및 contenteditable 요소는 전역 속성 inputmode 을 사용하여 유사한 효과를 얻을 수 있습니다. 따라서 개발자는 편집 가능한 요소에 포커스가 있을 때 열리는 키보드 유형을 결정할 수 있습니다.
inputmode 속성은 십진수, 이메일, 없음(포커스에 키보드가 표시되지 않음), 숫자, 검색, 전화, 텍스트(기본값) 또는 URL 값을 가질 수 있습니다.

사용 예:

<textarea inputmode="none" name="myTextarea"></textarea>

<div contenteditable inputmode="decimal"></div>

핑

<a> 태그에는 링크를 클릭할 때 호출될 URL을 지정하는 ping 속성이 있습니다. "ping"은 이미지 맵 내부 영역에서도 사용할 수 있습니다.

URL은 "PING"(문자 그대로) 콘텐츠가 포함된 POST 메시지를 가져옵니다. 이 메시지는 추적 목적으로 사용될 수 있고 방문자 및 방문자가 사이트를 사용한 방식에 대한 통계 및 정보를 제공할 수 있습니다.

이 속성의 한 가지 큰 문제는 Firefox does not support it 이며, 이는 많은 수의 사용자를 제외합니다.

사용 예:

<a href="https://twitter.com/alvaro_montoro" ping="/url-stats.php">
  Check my twitter profile
</a>

포스터

개발자가 웹 페이지에 비디오를 추가할 때 저지르는 (상대적으로) 흔한 실수 중 하나는 이미지가 있고 클릭한 후 이미지를 <video> 으로 바꾸는 것입니다. 비디오가 페이지에 배치될 때까지 비디오가 로드를 시작하지 않기 때문에 이것은 유연하지 않거나 효율적이지 않습니다.
poster 속성은 갈 길입니다. 비디오 재생이 시작될 때 대체되는 이미지의 URL이 됩니다. 모양은 동일하지만 비디오와 로드 방법을 더 잘 제어할 수 있습니다.

사용 예:

<video controls poster="link-to-poster-image.jpg">
  <source src="link-to-video.mp4" type="video/mp4">
  <source src="link-to-video.webm" type="video/webm">
  Sorry, your browser doesn't support embedded videos.
</video>