너는 이 14개의 유용한 HTML 라벨을 아니?

이 글은 최초로 발표되었다kais.blog.
우리 함께 당신의 학습을 추진합시다!일일 용량의 개발자 알림을 제공합니다.저의 내용을 읽어주셔서 감사합니다!
HTML은 태그 언어입니다.이것은 태그를 추가하여 문서에 구조와 의미를 추가하고 있음을 의미합니다.이러한 태그는 브라우저가 표시하는 데 도움이 되고 기계가 당신의 내용을 이해하는 데도 도움이 됩니다.이 밖에도 무장애 문제를 방지하는 데 도움이 된다.이것이 바로 당신이 천천히 당신의 내용에 정확한 라벨을 추가해야 하는 이유입니다.
HTML은 널리 사용되고 있지만 흔치 않지만 유용한 HTML 태그가 많습니다.이 글에서 나는 네가 모를 수도 있는 아주 좋은 HTML 라벨을 너에게 보여 주고 싶다.

<abbr>: Abbreviation

<address>: Contact Address

<blockquote>: Block Quotation

<cite>: Citation

<figure> & <figcaption>: Figure with Optional Caption

<kbd>: Keyboard Input

<map>: Image Map

<progress>: Progress Indicator

<sub> & <sup>: Subscript & Superscript

<var>: Variable

<wbr>: Word Break Opportunity

: 약어<abbr> 표시를 사용하여 줄임말이나 알파벳 줄임말을 정의할 수 있습니다.그것은 웹 페이지의 접근성에 매우 큰 도움이 된다.title 속성을 결합하면 작은 도구 알림을 추가하여 정지 요소에 표시할 수 있습니다.

<abbr title="Hypertext Markup Language">HTML</abbr>

자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<주소>: 연락처 주소<address> 라벨을 사용하여 개인이나 조직의 연락처를 표시한다.

<address>
  John Doe<br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>

자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

: 블록 쿼트<blockquote> 라벨은 이 절이 다른 출처에서 인용되었다는 것을 나타낸다.cite 속성을 사용하여 쿼트 소스의 URL을 추가할 수도 있습니다.
<blockquote cite="https://alice.book">
  <p>
    It's no use going back to yesterday, because I was a different person then.
  </p>
</blockquote>
자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

: 인용문<cite> 라벨은 주로 <blockquote> 라벨과 함께 사용됩니다.그것은 창조적인 작품의 표제를 나타내는 데 써야 한다.
<blockquote> <p> It's no use going back to yesterday, because I was a different person then. </p> <footer> <cite>Alice's Adventures in Wonderland</cite> by Lewis Carroll </footer> </blockquote>
자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

와
: 선택 가능한 제목이 있는 그림<figure> 레이블을 사용하면 차트나 사진과 같이 포함된 내용을 표시할 수 있습니다.<figcaption> 태그와 결합하여 <figure> 요소에 제목을 정의합니다.
<figure> <img src="diagram.png" alt="Net income of households by household type"> <figcaption>Fig.1 - Net income of households by household type</figcaption> </figure>
자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

: 키보드 입력<kbd> 태그를 사용하여 키보드 입력을 정의할 수 있습니다.그것은 보통 한 칸짜리 글씨체로 나타난다. <p> Open the task manager by pressing <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd> </p> 자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd : 이미지 맵<map> 탭을 사용하면 클릭 가능한 영역이 있는 이미지를 만들 수 있습니다.이미지의 다양한 영역이 다른 URL에 링크되는 방법을 지정할 수 있습니다. 이렇게 하려면 usemap 속성을 <img> 표시에 추가해야 합니다.또한 지도는 여러 개의 <area> 표시를 사용하여 서로 다른 구역을 표시해야 합니다. <img src="office.jpg" alt="Floor plan" usemap="#floorplan"> <map name="floorplan"> <area shape="rect" coords="…" alt="Conference Room" href="conference-room.htm"> <area shape="rect" coords="…" alt="Kitchen" href="kitchen.htm"> … </map> 불행하게도 상세한 해석<map>의 용법은 본문의 범위를 넘어섰다. 자세히 보기: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map