이 8 개의 HTML5 태그를 알고 있습니까?

웹 개발자는 웹 사이트 구성 중에 수많은 HTML 태그를 사용합니다. 많은 사람들이 , 및

와 같은 일반적인 HTML5 태그에 익숙하지만, 덜 알려진 일부 태그는 상당한 이점을 제공합니다. 이 기사는 8 개의 태그를 탐색하여 W3C 사양을 검토하고 실제 예제를 제공합니다. HTML5 태그 사용 이해 <p></p> W3C 사양은 개념적 개요를 제공하지만 실제 적용은 어려울 수 있습니다. 모범 사례가 항상 엄격하게 정의되는 것은 아닙니다. 이 기사는 권장되는 사용 예제를 제공합니다. <h1></h1> 키 테이크 아웃 <div> <p> 사용 <strong> 사용을 사용하여 사용자 활동과 관련된 텍스트를 강조하여 가시성 향상. </strong> </p>를 사용하여 덜 중요한 텍스트를 위해 시각적 영향을 최소화하십시오 <p> 짧은 인라인 따옴표에는 </p>를 사용하고 더 긴 발췌의 경우 를 사용하여 의미 론적 정확도를 유지합니다. <p> 구현 , <strong> 및 를 구현하려면 추가, 삭제 및 수정을 표시하여 편집에 유용합니다. </strong></p> 선택을 분류하기 위해 1. <li> 로 맥락 강조 표시 <code><mark></mark> 태그는 "관련성"또는 "조사"를 나타냅니다. 관련성은 컨텍스트에 따라 다릅니다. 요소는 특정 활동 중에 유용 할 때 관련이 있습니다. 예를 들어 검색 결과가 로 표시되어 검색 쿼리와 관련이 있음을 나타낼 수 있습니다. 실용 예 :

"가장 저렴한 휴일 패키지"페이지에서 가장 저렴한 패키지의 가격은 : 를 사용하여 강조 표시 될 수 있습니다. <small></small> 모범 사례 :

스타일에만 사용해서는 안됩니다. 이를 위해 CSS를 사용하십시오. 중요성을 나타내는 데 사용하지 마십시오 ( 또는 사용). 현재 사용자 작업과 관련된 관련성을 강조하려면 <blockquote></blockquote>를 사용하십시오.

2. <ins></ins> <del></del> 에서 중요도가 낮습니다 는 의미 론적 의미의 시각적 부산물 인 텍스트 크기를 줄입니다. 바닥 글이나 사이드 바에서 자주 발견되는 덜 중요한 정보에 사용하십시오. <s></s> 실제 예 : 바닥 글의

:

또는 제품 목록에서 : <select></select> 모범 사례 : <optgroup></optgroup> 또는 로 이미 강조된 텍스트의 중요성을 낮출 수 없습니다. 크기 제어를 위해서만 사용하지 마십시오.

3. 및

가있는 인용문

짧은 인라인 따옴표에는 <q></q>를 사용하고 더 긴 블록 따옴표의 경우 <blockquote></blockquote>를 사용하십시오. 이들은 스타일이 아닌 인용문입니다 (사용 <span></span>).

실용 예 :

모범 사례 : 둘 다 지원 <q>He hasn't eaten anything as good in his whole life!</q> 속성 (소스의 URL) 및 태그 (소스 제목).

4. ,

<div class="deal-list">
  <div>
    <h2 id="Vanuatu-Cruise">Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2 id="Fiji-Resort-Getaway">Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2 id="Pacific-Island-Hiking">Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

및

마크가 추가 된 텍스트, 텍스트가 제거되었으며 텍스트가 더 이상 올바르지 않습니다. 컨텍스트에 대한 모든 지원 및 cite 속성 <cite></cite> 실용 예 :

모범 사례 : 를 사용하여 원본이 교체되는 수정 사항을 사용하십시오. 스타일에만 사용하지 마십시오. 5. <ins></ins>로 구성 옵션을 구성합니다 는 <del></del> 요소 내에서 옵션을 분류하여 내비게이션을 개선합니다. 그것은 및 <s></s> 속성이 있습니다 실용 예 :

모범 사례 : <ins></ins> <del></del> 자체를 직접 선택하거나 스타일을 직접 스타일링 할 수 없습니다. <s></s> 6. cite가있는 사전 정의 된 옵션 datetime 태그에 대한 유효한 선택을 정의하여 드롭 다운 제안 목록을 제공합니다.

실용 예 :

모범 사례 : 브라우저 지원이 다릅니다. 유효성 검사는 유형에 따라 다릅니다 결론적으로, 자주 볼 수있는 HTML5 태그는 귀중한 의미 론적 향상과 향상된 사용자 경험을 제공합니다. 적절한 사용을 이해하면 더 깨끗하고 접근 가능하며 효과적인 웹 개발이 발생합니다.