HTML 시맨틱 태그,(Semantic Tag), 의미론적 태그
안녕하세요~ 설날인 오늘은 시맨틱 태그(Semantic Tag) 즉, 의미론적 태그에 대해 알아보겠습니다.
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90
[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런
도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/
www.inflearn.com
시맨틱 태그 - HTML5 버전부터 도입된 태그로, 이전 버전의 HTML에서는 <div> 태그와 같은 범용적인 태그를 이용하여 웹 페이지를 구조화했습니다. 시맨틱(semantic) 태그는 웹 사이트의 내용을 구조화하고, 웹 사이트가 어떻게 동작해야 하는지 브라우저에게 정보를 제공하는합니다. HTML5 에서는 몇가지 의미론적 태그가 추가되었는데, 몇 가지 예를 들어 살펴보겠습니다.
-------------------------------------------------------------------------------------------------------------------------------------
1. <header>: 웹페이지의 헤더를 나타내며, 로고나 네비게이션 링크 등을 포함할 수 있습니다.
2. <nav>: 네비게이션 링크를 담는데 사용됩니다.
3. <main>: 웹페이지의 주요 컨텐츠를 나타냅니다. 한 페이지에 하나의 <main> 태그만 있어야 합니다.
4. <article>: 독립적으로 구분되거나 재사용 가능한 영역을 나타냅니다. 예를 들어, 블로그 글이나 뉴스 스토리 등을 표현할 때 사용됩니다.
5. <section>: HTML 문서의 독립적인 구획을 나타내며, 보통 <h1>-<h6>로 제목을 포함합니다.
6. <aside>: 페이지의 주요 내용과는 별개의 콘텐츠를 나타냅니다. 예를 들어, 사이드바나 풀아웃 메뉴 등을 표현할 때 사용됩니다.
7. <footer>: 웹페이지의 푸터를 나타냅니다. 저작권 정보, 저자 정보 등을 포함할 수 있습니다.
--------------------------------------------------------------------------------------------------------------------------------------
그럼 시맨틱 태그(의미론적 태그)를 사용하는 이유와, 시맨틱 태그(의미론적 태그)를 사용하면 어떠한 이점이 있는지 살펴보겠습니다.
시맨틱 태그(의미론적 태그)를 사용하는 이유는 다양한 이유가 있습니다.
HTML에서 시맨틱 태그(의미론적 태그)를 사용하는 이유는 웹사이트의 구조를 명확하게 표현하고, 웹사이트의 접근성을 향상시키며, 검색 엔진 최적화를 도와주기 위해서 입니다.
1. 구조적 명확성: 시맨틱 태그(의미론적 태그)는 웹사이트의 구조를 명확하게 만들어줍니다. 각 섹션의 역할과 목적을 명시적으로 나타내줌으로써, 웹사이트의 구조를 이해하고, 유지보수하는 데 도움이 됩니다.
2. 접근성 향상: 시맨틱 태그(의미론적 태그)는 스크린 리더와 같은 보조 기술을 사용하는 사람들이 웹사이트를 이해하고 탐색하는 데 도움을 줍니다.
3. 최적화 개선: 검색 엔진은 웹페이지의 콘텐츠를 이해하고 적절하게 인덱싱하기 위해 시맨틱 태그(의미론적 태그)를 사용합니다. 이로 인해 웹페이지의 최적화가 향상되고, 검색 결과에서 더 높은 순위를 얻을 수 있습니다.
이러한 이유로, 웹 사이트의 구조를 향상시키고, 사용자 경험을 개선하며, 검색 엔진에서 더 효율적으로 검색될 수 있도록 하기 위해 시맨틱 태그를(의미론적 태그) 사용하는 것이 중요하다고 봅니다.
다음은 시맨틱 태그(의미론적 태그)를 사용하면 어떠한 이점이 있는지 알아보겠습니다.
-----------------------------------------------------------------------------------------------------------------------------
1. 가독성: 시맨틱 태그(의미론적 태그)는 코드의 가독성을 높여줍니다. 이들 태그는 그 자체로 해당 영역의 역할을 설명하기 때문에, 개발자가 HTML을 읽을 때 이해하기 쉽습니다.
2. 접근성: 스크린 리더와 같은 보조 기술은 시맨틱 태그(의미론적 태그)를 사용하여 웹사이트의 구조를 이해하고 사용자에게 콘텐츠를 전달합니다. 따라서 시맨틱 태그(의미론적 태그)는 웹사이트의 접근성을 향상시킵니다.
3. 검색 엔진 최적화(SEO): 검색 엔진도 시맨틱 태그(의미론적 태그)를 사용하여 웹페이지의 콘텐츠를 이해합니다. 이는 검색 결과 페이지에서 더 높은 순위를 얻는데 도움이 됩니다.
4. 스타일링과 레이아웃: 시맨틱 태그(의미론적 태그)를 사용하면 CSS 스타일링과 레이아웃을 더 효과적으로 관리할 수 있습니다. 특히, 대형 웹사이트나 복잡한 웹 애플리케이션에서 이점이 큽니다.
5. 향후 유지 보수: 시맨틱 태그(의미론적 태그)를 사용하면 웹사이트의 유지 보수가 더 쉬워집니다. 코드의 구조가 명확하기 때문에, 버그를 찾고 수정하는데 도움이 됩니다.
시맨틱 태그(의미론적 태그)를 활용한 소스코드 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html 실습</title>
<style></style>
</head>
<body>
<header>
<h1> 오늘의 커피 </h1>
</header>
<nav>
<ul>
<li><a href="">오늘의 인기 커피 메뉴 보기</a></li>
<li><a href="">이달의 인기 커피 메뉴 보기</a></li>
<li><a href="">모든 커피 메뉴 보기</a></li>
</ul>
</nav>
<article>
<p>
아이스 아메리카노</br>
아이스 카페라떼</br>
아이스 바닐라라떼</br>
아이스 초코라떼</br>
아이스 녹차라떼</br>
고구마 라떼</br>
블루 레몬 에이드</br>
레몬 에이드</br>
자몽 에이드 </br>
유자 에이드 </br>
청포도 에이드</br>
딸기 스무디</br>
딸기 바나나 스무디</br>
초코 바나나 스무디</br>
플레인요거트 스무디</br>
블루베리요거트 스무디</br>
히비스커스</br>
캐모마일</br>
녹차</br>
홍차</br>
</p>
</article>
<footer>
<div>🚩커피 메뉴</div>
</footer>
</body>
</html>
제목 부분 헤더(header) 부분을 <header> 라는 시맨틱 태그(의미론적 태그)를 사용하였고, 네비게이션 부분은 <nav> 태그를 사용, 본문 부분은 <article> 태그로, 하단 부분은 <footer> 태그로 사용하였습니다. 이렇게 시맨틱 태그(의미론적 태그)를 사용하면 브라우저랑 검색 엔진에서 전체적인 문서의 구조를 사용자가 의도한 대로 받아들일 수 있습니다.
감사합니다!!