💡 시맨틱 마크업
시맨틱 마크업(Semantic Markup)이란
시맨틱(semantic)은 "의미론적인"이란 뜻을 가지고, 마크업(markup)은 HTML 태그로 문서를 작성하는 것을 말한다. 따라서 시맨틱 마크업은 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
작성 방법
각 태그를 용도에 맞게 사용하여 문서를 작성한다.
- 헤더/푸터에
<header>와<footer>태그 사용 - 메인 컨텐츠에
<main>과<section>사용 - 독립적인 컨텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul>,<li>사용 - 내비게이션에
<nav>사용
위와 같이 각 태그가 가지고 있는 의미에 맞게 사용하고, css 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
예전에는
<div>요소가 모두 묶어서 포함시킬 수 있어 header도<div>로 footer도<div>로 묶어 사용하였기 때문에 HTML에서 가장 많이 사용되었다. 그러다 전체 웹사이트를 구조적으로 분리해서 분리된 각각의 틀을 의미가 있는 요소들로 묶은 것이 시맨틱 요소들이다.
시맨틱 마크업을 쓰는 이유
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
- 웹 접근성 측면에서, 시각장애가 있는 사용자가 그 의미를 더 잘 파악할 수 있다.
- 단순히
<div>,<span>에 둘러싸인 요소들보다 코드의 가독성이 좋아 유지보수에 좋다.
시맨틱 마크업을 사용할 때 어려운 점
<strong>, <b>태그는 동일한 효과를 부여한다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold" 의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong> 의 경우는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다" 라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.
<article> 태그는 독립적이고 독립적인 콘텐츠를 지정할 때 쓰이는데, 그 자체로 의미가 있어야 하고 사이트의 나머지 부분과 독립적으로 배포도 가능해야 한다. <section>태그는 공통된 내용을 담고 있는 부분을 묶어준다. 그리고 <section> 안에 <article>을, 또 <article> 안에 <section>을 사용할 수도 있다. 어떤 상황에서 <section>과 <article>을 써야 하는 걸까?
시맨틱 마크업을 사용할 때 애매한 태그들
<strong>vs<b><section>vs<article>
-
<i>vs<em><i>태그는 시각적으로 글자가 기울어져 보이게 하는 효과를 줄 때 사용
<em>태그는 문서에서 기울임 효과를 이용하여 강조하고 싶을 때 사용 -
<button>vs<a><button>은 글쓰기, 로그인 등 특정한 액션을 위해서 사용
<a>는 다른 페이지로 이동하기 위해 링크를 걸 때 사용
참고 사이트
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/semantic.md
