[HTML] HTML 기본 문법 : 4. 시맨틱(Semantic) HTML

Semantic HTML

시맨틱 HTML은 우리가 작성한 코드에 의미를 부여하는 것을 말한다.

시맨틱 HTML이 나오기 전에는, 성분(elements)이 어떤 기능을 하는지, 어떤 콘텐츠가 들어가는지에 대한 의미가 없었다. 따라서 div와 같은 성분이 id를 이용해 header부터 footer, 그리고 articles까지 다양한 요소를 만드는 범용 성분으로 사용되었다.

시맨틱 HTML가 등장함으로써, 개발자와 브라우저에게 성분의 기능과 콘텐츠가 정확히 무엇인지 알려주는 요소가 도입되었다.

<!--Semantic HTML이 아님-->
<div id="footer">
 <p>이것은 footer이다.</p>
</div>

<!--Semantic HTML-->
<footer>
 <p>이것은 footer이다.</p>
</footer>

Element Placement

시맨틱 HTML은 개발자에게 자신의 이름에 따라 그 기능이나 위치를 정확하게 알려줄 수 있는 성분(elements)을 도입했다.

이러한 성분에는 <header>, <nav>, <main>, <footer>가 있다.

<header>는 페이지 <body>의 상단에 위치해서 내용를 설명한다. 로고, 탐색 링크 또는 검색 창을 포함할 수 있다.

<nav>는 페이지의 탐색 링크를 요약하여 가지고 있다. 종종 <header> 또는 <footer> 안에 배치된다.

<main>은 헤더/탐색 영역과 footer 영역 사이에 위치하며, 페이지의 주요 콘텐츠를 가지고 있다.

<footer>는 <body> 하단에 페이지의 footer 콘텐츠를 포함한다.

Embedding media

시맨틱 HTML에서는 <video>, <audio>, <embed>가 있다 .

<video>는 웹사이트에 비디오를 추가할 수 있게 해주고, <audio>는 웹사이트에 오디오를 구현할 수 있게 해준다.

<video>와 <audio>는 닫는 태그가 필요한 반면, <embed>는 자동으로 닫히는 태그이다.

이러한 성분들의 공통점은 모두 src 속성을 사용하여 콘텐츠 소스를 연결한다는 점이다.

<!--Video 태그-->
<video src="4kvideo.mp4">비디오를 지원하지 않습니다.</video>

<!--Audio 태그-->
<audio src="koreanhiphop.mp3"></audio>

<!--Embed 태그-->
<embed src="babyyoda.gif"/>

<figure> and <figcaption>

<figure> 성분은 이미지, 다이어그램, 코드 조각 같은 미디어를 나타낼 때 사용한다. <figcaption> 성분은 <figure> 성분이 나타내는 미디어를 설명하는 데 사용된다.

개발자는 일반적으로 <figure> 성분 내에 <figcaption>을 사용하여 미디어와 설명을 그룹화한다. 이렇게 하면 개발자가 미디어의 위치를 변경하더라도 설명도 그에 따라 자동으로 추가된다.

<figure>
 <img src="qwerty.jpg">
 <figcaption>이 이미지는 쿼티 키보드의 구성을 보여준다.</figcaption>
</figure>

<section> and <article>

<section>은 '챕터, 제목, 동일한 테마를 가진 문서의 다른 영역' 같은 문서의 성분을 정의한다.

<article>은 기사, 블로그, 댓글과 같이 그 자체로 의미가 있는 콘텐츠를 포함한다.

일반적으로 개발자는 <section>을 사용하여 웹페이지의 테마를 정의하고, <article>을 사용하여 해당 테마에 맞는 독립적인 콘텐츠를 작성한다. 그렇다고 해서 <article>을 <section>과 함께 사용해야 하는 건 아니다.

<section>
  <!-- 테마 정의 -->
  <h2>미국의 최고의 스포트 리그</h2>
  <!-- 테마에 관련된 독립적인 내용 작성-->
  <article>
    <p>최고의 스포츠 리그 중 하나는 nba이다.</p>
  </article>
</section>

<aside> Aside Element

<aside> 성분은 주요 콘텐츠를 이해하는 데 필요하지 않은 추가 정보를 표시하는 데 사용됩니다.

일반적으로 이러한 정보는 사이드바처럼 주요 콘텐츠를 가리지 않는 위치에 배치된다. 예를 들어 반려견 관리 방법을 설명하는 게시물 옆에 반려견 미용 제품 광고가 게재되는 경우를 들 수 있다.

<article>
<!-- 메인 내용-->
</article>
<aside>
<!-- 추가적인 정보 -->
</aside>

참고자료

https://www.codecademy.com/learn/learn-html/modules/learn-semantic-html/cheatsheet