HTML 시멘틱 요소(Semantic elements)

시멘티 요소란 무엇인가?

시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다.

비의미 요소의 예: <div> 및 <span> - 내용에 대해 아무 것도 말하지 않습니다.

의미론적 요소의 예: <form>, <table>, <article> - 그 내용을 명확하게 정의한다.

HTML에서 시멘틱 요소

많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 <div id="nav"> <div class="div"> <div id="div">와 같은 HTML 코드가 포함되어 있다.
HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 의미 요소가 있다:

태그	설명
<article>	독립적이고 독립적인 콘텐츠 정의
<aside>	페이지 내용 이외의 내용을 정의
<details>	사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의
<figcaption>	<그림> 요소에 대한 캡션을 정의
<figure>	그림, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 콘텐츠를 지정
<footer>	문서 또는 섹션의 바닥글을 정의
<header>	문서 또는 섹션의 머리글을 지정
<main>	문서의 기본 내용을 지정
<mark>	표시/강조된 텍스트를 정의
<nav>	탐색 링크를 정의
<section>	문서에서 섹션을 정의
<summary>	<details> 요소에 대해 보이는 제목을 정의
<time>	날짜/시간을 정의

HTML <section> 요소

<섹션> 요소는 문서의 섹션을 정의한다.
W3C의 HTML 문서에 따르면, "section 은 일반적으로 제목이 있는 내용의 테마 그룹이다."

<section> 요소를 사용할 수 있는 예:

장
소개
뉴스 항목
연락처 정보

웹 페이지는 일반적으로 소개, 내용 및 연락처 정보를 위한 섹션으로 분할될 수 있다.

HTML문서 내에 두개의 section이 존재하는 예제이다.

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WWF</h1>
  <p>세계자연보호기금(WWF)은 환경의 보존, 연구, 복원에 관한 문제들을 연구하는 국제기구로, 이전에는 세계야생생물기금이라고 불렸습니다. WWF는 1961년에 설립되었습니다.</p>
</section>

<section>
  <h1>WWF의 판다 상징</h1>
  <p>판다는 WWF의 상징이 되었습니다. WWF의 잘 알려진 팬더 로고는 WWF가 설립된 같은 해에 베이징 동물원에서 런던 동물원으로 옮겨진 치치라는 이름의 팬더에서 유래되었습니다.</p>
</section>

</body>
</html>

HTML <article> 요소

<article> 요소는 독립적이고 자체적인 콘텐츠를 지정한다.
기사는 자체적으로 의미가 있어야 하며, 나머지 웹 사이트와 독립적으로 배포할 수 있어야 한다.

<article> 요소를 사용할 수 있는 예:

포럼 게시물
블로그 게시물
사용자 의견
제품 카드
신문기사

아래 HTML문서는 독립적이고 독립적인 내용의 3가지 기사의 예제이다.

<!DOCTYPE html>
<html>
<body>

<h1>article 요소</h1>

<article>
  <h2>구글 크롬</h2>
  <p>구글 크롬은 2008년에 출시된 구글이 개발한 웹 브라우저입니다. 크롬은 오늘날 세계에서 가장 인기 있는 웹 브라우저입니다!</p>
</article>

<article>
  <h2>모질라 파이어폭스</h2>
  <p>Mozilla Firefox는 Mozilla에서 개발한 오픈 소스 웹 브라우저입니다. 파이어폭스는 2018년 1월 이후 두 번째로 인기 있는 웹 브라우저입니다.</p>
</article>

<article>
  <h2>마이크로소프트 엣지</h2>
  <p>Microsoft Edge는 2015년에 출시된 Microsoft에서 개발한 웹 브라우저입니다. Microsoft Edge는 Internet Explorer를 대체했습니다.</p>
</article>

</body>
</html>

CSS에 style을 적용한 article 요소 예제이다.

<!DOCTYPE html>
<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>인기있는 브라우저</h1>
  <article class="browser">
    <h2>구글 크롬</h2>
    <p>구글 크롬은 2008년에 출시된 구글이 개발한 웹 브라우저입니다. 크롬은 오늘날 세계에서 가장 인기 있는 웹 브라우저입니다!</p>
  </article>
  <article class="browser">
    <h2>모질라 파이어폭스</h2>
    <p>Mozilla Firefox는 Mozilla에서 개발한 오픈 소스 웹 브라우저입니다. 파이어폭스는 2018년 1월 이후 두 번째로 인기 있는 웹 브라우저입니다.</p>
  </article>
  <article class="browser">
    <h2>마이크로소프트 엣지</h2>
    <p>Microsoft Edge는 2015년에 출시된 Microsoft에서 개발한 웹 브라우저입니다. Microsoft Edge는 Internet Explorer를 대체했습니다.</p>
  </article>
</article>

</body>
</html>

<section> 요소 내 <article> 중첩 혹은 그 반대

<article> 요소는 독립적이고 자체적인 콘텐츠를 지정한다.
<section> 요소는 문서의 섹션을 정의한다.
정의를 사용하여 요소를 내포하는 방법을 결정할 수 있을까? 안 돼요!

따라서 <article> 요소가 포함된 <section> 요소와 <section> 요소가 포함된 <article> 요소가 포함된 HTML 페이지를 찾을 수 있다.

HTML <header> 요소

<header> 요소는 소개 콘텐츠 또는 탐색 링크 집합을 위한 컨테이너를 나타낸다.
일반적으로 <헤더> 요소에는 다음이 포함된다:

하나 이상의 제목 요소(<h1> - <h6>)
로고 또는 아이콘
저작자 정보

참고: 하나의 HTML 문서에 여러 개의 <헤더> 요소를 포함할 수 있다.

그러나 <header>는 <footer>, <address> 또는 다른 <header> 요소 내에 배치할 수 없다.

<!DOCTYPE html>
<html>
<body>

<article>
  <header>
    <h1>WWF에서는 무엇을 할까요?</h1>
    <p>WWF의 임무:</p>
  </header>
  <p>세계야생생물기금의 임무는 지구의 자연 환경의 악화를 막고, 인간이 자연과 조화를 이루며 사는 미래를 만드는 것입니다.</p>
</article>

</body>
</html>

HTML <footer> 요소

<footer> 요소는 문서 또는 섹션의 바닥글을 정의한다.
일반적으로 <footer> 요소에는 다음이 포함된다:

저작자 정보
저작권 정보
연락처 정보
사이트 맵
상위 링크로 돌아가기
관련 서류

하나의 문서에 여러 개의 <footer> 요소를 포함할 수 있다.

<!DOCTYPE html>
<html>
<body>

<footer>
<p>저자 : 홍길동</p>
<p><a href="mailto:hong@flygildong.com">hong@flygildong.com</a></p>
</footer>

</body>
</html>

HTML <nav> 요소

<nav> 요소는 탐색 링크 세트를 정의한다.
문서의 모든 링크가 <nav> 요소 안에 있는 것은 아니다.

<nav> 요소는 탐색 링크의 주요 블록에만 사용된다.

비활성화된 사용자의 화면 판독기와 같은 브라우저는 이 요소를 사용하여 내용의 초기 렌더링을 생략할지 여부를 결정할 수 있다.

<!DOCTYPE html>
<html>
<body>

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

</body>
</html>

HTML <aside> 요소

<aside> 요소는 사이드바와 같이 배치된 콘텐츠 외에 일부 콘텐츠를 정의한다.
<aside> 내용은 주변 내용과 간접적으로 관련되어야 한다.

<!DOCTYPE html>
<html>
<body>

<p>우리 가족과 나는 이번 여름에 Epcot 센터를 방문했습니다. 날씨도 좋았고, 엡콧은 정말 멋졌습니다! 저는 가족들과 함께 즐거운 여름을 보냈습니다!</p>

<aside>
<h4>Epcot 센터</h4>
<p>엡콧은 흥미로운 볼거리, 국제 전시관, 수상 경력이 있는 불꽃놀이, 계절별 특별 행사를 특징으로 하는 월트 디즈니 월드 리조트의 테마 파크입니다.</p>
</aside>

</body>
</html>

HTML <figure>와 <figcaption> 요소

<figure> 태그는 그림, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 콘텐츠를 지정한다.

<figcaption> 태그는 <figure> 요소에 대한 캡션을 정의합니다. <figcaption> 요소는 <figure> 요소의 첫 번째 또는 마지막 자식으로 배치할 수 있다.

<img> 요소는 실제 이미지/그림을 정의한다.

<!DOCTYPE html>
<html>
<body>

<h2>방문 장소</h2>

<p>풀리아의 가장 유명한 관광지는 유네스코 세계문화유산으로 지정된 알베로벨로 주변 지역에서 발견된 독특한 원뿔 모양의 집들입니다.</p>

<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>그림.1 - 트룰리, 푸그리아, 이탈리아.</figcaption>
</figure>

</body>
</html>

왜 시멘틱 요소인가?

W3C에 따르면: "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다."

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > HTML 기본문법' 카테고리의 다른 글

HTML 엔티티(HTML Entities) (0)	2023.05.30
HTML 스타일 안내 (0)	2023.05.29
HTML 컴퓨터 코드 요소 (0)	2023.05.27
HTML 반응형 웹 디자인 (0)	2023.05.26
HTML 레이아웃 코딩 예제 (0)	2023.05.25

enjoyCoding

HTML 시멘틱 요소(Semantic elements)

시멘티 요소란 무엇인가?

HTML에서 시멘틱 요소

HTML <section> 요소

HTML <article> 요소

<section> 요소 내 <article> 중첩 혹은 그 반대

HTML <header> 요소

HTML <footer> 요소

HTML <nav> 요소

HTML <aside> 요소

HTML <figure>와 <figcaption> 요소

왜 시멘틱 요소인가?

'HTML > HTML 기본문법' 카테고리의 다른 글

댓글

티스토리툴바

HTML 시멘틱 요소(Semantic elements)

시멘티 요소란 무엇인가?

HTML에서 시멘틱 요소

HTML <section> 요소

HTML <article> 요소

<section> 요소 내 <article> 중첩 혹은 그 반대

HTML <header> 요소

HTML <footer> 요소

HTML <nav> 요소

HTML <aside> 요소

HTML <figure>와 <figcaption> 요소

왜 시멘틱 요소인가?

'HTML > HTML 기본문법' 카테고리의 다른 글

관련글

댓글

티스토리툴바