이번 글에서는 Semantic HTML의 필요성에 대해서 알아보도록 하자.
Semantic HTML이란?
우선 Semantic이란 '의미론적'이라는 뜻이다.
즉 Semantic HTML이란 의미있는 HTML이란 뜻으로, 웹 문서의 구조와 의미를 명확하게 표현하기 위한 HTML 코딩 방식이다.
Semantic HTML은 HTML요소를 사용하여 웹 페이지의 내용을 논리적으로 그룹화하고, 각 요소에 의미를 부여하여 검색 엔진 및 웹 브라우저가 웹 페이지를 이해하고 해석하는 데 도움을 준다.
Semantic HTML의 주요 특징
- 의미 있는 태그 사용 : Semantic HTML은 의미있는 HTML태그를 사용하여 웹 페이지의 구조를 정의한다.
예를들어,<header>,<nav>,<main>,<article>,<section>,<footer>등의 태그를 사용하여 웹 페이지의 각 부분을 나타낸다. - 시맨틱 요소 사용 : 몇몇 시맨틱 요소는 웹 페이지의 특정 부분에 대한 의미를 부여한다.
<header>: 웹 페이지나 섹션의 머리말을 나타낸다.<nav>: 내비게이션 메뉴를 나타낸다.<main>: 웹 페이지의 주요 내용을 포함한다.<article>: 독립적으로 구성되거나 재사용 가능한 콘텐츠를 나타낸다.<section>: 문서의 섹션을 정의한다.<footer>: 웹 페이지나 섹션의 바닥글을 나타낸다.
- 시맨틱 마크업의 장점
- 웹 접근성 향상 : Semantic HTML은 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 웹 피이지를 더 잘 전달할 수 있도록 도와준다.
- SEO(검색 엔진 최적화) 향상 : 검색 엔진은 Semantic HTML을 사용하여 웹 페이지의 내용을 더 잘 이해하고 랭킹을 매길 수 있다.
- 코드 가독성 향상 : Semantic HTML을 사용하면 웹 개발자와 다른 개발자가 웹 페이지의 구조와 의미를 더 쉽게 이해할 수 있다.
Semantic HTML을 사용한 간단한 웹 페이지 구조 예시
<!DOCTYPE html>
<html>
<head>
<title>시맨틱 HTML 예제</title>
</head>
<body>
<header>
<h1>웹 페이지 제목</h1>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>섹션 1</h2>
<p>섹션 1의 내용...</p>
</section>
<section>
<h2>섹션 2</h2>
<p>섹션 2의 내용...</p>
</section>
</main>
<footer>
<p>© 2023 웹 페이지 제작사</p>
</footer>
</body>
</html>이와 같이 Semantic HTML을 사용하면 웹 페이지의 구조와 의미가 명확하게 표현되며, 이로 인해 웹 접근성과 SEO가 향상되고 코드의 가독성도 향상된다.
Semantic HTML이 필요한 이유
위에서 살펴본 특징과 함께 필요한 이유에 대해서 한번 더 짚어보도록 하자.
- 웹 페이지의 구조와 의미를 명확하게 표현 : Semantic HTML을 사용하면 웹 페이지의 각 요소와 부분을 논리적으로 그룹화하고, 각 요소에 의미를 부여할 수 있다. 이로써 웹페이지의 구조와 내용이 명확하게 표현되어 개발자와 사용자 모두가 이해하기 쉬워진다.
- SEO 향상 : 검색엔진은 Semantic HTML을 사용하여 웹 페이지의 내용을 더 잘 이해하고 인덱싱한다. Semantic HTML을 사용하면 검색엔진이 웹 페이지를 쉽게 해석하고 랭킹을 매길 수 있으므로 웹 페이지의 검색 결과 순위가 향상될 수 있다.
- 웹 접근성 향상 : Semantic HTML을 사용하면 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 웹 페이지를 더 잘 전달할 수 있다. 시맨틱 요소는 웹 페이지의 구조를 설명하고 사용자가 콘텐츠를 이해하기 쉽게 돕는다.
- 코드 가독성 향상 : Semantic HTML을 사용하면 HTML 코드의 가독성이 향상된다. 코드를 읽거나 유지 보수할때 각 요소의 역할과 의미가 명확하기 때문에 개발자들 사이의 협업이나 새로운 개발자가 코드를 이해하는데 도움이 된다.
Semantic HTML은 웹 개발에서 좋은 실천 방법 중 하나이며, 웹 페이지의 품질과 사용자 경험을 향상시키는데 기여한다.
따라서 웹 개발자는 Semantic HTML을 적극 활용하여 웹 페이지를 구축하는것이 좋다.
'개발공부 > 기술면접준비' 카테고리의 다른 글
| [React] useRef가 필요한 상황과 예시 (0) | 2023.09.21 |
|---|---|
| [Redux] Redux의 주요 개념들과 연결 관계에 대해서 (0) | 2023.09.21 |
| [알고리즘] 재귀를 활용하기 좋은 상황은 언제인지에 대하여 (0) | 2023.09.20 |
| [네트워크] IP 프로토콜의 한계에 대해서 (1) | 2023.09.20 |
| 상태관리 라이브러리와 필요성에 대해서 (0) | 2023.09.19 |