아무튼 조금 시멘틱하고 모던한 HTML 태그들

🤔 들어가며

문득 HTML로 마크업을 하다 이런 생각이 들었습니다.

'나 맞게 적고 있나?'

물론 이런 생각이 든다면 아직 완벽히 HTML에 대해 체화하지 못했다는 의미이겠지요 🤯
아무튼 < div >만 남발하는 것보다는 훨 나은, 언젠가는 써먹을 시멘틱한, 모던한 HTML 태그들을 정리해봤습니다 🔥

아무고토 모르는 개자이너 지망생이 혼자 공부하고 알게 된 지식을 정리한 것으로, 다르거나 틀린 부분이 있을 수 있습니다. 혹시나 잘못된 부분이 있다면 댓글로 알려주시면 제가 많이 감사합니다,,🙇 🙇‍♂️

🎨 콘텐츠 레이아웃 관련 태그들

콘텐츠가 담긴 항목들의 구역을 나눌 때 쓰이는 태그들입니다.

<header>, <nav>, <aside>, <article>, <section>, <main>, <footer>

시멘틱 마크업에 대해 아시는 분들이라면 익숙할 태그들입니다. 모질라에 써있는 설명을 빌려오면,

• < header > : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다.
  👉 header 태그는 말 그대로 헤더에 쓰이면 좋겠네요

• < nav > : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구역을 나타냅니다.
  👉 이 친구도 말 그대로 네비게이션(GNB, LNB 등)에 쓰이면 되겠네요

• < aside > : 문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다.
  👉 주로 사이드바나 카테고리에 사용된다고 합니다.

• < article > : 페이지 내에서 독립적으로 구분되거나 재사용될 수 있는 구역을 나타냅니다.
  👉 Velog나 유튜브의 썸네일, SNS의 피드 등이 여기에 해당되는 것 같습니다.

• < section > : 문서의 독립적인 구역을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
  👉 < article > 태그와 어떻게 다른지 궁금증이 많았는데, 찾아보니 특정 영역을 그룹화할 때 사용한다는 부분에서 < article > 태그와 공통점이 있고, < section > 태그는 재사용이 어렵다는 점에서 차이가 있는 것 같습니다.

• < main > : 문서 body의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이뤄집니다.
  👉 태그 이름 그대로 메인이 되는 영역에 들어가면 딱이겠네요!

• < footer > : 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
  👉 일반적으로 아는 페이지 최하단의 푸터 뿐만 아니라 콘텐츠의 정보를 표시하는 용도로도 사용된다는 점이 흥미로운 것 같습니다.

✏️ 텍스트 콘텐츠 관련 태그들

텍스트 콘텐츠에 쓰이는 태그들입니다. 해당 콘텐츠의 목적이나 구조 판별에 사용되므로 접근성과 SEO에 중요합니다.

<blockquote>, <figure>, <figcaption>, <hr>, <pre>

• < blockquote > : 텍스트 길이가 긴 인용문을 나타냅니다.

• < figure > : 독립적인 콘텐츠를 표현합니다. < figcaption > 태그로 설명을 넣을 수 있습니다.

• < figcaption > : 부모 요소로 쓰인 < figure > 태그에 설명을 붙일 수 있습니다.

• < hr > : 이야기의 주제 변경, 구분 등의 목적으로 사용됩니다.
  👉 이 글에 쓰인 구분선도 < hr > 태그의 예시로 볼 수도 있겠네요!

• < pre > : 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.
  👉 < pre > 태그를 사용하면 이런 것도 가능하겠군요.

<pre>
 ⠀⢰⠒⠒⠒⢲⠆⠀⠀⢀⠤⢤⡀⠀⡴⠀⠀⢀⣀⣀⣰⣀⣀⡀⠀⠀⠀⠀⠀
⠀⠀⣎⣀⣀⣀⡜⠀⠀⢰⠃⠀⢠⠇⢰⠓⠂⠀⢀⠔⠒⠒⠲⡄⠀⠀⠀⠀⠀⠀
⠤⠤⠤⣤⠤⠤⠤⠄⠀⣇⠀⢀⠞⢀⡯⠤⠀⠀⠹⠤⡤⠤⠞⠁⠀⢠⠔⢤⣀⠆
 ⠀⠀⢀⡏⠀⠀⠀⠀⠀⠈⠉⠁⠀⡸⠀⠀⠠⠤⠤⠴⠧⠤⠤⠄⠀⠀⠀⠀⠀

</pre>

✏️ 인라인 텍스트 관련 태그들

인라인 텍스트들을 시멘틱하게 적을 수 있는 태그들입니다. 텍스트 사이에 추가해서 의미를 부여할 수도 있습니다.

<abbr>, <cite>, <code>, <i>, <kbd>, <mark>, <ruby>, <rp>, <rt>, <time>

• < abbr > : 줄임말 또는 머리글자를 나타냅니다.
  👉 마우스 커서를 갖다대면 어떤 말의 줄임말, 머리글자인지 해석이 뜹니다.
  별다줄

• < cite > : 저작물의 출처 표기 시에 사용하며, 제목을 반드시 포함해야 합니다.
  👉 font-style 의 기본값이 italic으로 되어있습니다.
  Mozilla

• < code > : 코드 조각을 콘텐츠에 표시할 수 있습니다.
  👉 바로 위의 < cite > 태그 설명에도 이 코드를 사용했습니다. Velog에 코드 조각을 적을 때 유용할 것 같습니다.
  이렇게 강조를 할 수도 있습니다. 괜찮죠?

• < i > : 텍스트에서 주위와 구분해야 하는 부분을 나타냅니다.
  👉 실무나 프로젝트에서는 주로 아이콘을 표시할 때 이 태그를 사용하는 것 같습니다.
  👉 < em > 태그는 콘텐츠의 강세를 나타낼 때 사용하고, < i > 태그는 콘텐츠의 내용을 구분해야 하는 고유명사, 아이콘 등에 사용합니다. 겉으로 보이는 생김새는 동일합니다.

• < kbd > : 키보드 입력이나 음성 입력 등 임의의 장치를 사용한 유저의 입력을 나타냅니다.
  👉 cmd Velog에서는 이런 식으로 표시되네요.

• < mark > : 맥락에 연관성을 가진 부분에 하이라이트 표시를 합니다.
  👉 < strong >이 중요도를 가진 부분을 나타낼 때 사용한다면, < mark >는 연관성을 가진 부분을 표시할 때 사용합니다.
  👉 Mozilla에서는 < mark > 태그를 표시만을 위한 용도로 사용하지 말라고 권장하고 있습니다.

• < ruby >, < rp >, < rt > : 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.
  👉 < rp > 태그는 루비 주석을 지원하지 않는 브라우저에서 보여질 괄호를 제공할 때 사용합니다. < rt > 태그는 루비 주석에 실질적 부분인 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.
  
  マークアップ(마크업)
  

<ruby>
  マークアップ<rp>(</rp><rt>마크업</rt><rp>)</rp>
</ruby>

• < time > : 시간의 특정 지점이나 구간을 나타냅니다.

📢 미디어 관련 태그들

이미지, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원하는 태그들입니다.

<audio>, <video>, <track>

• < audio > : 음성 콘텐츠를 포함할 때 사용합니다.

• < video > : 비디오를 재생할 수 있는 미디어 플레이어를 삽입합니다.

• < track > : < audio >, < video > 태그의 자식으로 사용되며, 시간 기반 데이터(자막 등)를 지정할 때 사용합니다.
  👉 default, kind, label, src, srclang 등 부가적인 속성을 지정할 수 있습니다.

📑 폼 관련 태그들

여러 입력 가능한 태그들입니다.

<datalist>, <fieldset>, <legend>, <label>, <meter>, <optgroup>, <output>, <progress>

• < datalist > : < select > 태그와 비슷하지만, 검색기능과 자동완성을 제공한다는 점에서 차이점이 있습니다.
  

  <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

  <datalist id="ice-cream-flavors">
      <option value="Chocolate">
      <option value="Coconut">
      <option value="Mint">
      <option value="Strawberry">
      <option value="Vanilla">
  </datalist>

• < fieldset > : 여러 컨트롤과 레이블을 묶을 때 사용합니다.

• < legend > : < fieldset > 태그의 설명을 제공합니다.

• < label > : 폼에서 항목들의 설명을 나타냅니다.

  웹을 만들기 위한 언어 3대장 HTML
  CSS
  JavaScript

<fieldset style="width: 240px">
  <legend>웹을 만들기 위한 언어 3대장</legend>
  
  <input type="checkbox" id="HTML"/>
  <label for="HTML">HTML</label><br/>
  
  <input type="checkbox" id="CSS"/>
  <label for="CSS">CSS</label><br/>
  
  <input type="checkbox" id="JavaScript"/>
  <label for="JavaScript">JavaScript</label>
</fieldset>

• < meter > : 특정 범위 내에서의 스칼라 값 또는 백분율 값을 나타냅니다.
  월요일의 내 체력 :
  
  

<label for="HP">월요일의 내 체력 : </label>
<meter id="HP"
       min="0" max="100"
       low="10" high="90" optimum="70"
       value="10">
</meter>

• < optgroup > : < select > 태그의 요소의 옵션을 카테고리화 할 수 있습니다.
  제육볶음 육회비빔밥 삼겹살 리코타치즈샐러드 매시드포테이토 바베큐 폭립 부타동 미소라멘 텐동

<select>
  <optgroup label="한식">
  	<option>제육볶음</option>
    <option>육회비빔밥</option>
    <option>삼겹살</option>
  </optgroup>
  
  <optgroup label="양식">
  	<option>리코타치즈샐러드</option>
    <option>매시드포테이토</option>
    <option>바베큐 폭립</option>
  </optgroup>
  
  <optgroup label="일식">
  	<option>부타동</option>
    <option>미소라멘</option>
    <option>텐동</option>
  </optgroup>
</select>

• < output > : 계산이나 유저 행동의 결과를 보여줄 수 있는 태그입니다.
  ⚠️ Mozilla의 예시를 보시면 좋을 것 같습니다.
  https://developer.mozilla.org/ko/docs/Web/HTML/Element/output

• < progress > : 어느 작업의 완료 정도를 나타내며, 주로 프로그레스 바의 형태를 띕니다.
  

<progress max="100" value="50"></progress>

🤝 인터랙션 관련 태그들

인터랙션 가능한 유저 인터페이스를 만들 때 사용할 수 있는 태그들입니다.

<details>, <summary>, <dialog>

• < details > : 열림 상태일 때만 내부의 정보를 보여줍니다.

• < summary > : < details >태그 상세 부분에 대한 설명을 지정합니다.

  👉🏻 여길 눌러보세요 👉🏻 한 번 더 눌러보세요 이게 '디테일'이다.

<details>
  <summary>👉🏻 여길 눌러보세요</summary>
  <details>
  	<summary>👉🏻 한 번 더 눌러보세요</summary>
    이게 '디테일'이다.
  </details>
</details>

• < dialog > : modal과 같은 창이 나옵니다.
  👉 자바스크립트와 함께 사용할 때 괜찮은 효과가 있는 것 같습니다.
  https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog

👋 마무리

생각보다 HTML은 꽤 친절한 녀석이었습니다.

정리하며 참고한 Mozilla의 문서입니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element