🌈 학습을 위해
Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다.
Summary
| 설명 | |
|---|---|
| 카테고리 | 시멘틱 마크업 |
| 장점 | SEO 유리, 웹 접근성 향상, 코드 가독성 향상 |
| 종류 | -<article>: 독립적으로 배포하거나 재사용할 수 있는 요소 ex. 게시물, 기사, 제품 카드, 사용자가 제출한 댓글, 인터렉티브 위젯- <aside>: 주요 콘텐츠와 간접적 관련된 콘텐츠 ex. 사이드바, 콜아웃 상자- <details>: 위젯이 '열기' 상태로 전환된 경우에만 표시되는 요소. <summary>의 부모 요소로 쓰임.- <figcaption>: 부모인 <figure>의 내용을 설명하는 캡션- <figure>: 문서와 관련있는 이미지, 일러스트레이션, 다이어그램, 코드 조각 등. <figcaption>을 포함할 수 있음.- <footer>: 바닥글 ex. 작성자, 저작권 데이터, 관련 문서 링크- <form>: 정보 제출을 위한 인터렉티브 컨트롤이 포함된 문서 섹션- <header>: 소개 콘텐츠 ex, 제목 요소, 로고, 검색 양식, 작성자 이름- <main>: <body>의 주요 콘텐츠- <mark>: 참조를 목적으로 강조 표시된 텍스트- <nav>: 탐색 링크를 제공하는 것이 목적인 페이지 섹션 ex. 메뉴, 목차, 색인- <section>: 독립형 섹션. 극소수의 예외를 제외하고 항상 제목이 있어 함.- <summary>: <details> 요소에 대한 요약. <summary> 요소를 클릭하면 부모 <details>의 상태가 전환(열림/닫힘).- <time>: 특정 시간/기간. 날짜를 기계가 읽을 수 있는 형식으로 변환하는 datetime 속성을 포함할 수 있음.- <strong>: <b> 대신 사용- <em>: <i> 대신 사용 |
시맨틱(Semantic)이란 "의미론적인" 의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
작성방법
시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다. 즉, 다음과 같은 것들을 말한다.
- 헤더/푸터에
<header>와<footer>사용 - 메인 컨텐츠에
<main>과<section>사용 - 독립적인 컨텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul>과<li>사용 - 내비게이션에
<nav>사용
이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
예를 들어, 동일한 효과를 부여하는 <strong> 과 <b> 태그가 있다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold" 의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong> 의 경우는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다" 라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.
특징
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
- 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
- 단순한
div,span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋다.
실무에서 시맨틱 마크업이 완벽하게 쓰이는 것은 이상적이긴 하지만, 이러한 특징들을 고려하고 웹사이트를 구성하는 것이 많은 측면에서 바람직하다.
