HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로의 변환기 키보드 단축키

HTML 의미 요소


의미적 요소 = 의미가 있는 요소.


시맨틱 요소는 무엇입니까?

의미론적 요소는 브라우저와 개발자 모두에게 의미를 명확하게 설명합니다.

의미 없는 요소 의 예 : <div><span>- 내용에 대해 아무 것도 알려주지 않습니다.

의미 요소 의 예 : <form>, <table><article>- 내용을 명확하게 정의합니다.


HTML의 시맨틱 요소

많은 웹 사이트에는 탐색, 머리글 및 바닥글을 나타내는 <div id="nav"> <div class="header"> <div id="footer"> 와 같은 HTML 코드가 포함되어 있습니다.

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 태그 참조 를 방문하십시오 .