HTML 의미 요소
의미적 요소 = 의미가 있는 요소.
시맨틱 요소는 무엇입니까?
의미론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명합니다.
의미 없는 요소 의 예 : <div>및 <span>- 내용에 대해 아무 것도 알려주지 않습니다.
의미 요소 의 예 : <form>, <table>및 <article>- 내용을 명확하게 정의합니다.
HTML의 시맨틱 요소
많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 <div id="nav"> <div class="header"> <div id="footer"> 와 같은 HTML 코드가 포함되어 있습니다.
HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 의미론적 요소가 있습니다.
- <기사>
- <옆으로>
- <내용>
- <그림 캡션>
- <그림>
- <바닥글>
- <헤더>
- <메인>
- <마크>
- <내비게이션>
- <섹션>
- <개요>
- <시간>
HTML <섹션> 요소
요소는 문서 의 <section>섹션을 정의합니다.
W3C의 HTML 문서에 따르면 "섹션은 일반적으로 제목이 있는 콘텐츠의 주제별 그룹입니다."
<section>요소를 사용할 수 있는 위치의 예 :
- 장
- 소개
- 뉴스 항목
- 연락처 정보
웹 페이지는 일반적으로 소개, 콘텐츠 및 연락처 정보를 위한 섹션으로 분할될 수 있습니다.
예시
문서의 두 섹션:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
HTML <article> 요소
요소 는 <article>독립적이고 독립적인 콘텐츠를 지정합니다.
기사는 그 자체로 의미가 있어야 하며 웹 사이트의 나머지 부분과 독립적으로 배포할 수 있어야 합니다.
<article>요소를 사용할 수 있는 위치의 예 :
- 포럼 게시물
- 블로그 게시물
- 사용자 의견
- 제품 카드
- 신문 기사들
예시
독립적이고 독립적인 콘텐츠가 포함된 세 개의 기사:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
실시예 2
CSS를 사용하여 <article> 요소 스타일 지정:
<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>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
<section>에 <article>을 중첩하거나 그 반대로?
요소 는 <article>
독립적이고 독립적인 콘텐츠를 지정합니다.
요소는 문서 의 <section>섹션을 정의합니다.
정의를 사용하여 해당 요소를 중첩하는 방법을 결정할 수 있습니까? 아니야 우리는 할 수 없어!
<section>따라서 요소가 포함된 <article>요소와 <article>요소 가 포함된 요소 가 있는 HTML 페이지를 찾을 수 <section>있습니다.
HTML <헤더> 요소
요소 는 <header>소개 콘텐츠 또는 탐색 링크 집합의 컨테이너를 나타냅니다.
요소 에는 <header>일반적으로 다음이 포함됩니다.
- 하나 이상의 제목 요소(<h1> - <h6>)
- 로고 또는 아이콘
- 저작권 정보
참고:<header> 하나의 HTML 문서에 여러 요소가 있을 수 있습니다. 그러나 , 또는 다른 요소 <header>내에 배치할 수 없습니다 .<footer><address><header>
예시
<article>의 헤더:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML <바닥글> 요소
<footer>요소는 문서 또는 섹션의 바닥글을 정의합니다 .
요소 에는 <footer>일반적으로 다음이 포함됩니다.
- 저작권 정보
- 저작권 정보
- 연락처 정보
- 사이트맵
- 맨 위로 링크로 돌아가기
- 관련된 문서
하나의 문서에 여러 <footer>요소가 있을 수 있습니다.
예시
문서의 바닥글 섹션:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
HTML <nav> 요소
요소 는 <nav>탐색 링크 세트를 정의합니다.
<nav>문서의 모든 링크가 요소 내부에 있어야 하는 것은 아닙니다 . <nav>요소는 탐색 링크의 주요 블록에만 사용됩니다 .
장애가 있는 사용자를 위한 화면 판독기와 같은 브라우저는 이 요소를 사용하여 이 콘텐츠의 초기 렌더링을 생략할지 여부를 결정할 수 있습니다.
예시
탐색 링크 세트:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <aside> 요소
요소는 ( <aside>사이드바와 같이) 배치된 콘텐츠 외에 일부 콘텐츠를 정의합니다.
콘텐츠 는 <aside>주변 콘텐츠와 간접적으로 관련되어야 합니다.
예시
배치된 콘텐츠 외에 일부 콘텐츠를 표시합니다.
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
실시예 2
CSS를 사용하여 <aside> 요소 스타일 지정:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
HTML <Figure> 및 <figcaption> 요소
태그 는 <figure>일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.
태그는 요소에 대한 <figcaption>캡션을 정의합니다 <figure>. 요소 는 <figcaption>요소의 첫 번째 또는 마지막 자식으로 배치할 수 있습니다 <figure>.
요소 는 <img>실제 이미지/그림을 정의합니다.
예시
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
왜 시맨틱 요소인가?
W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티 전반에서 데이터를 공유하고 재사용할 수 있습니다."
HTML의 시맨틱 요소
다음은 HTML의 의미론적 요소 목록입니다.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .