HTML) 시멘틱 태그란?
안녕하세요. 오늘은 웹페이지 구조를 설계하는 시멘틱 태그에 대해 알아보도록 하겠습니다.
시멘틱 태그는 HTML 요소의 의미를 명확하게 정의하여 검색 엔진 및 웹 브라우저에게 문서의 구조를 이해하는 데 도움을 줍니다.
시멘틱 태그를 사용하면 코드가 읽기 쉽고 유지 관리하기 쉽고 접근성이 향상되며 SEO(검색 엔진 최적화)에 유리해집니다.
시멘틱태그의 정의와 종류에 대해 설명하도록 할게요!
시멘틱 웹이란?
- 시멘틱 웹은 웹 콘텐츠에 의미를 부여하여 컴퓨터가 이를 이해하고 처리할 수 있도록 하는 개념입니다.
- 현재의 웹은 주로 사람이 이해하고 사용하기 위해 디자인되어 있지만, 컴퓨터가 웹상의 정보를 이해하고 활용하기는 어려운 경우가 많습니다.
이를 해결하기 위해 시멘틱 웹은 웹 콘텐츠에 의미론적인 태그를 부여하여 정보를 더 잘 이해할 수 있도록 합니다.
- 시멘틱 웹은 다음과 같은 방법을 통해 이루어집니다:
시멘틱 마크업: HTML 요소에 의미론적인 태그를 사용하여 문서의 구조와 의미를 명확하게 표현합니다.
예를 들어, <header>, <nav>, <article>, <footer> 등의 시멘틱 태그를 사용하여 문서의 머리말, 내비게이션, 본문, 꼬리말 등을 구분합니다.링크드 데이터: 웹 상에 있는 정보를 의미론적으로 연결하여 컴퓨터가 이를 이해하고 활용할 수 있도록 합니다. RDF(Resource Description Framework)와 같은 기술을 사용하여 데이터 간의 관계를 정의하고 표현합니다.
- 시멘틱 웹은 검색 엔진 최적화(SEO), 데이터 통합, 자동화된 정보 추출 등 다양한 분야에서 활용됩니다. 데이터를 의미론적으로 표현하고 연결함으로써 웹은 보다 유용하고 지능적인 리소스로 발전할 수 있습니다.
시멘틱 태그란?
시멘틱 태그는 HTML5에서 도입된 태그로, 해당 태그의 이름만으로도 콘텐츠의 의미나 구조를 명확하게 전달할 수 있는 태그를 말합니다. 시멘틱 태그를 사용하면 웹 페이지의 의미를 더 명확하게 설명할 수 있으며, 검색 엔진이나 스크린 리더와 같은 기술이 콘텐츠를 더 잘 이해하고 해석할 수 있게 됩니다.
시멘틱 태그 종류
- <header>: 문서나 섹션의 머리말을 나타냅니다.
- <nav>: 내비게이션 링크를 포함하는 부분을 나타냅니다.
- <main>: 문서의 주요 콘텐츠를 포함하는 부분을 나타냅니다.
- <article>: 독립적으로 구분되거나 재사용 가능한 콘텐츠를 나타냅니다.
- <section>: 문서의 구획이나 테마를 나타냅니다.
- <aside>: 본문 내용과 직접적인 연관성이 적은 부가 정보를 나타냅니다.
- <footer>: 문서나 섹션의 꼬리말을 나타냅니다.
시멘틱 태그 사용 예시
1. <header>
- 문서나 섹션의 머리말을 나타냅니다.
- 주로 로고, 제목, 내비게이션 등을 포함합니다.
2. <nav>
- 내비게이션 링크를 포함하는 부분을 나타냅니다.
- 주로 사이트의 메뉴나 다른 페이지로 이동할 수 있는 링크를 포함합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Tags Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
3. <main>
- 문서의 주요 콘텐츠를 포함하는 부분을 나타냅니다.
- 한 페이지에는 하나의 <main> 요소만 있어야 합니다.
4. <section>
문서의 구획이나 테마를 나타냅니다. 주로 관련된 콘텐츠를 묶어서 표현합니다. 한 페이지에 여러 개의 <section> 요소가 포함될 수 있습니다.
1
2
3
4
5
<main>
<section>
<h2>About Us</h2>
<p>Welcome to our website! We are dedicated to providing high-quality services to our customers.</p>
</section>
5. <article>
- 독립적으로 구분되거나 재사용 가능한 콘텐츠를 나타냅니다.
- 블로그 글, 뉴스 기사, 포럼 게시물 등과 같이 독립적인 내용을 포함합니다.
1 2 3 4 5
<article> <h2>Latest News</h2> <p>Check out our latest blog posts and stay updated with the latest news in our industry.</p> </article> </main>
6. <aside>
- 본문 내용과 직접적인 연관성이 적은 부가 정보를 나타냅니다.
- 주로 사이드바, 광고, 사이트의 부가 정보 등을 포함합니다.
1 2 3 4
<aside> <h2>Advertisement</h2> <p>Get exclusive discounts when you sign up for our newsletter!</p> </aside>
7. <footer>
문서나 섹션의 꼬리말을 나타냅니다.
주로 저작권 정보, 연락처, 사이트 링크 등을 포함합니다.
1
2
3
4
5
<footer>
<p>copy; 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
이렇게 작성된 코드는 의미론적으로 풍부하고 이해하기 쉬우며 검색 엔진이나 스크린 리더 등이 콘텐츠를 더 잘 이해할 수 있도록 도와줍니다.