[웹개발] html sementic tag(시맨틱 태그)

코딩할 때 시맨틱 태그들이 헷갈려서 정리해 봤다.

 

 

[ Sementic tag ]

HTML의 시맨틱 태그란 HTML 태그들 중에서 콘텐츠의 의미를 명확하게 표현하기 위해 사용하는 태그들이다.

HTML 문서의 구조를 정의하기 위해 사용되며, 그냥 단순하게 <div> 태그들을 이용했을 때보다 더 명확한 의미를 가진다.

 

1. <header>: 웹 페이지의 상단 부분
2. <nav>: 웹 페이지의 내비게이션 메뉴
3. <main>: 웹 페이지의 주요 콘텐츠
4. <article>: 웹 페이지에서 상호작용을 할 수 있는 콘텐츠의 조각
5. <section>: 웹 페이지의 콘텐츠를 구분할 수 있는 섹션
6. <aside>: 웹 페이지의 주요 콘텐츠와 관련이 적은 콘텐츠를
7. <footer>: 웹 페이지의 하단 부분 (주로 연락처 같은 정보들을 footer로 만든다)
8. <h1>~<h6>: 웹 페이지의 제목을 나타낼 수 있는 태그. <h1>은 제목의 중요도가 가장 높고, <h6>은 제목의 중요도가 가장 낮다
9. <p>: 웹 페이지의 문단을 나타낼 수 있는 태그
10. <ul>: 웹 페이지에서 목록을 표현할 수 있는 태그
11. <ol>: 웹 페이지에서 순서가 있는 목록을 표현할 수 있는 태그
12. <li>: <ul>과 <ol> 요소 안에서 각각의 목록 항목을 나타낼 수 있는 태그
13. <figure>: 웹 페이지에서 일련의 콘텐츠를 그룹화할 수 있는 태그
14. <figcaption>: <figure> 요소 안에서 일련의 콘텐츠의 제목을 나타낼 수 있는 태그
15. <form>: 웹 페이지에서 사용자가 정보를 입력하고 전송할 수 있는 양식을 정의할 수 있는 태그 (로그인, 회원가입)

시맨틱 태그들은 웹 페이지의 콘텐츠를 구조화하고, 콘텐츠의 의미를 정확하게 표현할 수 있어, 웹 접근성을 개선하는데 도움을 준다.

기타 시맨틱 태그들에는 <address>(주소 정보), <cite>(인용), <dfn>(정의), <time>(시간 정보) 등이 있지만 잘 본 적은 없는듯하다.

 

<시맨틱 태그의 장점>

1. 코드의 가독성을 높이고 유지보수에도 도움을 준다

- 시맨틱 태그들은 웹 페이지의 콘텐츠를 정확하게 표현할 수 있는 기능을 가지고 있기 때문에 가독성을 높이고 유지보수에도 도움을 준다.

 

2. 스크린 리더기에서 웹 페이지를 읽을 때의 가독성도 향상한다.

 스크린 리더기는 시각 장애인들을 위해 웹 페이지의 콘텐츠를 읽어주는 소프트웨어로, 웹 페이지의 콘텐츠를 읽기 전에 웹 페이지의 구조를 이해할 수 있도록 코드의 구조를 기반으로 읽기 시작한다. 그래서 웹 페이지의 콘텐츠를 정확하게 구조화하고, 콘텐츠의 의미를 정확하게 표현할 수 있는 시맨틱 태그들을 사용할 경우, 스크린 리더기가 웹 페이지의 콘텐츠를 정확하게 읽어줄 수 있다.

 

3. 검색 엔진 최적화(SEO)를 향상

시맨틱 태그는 검색 엔진이 웹 페이지의 내용에 대해 더 쉽게 접근하도록 도와준다. 

시맨틱 태그를 사용하면 검색 엔진에서 웹 페이지의 내용을 더욱 정확하게 분석할 수 있다. 이로 인해 검색 결과에서 상위에 노출될 확률이 높아지므로 검색 엔진 최적화에 유리하다.

단, 시맨틱 태그들은 콘텐츠의 의미를 정확하게 표현하기 위한 자원이기 때문에, 적절한 시맨틱 태그를 선택하여 사용해야 한다.

예를 들어, 제목을 위해 <h1> 태그를 사용하고, 문단을 위해 <p> 태그를 사용하는 것이 적절하다.

 

코드 유지보수와 검색 엔진 최적화에 도움을 준다고는 알고 있었지만, 스크린 리더기에 대해서는 크게 생각해 본 적이 없었다. 코드를 좀 더 의미 있게 작성하는 노력이 어떤 사람들에게는 큰 도움이 된다는 의미가 되니까 좀 더 생각하면서 코드를 짜는 습관을 가져야겠다.