[2주차] 위클리 페이퍼 - 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

이번 주는 HTML의 시맨틱 태그에 대해 조사하는 과제가 주어졌다. 이에 따라, 시맨틱 태그의 정의와 종류, 장단점, HTML 버전에 따른 변화 등을 조사하였다.

시맨틱 태그란?

시맨틱 태그는 HTML 태그의 일종으로, 브라우저, 개발자, 검색 봇, 사용자 및 보조기기 등에게 페이지의 의미론적 구조를 명확히 전달하는 태그이다. 예를 들어, <div> 대신에 <section>을 사용하여, 가독성을 높일 수 있다.

시맨틱 태그의 종류

시맨틱 태그는 각 파트별로 다른 태그를 사용한다. 이는 <div>로 본문을 나눠놓는 것과는 대조 된다고 볼수 있다. 아래 사진에서 위치에 따른 시맨틱 태그의 사용 예제를 보이고 있다.

페이지의 위치 별 시맨틱 태그의 사용예

시맨틱 태그는 각 태그마다 의미를 가지므로, 다양한 종류의 태그가 존재한다. 아래는 대표적인 시맨틱 태그를 표로써 정리하였다:

태그	설명
<article>	페이지 내에서 독립적인 내용을 삽입
<aside>	페이지 내의 주 콘텐츠와 간접적으로 관련된 보조 콘텐츠(광고, 참고 링크, 사이드바 등)를 배치
<details>	페이지 내에서 토글 기능을 설정
<figcaption>	<figure> 태그에서 설명을 설정
<figure>	페이지 내에서 그림 등을 표시
<footer>	페이지 내의 하단 부분(footer)을 설정
<header>	페이지 내의 상단 부분(header)을 설정
<main>	페이지 내의 메인 페이지를 설정
<mark>	마킹되거나 하이라이트된 문자열 설정
<nav>	네비게이션 링크를 설정
<section>	섹션을 설정
<summary>	<details> 태그에서 헤더 기능을 설정
<time>	날짜와 시간을 설정

시맨틱 태그를 사용하면 좋은 점

첫번째, "접근성의 증가"를 들 수 있다. 장애가 있는 사람은 웹페이지를 볼 때, 스크린 리더 등의 보조 도구가 필요하다. 시맨틱 태그는 보조 도구가 웹 페이지를 이해하는데 도움을 줘, 웹 페이지에 대한 접근성을 높여준다고 할 수 있다.

두번째, "검색봇 탐색 시간 감소"를 들 수 있다. 시맨틱 태그는 검색 엔진 등이 페이지를 이해하기 쉽게 만들어, 더 빠르게 페이지를 스캔 할 수 있다.

세번째, "유지 보수 시간의 감소"를 들 수 있다. 시맨틱 태그는 어느 태그에 무슨 내용이 있는지를 직관적으로 알 수 있으므로, 코드의 업데이트 혹은 디버깅을 비교적 간단하게 할 수 있다는 장점이 있다.

네번째, "사용자 경험의 향상"을 들 수 있다. 사용자는 시맨틱 태그를 이용해, 페이지의 구성 요소와 구조를 보다 더 쉽게 이해할 수 있는 장점을 가지고 있다.

다섯번째, "페이지 로딩 시간의 감소"를 들 수 있다. 시맨틱 태그의 사용은 개발에서의 불필요한 중첩을 줄이고, 코드 구조를 단순화하는데 도움을 준다. 이는 결과적으로 렌더링 속도의 증가 및 최적화의 가능성을 높인다고 할 수 있다. 이러한 구조는 사용자 경험을 증가 시킬 뿐 아니라, 검색 엔진에서의 높은 점수를 가져와 방문객을 증가시키는 효과를 보일 수 있다.

시맨틱 태그를 사용하면 안 좋은 점

장점과는 달리, 단점이 존재한다. 만약 레거시 코드에 시맨틱 태그를 적용할 경우, 많은 리팩토링 비용이 발생할 수 있다. 따라서, 이 태그는 처음 개발할 때 적용하는 것이, 개발 비용의 상승을 막는다고 볼 수 있다.

HTML4와 비교한, HTML5의 시맨틱 태그

HTML4의 태그는 시각적 강조를 가진 태그(<b> <i> 등)가 있다면, HTML5에선 의미론적 강조를 가진 태그(<strong> <em> 등)를 추가했다는 차이점이 있다. 예를 들어 <div>를 대신하여, <header> 혹은 <article>과 같은 태그를 사용할 수 있게 된점이 큰 차이점이라 볼 수 있다.

 

출처

• https://www.w3schools.com/html/html5_semantic_elements.asp
• https://www.codeit.kr/topics/fs-paper1/lessons/8626?topicVersion=1&lessonVersion=1
• https://b-benjithomas.medium.com/semantic-html-and-its-advantages-and-disadvantages-44ccd483bc1a
• https://www.animaapp.com/blog/code/what-is-semantic-html-key-differences-from-html-and-why-its-important-for-frontend-developers/
• https://stackoverflow.com/questions/134727/whats-the-key-difference-between-html-4-and-html-5
• https://www.linkedin.com/advice/3/how-can-semantic-html-influence-performance-your-qb21e