Semantic HTML이란?

웹 페이지의 구조를 분명하게 표현하는 것을 의미한다. 즉, HTML 태그를 사용할 때 의미에 맞는 태그를 사용하는 것이다. 이를 Semantic Tag라고 한다.

div만을 사용했을 때

<div class="article">
  <div class="title">웹 접근성의 중요성</div>
  <div class="content">
    웹 접근성은 모든 사용자가 웹사이트를 이용할 수 있는 능력을 말합니다.
  </div>
  <div class="author">작성자: 김철수</div>
</div>

Semantic Tag를 사용했을 때

<article>
  <h1>웹 접근성의 중요성</h1>
  <p>웹 접근성은 모든 사용자가 웹사이트를 이용할 수 있는 능력을 말합니다.</p>
  <footer>작성자: 김철수</footer>
</article>

전자의 경우 div 태그의 클래스 이름으로 컨텐츠를 유추해야 하지만 후자는 각각의 태그마다 의미가 반영되었기 때문에 코드 가독성과 유지보수성이 높아진다.

Semantic HTML의 효과

• 검색엔진 최적화(SEO)
  시맨틱 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단할 수 있다.

• 페이지 탐색 최적화
  시각 장애인이나 스크린 리더 사용자들이 페이지 정보를 이해하기 수월하다.

• 유지보수성 향상
  가독성이 향상되고 CSS 스타일링을 효율적으로 할 수 있다. 예를 들어 article 태그 안에 있는 h2 태그들의 스타일을 모두 변경하고자 할 때 article h2로 선택자를 지정할 수 있으므로 h2 태그마다 일일히 지정해줄 필요가 없다.

Semantic Tag의 종류

div 대신 사용할 수 있는 태그

• header
  페이지 제목, 소개, 헤딩 태그, 로고, 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함하는 상단 정보 영역

• nav
  메뉴, 목차

• aside
  사이드바 또는 콜아웃 상자로 사용

• main
  주 콘텐츠 영역 표시

• section
  구체적인 시맨틱 태그가 없는 문서의 독립적인 영역. 본문의 여러 태그를 감싸는 용도로 사용하며 제목이 있는 것이 일반적이다.

• article
  여러 문단을 포함하는 독립적인 콘텐츠 영역. 게시물, 잡지, 신문 기사, 블로그 작성글, 제품 카드, 댓글, 대화형 위젯 등이 해당된다.

• details
  사용자가 보거나 숨길 수 있는 세부 컨텐츠

• figure
  일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자료 영역

• footer
  작성자 정보, 저작권 데이터, 관련 링크 등을 포함하는 하단 정보 영역

P 태그 대신 사용할 수 있는 태그

• ui - 비정렬 목록 태그. li 태그들을 감싸는 용도
• ol - 정렬 목록 태그. li 태그들을 감싸는 용도
• li -목록의 항목 태그
• a - 링크
• heading(h1~h6) - 제목

강조 태그

• em - 기울기
• strong - 볼드

웹 폼 및 폼 요소

웹 폼(Web Form)
웹 페이지를 통해 사용자 입력을 받는 것

폼 요소
폼을 만들기 위한 요소로 대표적으로 input이 해당된다. <input type="type">에서 type에 형식을 지정하면 해당 형식으로 입력을 받을 수 있다.

• <input type="text"> - 텍스트 입력
• <input type="password"> - 패스워드 입력
• <input type="button"> - 버튼
• <input type="submit"> - 데이터 전송
• <input type="checkbox"> - 체크박스
• <input type="radio"> - 중복 체크가 가능한 라디오 버튼
• <input type="search"> - 검색어 입력
• <datalist> - 데이터 목록

그 외

• img - 이미지 영역
• textarea - 두 줄 이상의 텍스트
• button - 버튼