웹 페이지의 구조를 분명하게 표현하는 것을 의미한다. 즉, 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
태그의 클래스 이름으로 컨텐츠를 유추해야 하지만 후자는 각각의 태그마다 의미가 반영되었기 때문에 코드 가독성과 유지보수성이 높아진다.
검색엔진 최적화(SEO)
시맨틱 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단할 수 있다.
페이지 탐색 최적화
시각 장애인이나 스크린 리더 사용자들이 페이지 정보를 이해하기 수월하다.
유지보수성 향상
가독성이 향상되고 CSS 스타일링을 효율적으로 할 수 있다. 예를 들어 article
태그 안에 있는 h2
태그들의 스타일을 모두 변경하고자 할 때 article h2
로 선택자를 지정할 수 있으므로 h2
태그마다 일일히 지정해줄 필요가 없다.
div
대신 사용할 수 있는 태그header
페이지 제목, 소개, 헤딩 태그, 로고, 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함하는 상단 정보 영역
nav
메뉴, 목차
aside
사이드바 또는 콜아웃 상자로 사용
main
주 콘텐츠 영역 표시
section
구체적인 시맨틱 태그가 없는 문서의 독립적인 영역. 본문의 여러 태그를 감싸는 용도로 사용하며 제목이 있는 것이 일반적이다.
article
여러 문단을 포함하는 독립적인 콘텐츠 영역. 게시물, 잡지, 신문 기사, 블로그 작성글, 제품 카드, 댓글, 대화형 위젯 등이 해당된다.
details
사용자가 보거나 숨길 수 있는 세부 컨텐츠
figure
일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자료 영역
footer
작성자 정보, 저작권 데이터, 관련 링크 등을 포함하는 하단 정보 영역
P
태그 대신 사용할 수 있는 태그ui
- 비정렬 목록 태그. li
태그들을 감싸는 용도ol
- 정렬 목록 태그. li
태그들을 감싸는 용도li
-목록의 항목 태그a
- 링크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
- 버튼