[HTML] 시맨틱 마크업

1️⃣ 시맨틱 마크업이란?

• 시맨틱(Sementic) : 의미의, 의미론의
• 마크업(Markup) : HTML 태그로 문서를 작성하는 것

즉, 시맨틱 마크업이란 의미를 잘 전달하도록 적절한 HTML 태그를 사용하여 문서를 작성하는 것을 말한다.

2️⃣ 시맨틱 마크업의 중요성

1. SEO(검색엔진 최적화) : 검색엔진에서 시맨틱 태그를 중요한 키워드로 간주하기 때문에 SEO에 영향을 끼친다.
2. 웹 접근성 : 장애가 있는 사용자에게 페이지를 탐색할 때 하나의 푯말 역할을 해준다.
3. 태그의 가독성 및 유지보수 : 정리된 마크업은 코드 식별에 용이하고, 유지보수가 편리해진다.

3️⃣ HTML 태그

✔️ 콘텐츠 섹션

콘텐츠 섹션 요소를 사용하면 문서 콘텐츠를 논리적 조각으로 구성할 수 있다.

<header>

• 소개 및 탐색에 도움
• 제목, 로고, 검색 폼, 회사명, 작성자 이름 등의 요소가 포함될 수 있음

<nav>

• 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획
• 메뉴, 목차, 브레드크럼 등으로 사용

<footer>

• 페이지의 작성자, 저작권 정보, 관련 문서 등의 내용 포함

<main>

• body의 주요 콘텐츠
• 문서의 핵심 주제나 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어짐
• 사이드바, 탐색 링크, 검색폼 등 여러 페이지에 반복되는 콘텐츠는 포함하지 않음 (주요 기능이라면 예외)
• 웹페이지에서 한 번만 사용할 수 있음

<article>

• 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
• 즉, 아티클 영역을 독립적으로 보여줘도 문제가 없는 완성된 정보를 제공해야 함
• 게시판, 뉴스 기사, 매거진, 위젯, 실시간 채팅 창 등으로 사용

<section>

• div 대신 포괄적으로 정보글을 묶을 때 사용
• 보통 제목을 포함하지만, 항상 그런 것은 아님

article VS section

일단 article 사용을 고민해보기를 추천한다! 독립적으로 사용한다면 article을 사용하고, 웹페이지 앞뒤 문맥의 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section을 사용하자.

(단순 스타일링 목적이라면 div 사용)

<aside>

• 문서의 주요 내용과 간접적으로 연관된 부분
• 주로 사이드바, 콜아웃 박스로 표현

<h1~h6>

• 6단계의 구획 제목
• 책으로 생각한다면 목차와 같은 역할 -> 스크린리더를 사용하는 사용자에게 매우 중요한 정보
• h1 태그는 한 페이지에 한 번만 사용 권장

<address>

• 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보
• 물리적 주소, URL, 이메일 주소, 전화번호, SNS정보, 좌표 등 표시
• 학원, 병원, 식당처럼 직접적인 연락처가 필수인 곳은 반드시 사용 권장

✔️ 텍스트 콘텐츠 (인라인)

인라인 텍스트 시멘틱을 사용해서 단어, 줄 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있다.

<strong>

• 중대하거나 긴급한 콘텐츠를 나타냄
• 스크린 리더에서 화면을 낭독할 때 거센 억양으로 소리내어 발음
• 보통 브라우저는 굵은 글씨로 표시

strong VS b

b 태그는 strong태그와 마찬가지로 굵은 글씨로 표시된다. 다만, 그 외에는 특별한 용도가 없기 때문에 중요한 텍스트를 강조하고 싶을 땐 strong 태그를 사용해야 한다.

텍스트를 꾸미고 싶다면 CSS를 사용하자!

<em>

• 텍스트의 강세, 콘텐츠를 강조해서 읽었으면 하는 부분에 적용
• 요소를 중첩하면 더 큰 강세를 뜻함
• 음성 강조를 하는 것처럼 문장 내 단어의 의미를 변경할때 사용

<i>

• 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분
• 주로 기술 용어, 외국어 구절, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용

<time>

• 시간의 특정 지점 또는 구간
• datetime 속성을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용

✔️ 양식

입력 가능한 요소를 제공한다.

<button>

• button : 기본 행동이 없음. 자바스크립트와 연결하여 사용
  • 양식 제출용 버튼이 아니라면 type="button" 으로 꼭 지정하기! (기본값에서는 양식 데이터를 제출함)
• submit : 서버로 양식 데이터를 제출
• reset : 초기값으로 되돌림
• disabled : 누르거나 클릭하는 것을 방지
• 접근성 측면에서, 버튼의 최소 크기는 44px*44px 로 권고

a VS button

button은 사용자의 동작 실행을 위한 트리거로, 브라우저의 기본 동작이 없어 자바스크립트를 이용하여 동작 추가가 가능하다. a 태그는 웹문서의 이동을 위한 링크에만 사용한다.

또한 a 태그의 경우 마우스오버 됐을 때 url이 브라우저 창 하단에 노출되고, 오른쪽 마우스 클릭 시 링크 관련 동작을 할 수 있다.

<input type="button"> VS <button type="button">

button요소는 input요소보다 스타일을 적용하기 훨씬 수월하다. input의 경우 빈태그 요소이기 때문에 value 특성에 텍스트 값밖에 지정할 수 없지만, button의 경우 내부 HTML 콘텐츠에 더해 ::after, ::before 같은 가상 요소를 사용하는 것도 가능하다.

🔗 참고

• mdn - HTML 요소 참고서