HTML5

[ html5 ] 시맨틱 태그

변쌤(이젠강남) 2023. 8. 21. 06:09
반응형

# 시맨틱 태그

 

시맨틱 태그 종류

 

태그 설명
<header> 웹페이지의 머리글 , 로고, 메뉴, 검색 , 유틸 ,  전체메뉴등
<main> 메인 콘텐츠를 나타내는데 사용, 문서에 반드시 한번만 사용
<section> 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소 ( 주제별 ) , 다음 연예, 스포츠등
<article> 독립적이인 컨텐츠
<aside> 좌우측의 사이드 영역 , 보조 컨텐츠
<footer> 사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분
<nav> 웹 페이지 메뉴를 만들 때 사용 ( 주요메뉴 )

 

 

<header> 

  • 문서나 섹션의 머리말을 정의합니다.
  • 예: 페이지의 제목, 로고, 내비게이션 메뉴 등이 포함됩니다.

 

 

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

 

 

<nav > 

  • 내비게이션 링크를 정의합니다.
  • 예: 주요 내비게이션 메뉴
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

 

 


<footer> 

  • 문서나 섹션의 바닥글을 정의합니다.
  • 예: 저작권 정보, 연락처 정보, 저자 정보 등

  - 저작권 정보
  - 연락처
  - 패밀리사이트
  - 페이지 맨 위로 되돌아갈 수 있는 Top 버튼
  - 정책 등

 

<footer>
  <p>&copy; 2024 My Website</p>
  <p>Contact us at <a href="mailto:info@mywebsite.com">info@mywebsite.com</a></p>
</footer>


​​<main> 

해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의할 때 사용 
콘텐츠는 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성

문서의 주요 콘텐츠를 정의합니다. 주요 콘텐츠 영역을 식별하는 데 사용됩니다.

 

<main>
  <h2>Main Content Title</h2>
  <p>This is the main content of the page...</p>
</main>

 


​<section> 

 HTML 문서에 포함된 독립적인 섹션(section)을 정의할 때 주제가 동일한 것
- 주제별로 콘텐츠를 묶을 때
- 제목 요소(h1~h6)를 자식 요소로 포함

 

문서의 독립적인 섹션을 정의합니다.

예: 주제별로 나뉘는 콘텐츠 영역

 

<section>
  <h2>About Us</h2>
  <p>We are a company dedicated to...</p>
</section>

 


<article> 

해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용

독립적으로 구분될 수 있는 콘텐츠를 정의합니다.

예: 블로그 글, 뉴스 기사, 사용자 리뷰 등 

<article>
  <h2>Blog Post Title</h2>
  <p>This is a blog post about...</p>
</article>

 

 

<aside>

문서의 주요 내용과 관련된 보조 콘텐츠를 정의합니다.

예: 사이드바, 광고, 관련 링크 등

 

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#article1">Article 1</a></li>
    <li><a href="#article2">Article 2</a></li>
  </ul>
</aside>

 

 

 

<figure>

독립적인 콘텐츠, 보통 이미지와 그 설명을 정의합니다.

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>An explanation of the image.</figcaption>
</figure>

 

 

<figcaption>

<figure> 요소 내의 콘텐츠에 대한 캡션을 정의합니다.

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>This is an image caption.</figcaption>
</figure>

 

<time>

날짜나 시간을 나타냅니다.

<p>Published on <time datetime="2024-06-07">June 7, 2024</time></p>

 

<address> 

사이트 제작자 정보, 연락처 정보

 

 

 

 

시맨틱 태그의 장점

  1. 가독성 향상:
    • 개발자가 HTML 구조를 더 쉽게 이해할 수 있습니다.
    • 유지보수와 협업이 용이해집니다.
  2. SEO 개선:
    • 검색 엔진이 콘텐츠의 구조와 의미를 더 잘 이해하여 검색 순위를 개선할 수 있습니다.
  3. 접근성 향상:
    • 스크린 리더와 같은 보조 기술이 콘텐츠를 더 잘 해석할 수 있습니다.
  4. 미래 호환성:
    • 시맨틱 태그는 최신 표준을 따르므로, 웹 표준이 변화하더라도 더 오랜 기간 동안 호환성을 유지할 수 있습니다.

 

 

 

 

 

 

반응형

'HTML5' 카테고리의 다른 글

[ HTML5 ] table , form 요소  (9) 2024.02.28
[ html5 ] # 카카오 , 트위터, 메타, 파비콘  (0) 2023.09.06
[ html5 ] 이미지, 링크 , 엔티티 코드, 동영상  (0) 2023.08.17
[ html5 ] html작성법, 제목,문단,목록, 유효성검사  (0) 2023.08.17
[코딩에디터] 비주얼스튜디오 코드(Visual Studio Code) 설치 , 확장 플러그인(Extension) 설치 방법  (0) 2023.06.01

'HTML5'의 다른글

  • 현재글[ html5 ] 시맨틱 태그

관련글

티스토리툴바