HTML5 의미 요소 안내서

새 웹 사이트를 만들 때마다 HTML은 <div>부터 구축할 수 있습니다.그러나 최근에 나는 이러한 의미 라벨을 이해하여 사이트를 구축하기 시작했다.내 생각에, 잠깐만, 이 라벨들은 무엇입니까?내가 왜 얘를 써야 돼?🤯 ?
그리고 나서 나는 이런 의미 요소들을 연구하기 시작했다. 마치 하늘과 같다!왜 이렇게 많은 날을 내가 놓쳤는지.그래서 저는 이런 유용한 라벨에 대한 공부를 공유하고 싶습니다.

무엇이 어의와 비어의 원소입니까?

Semantic elements = elements with a meaning.의미 요소는 브라우저와 개발자에 대한 의미를 명확하게 묘사했다.
비어의 요소의 예: <div>와 <span> - 내용과 무관하다.
의미 요소의 예: <form>, <table>와 <article> - 그 내용을 명확하게 정의했다.

모두 좋은데, 나는 왜 의미 요소를 사용해야 합니까?

1. 읽기 쉽다

이것은 의미 요소를 사용하여 첫 번째 코드를 볼 때 알 수 있는 첫 번째 일일 수도 있습니다.
이것은 작은 예이지만, 프로그래머로서, 너는 수백 수천 줄의 코드를 읽을 수 있다.
코드를 읽고 이해하는 것이 쉬울수록 당신의 일은 더욱 쉽다.

2. 액세스 용이성

우리는 의미 요소를 발견하고 이해하기 쉬운 유일한 사람이 아니다.
검색 엔진과 보조 기술(예를 들어 시력이 손상된 사용자의 화면 리더)도 사이트의 상하문과 내용을 더욱 잘 이해할 수 있다는 것은 사용자가 더욱 좋은 체험을 얻을 수 있다는 것을 의미한다.

3. 더 일치하는 코드를 가져올 수 있다

비어의 요소를 사용하여 제목을 만들 때, 다른 프로그래머들은 그것을 <div class="header">, <div id="header">, <div class="head"> 또는 간단한 <div>로 쓸 수 있습니다.
헤더 요소를 만들 수 있는 방법은 매우 많은데, 모두 프로그래머의 개인적인 선호에 달려 있다.
표준적인 의미 요소를 만들어서 모든 사람이 쉽게 이해할 수 있도록 한다.

곤혹스러운 비슷한 꼬리표를 토론합시다!

1. <섹션> 및 <article>

"뭐가 달라요?"물어봐도 돼.
이 두 원소는 모두 내용을 구분하는 데 쓰인다. 그래, 그것들은 틀림없이 서로 바꾸어 사용할 수 있을 것이다.이것은 어떤 상황의 문제입니까?
HTML4는 컨테이너 요소<div>만 제공합니다.
HTML5는 여전히 이 점을 사용하고 있지만 HTML5는 우리에게 <section>와 <article>를 제공하여 <div>를 대체했다.<section>와 <article> 원소는 개념적으로 비슷하고 교환할 수 있다.어느 것을 선택해야 할지 결정하려면 다음과 같은 몇 가지를 주의하세요.

물품은 독립적으로 중복 사용할 수 있어야 한다.

장절은 내용의 주제를 그룹으로 나누는 것이다.

<section>
  <p>Top Stories</p>
  <section>
    <p>News</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Story 1</article>
    <article>Story 2</article>
    <article>Story 3</article>
  </section>
</section>

2. <header>와 <hgroup>

<header> 요소는 일반적으로 문서, 장 또는 문장의 맨 위에 위치하고 주요 제목과 일부 내비게이션과 검색 도구를 포함한다.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact us</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

<hgroup> 요소는 주 제목이 하나 이상의 부제목을 포함하기를 원하는 곳에 사용해야 한다.

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

<header> 요소는 모든 내용을 포함할 수 있지만 <hgroup> 요소는 <h1>부터 <h6> 및 포함<hgroup>까지만 다른 제목을 포함할 수 있다는 것을 기억하십시오.

3. <figure>와 <figcaption>

<figure> 이미지 내용을 포장하고 <figcaption> 이미지에 제목을 추가하는 데 사용합니다.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

4.<cite>와 <mark>

<cite> 요소는 인용된 창조적인 작품을 묘사하는 데 사용되며 반드시 이 작품의 제목을 포함해야 한다.인용문 데이터와 관련된 상하문에 대한 적당한 약정에 따라 참고 문헌은 줄임말 형식을 채택할 수 있다.

<figure>
    <blockquote>
        <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
    </blockquote>
    <figcaption>First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George Orwell (Part 1, Chapter 1).</figcaption>
</figure>

<mark> 요소는 동봉된 상하문에 표시된 단락의 관련성이나 중요성 때문에 참고 또는 주석을 위해 표시하거나 돋보이는 텍스트를 나타낸다.

<p>Search results for "salamander":</p>
<hr>
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>

5.<meter>와 <progress>

<meter> 원소는 이미 알고 있는 범위 내의 표량값이나 분수값을 나타낸다.

<label for="fuel">Fuel level:</label>

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

<progress> 요소는 작업의 완성 진도를 표시하는 표시기를 보여 줍니다. 보통 진도표로 표시됩니다.

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

<meter>원소와 달리 <progress>의 최소값은 항상 0이고 <progress>원소는min속성을 사용할 수 없습니다.

도구책

1. https://www.w3schools.com/html/html5_semantic_elements.asp
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element
3. https://www.freecodecamp.org/news/semantic-html5-elements/
시간을 내서 본문을 읽어 주셔서 감사합니다.그것은 최초로 나의 blog 잡지에 발표되었다.
만약 네가 이 문장이 매우 유용하다고 생각한다면, 나에게 칭찬을 하나 하고 따라와라.언제든지 저에게 연락하여 당신의 생각을 토론하거나 공유해 주십시오.