티스토리 뷰
많은 개발자가 웹 사이트를 개발할 때 특정 레이아웃을 선호하자,
HTML5에서 해당 레이아웃을 아예 태그로 만들어 각 요소의 쓰임을 명확하게 구분하였다.
> 이를 시맨틱 태그(Semantic tag)라고 한다.
Semantic = 의미론적
시맨틱 태그 = 의미를 가지는 태그
나눠진 구획의 기능을 태그 이름만 보고도 이해할 수 있다.
시맨틱 태그를 사용해야하는 이유
1. SEO
Search Engine Optimization
2. 접근성
스크린 리더를 이용하거나 키보드만을 이용해 접근하는 경우에 문제없이 동작하도록 해야함
3. 유지보수
한눈에 구조를 알아보기 쉬워야 유지보수에 좋음
<header>
웹 페이지 혹은 <section>의 소개나 제목을 담기 위해 사용하는 요소
<head>와 혼동하지 않도록 유의
<nav>
내비게이션 역할을 수행하는 요소
페이지 이동을 위한 메뉴를 주로 담는다
<main>
웹 페이지에서 중요한 컨텐츠를 가진 부분
<aside>
광고 또는 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소
<section>
기준에 따라 구획을 구분하기 위해 사용하는 요소
main 안이나 article 안이나 상관없이 연관있는 내용들을 묶어 줄 때 사용할 수 있음
<article>
주 내용을 담기 위해 사용하는 요소
신문기사에서 기사 하나, 블로그 포스트에서 포스트 하나
독립적으로 다른 페이지에 보여져도 문제 없는 고유한 정보를 가지고 있을 때 사용
<footer>
일반적으로 웹 사이트의 가장 아래에 들어가는 회사 정보나 사이트 정보 등의 추가 정보를 담기 위해 사용하는 요소
<i>
시각적으로만 강조
(예 : 책의 제목, 인용구)
<em>
강조하는 이탤릭체
스크린 리더도 강조해서 읽어줌
정말 강조하고 싶은 내용에 사용
<b>
시각적으로만 강조
<strong>
강조하는 볼드체
스크린 리더도 강조해서 읽어줌
정말 강조하고 싶은 내용에 사용
<ul>
순서가 없는 목록
단순히 목록만 나타낼 때
<ol>
순서가 있는 목록
순서가 중요한 목록을 나타낼 때
<dl>
description list
단어에 대한 설명이 묶여 있는 목록을 나타낼 때
<dt> description title, <dd> description detail 와 같이 사용
<img>
웹페이지의 내용과 연관이 있는 중요한 이미지 일 때
background-image
웹페이지의 내용과 관련없고 스타일링 목적으로만 사용될 때
문서의 일부분이 아닐 때, 문서를 읽고 이해하는데 이미지가 없어도 문제 없을 때
<button>
사용자가 버튼을 클릭 했을 때 특정 행동이 발생할 때
(예 : 로그인, 추천, 퀴즈 풀기)
<a>
단순히 다른 페이지로 이동 할 때, 어딘가로 이동 할 때
link가 걸려있을 때
<table>
많은 데이터가 있어서 행과 열로 표현할 때
CSS
단순히 스타일링을 위해 그리드형식으로 표현할 때
(flex나 grid 사용)
'공부 노트' 카테고리의 다른 글
| 콜백함수 callback function, promise, async / await (0) | 2021.12.10 |
|---|---|
| 재귀 함수 (0) | 2021.12.06 |
| 메뉴를 만들 때 <li>를 사용하는 이유 (0) | 2021.09.23 |
| figure태그와 함께 사용할 수 있는 cite blockquote q 태그 (0) | 2021.09.15 |
| CSS Text Spacing CSS 글자 자간 행간 (0) | 2021.09.14 |
- Total
- Today
- Yesterday
- javascript
- 자바스크립트
- git
- 파이썬
- 구름에듀
- 코드잇
- html
- vscode
- 리액트
- vue
- Til
- 제로초
- TS
- map
- 김버그
- CSS
- 코딩앙마
- 저스트코드
- scss
- 깃
- 회고
- 제이쿼리
- 드림코딩
- Typescript
- 비주얼스튜디오코드
- Python
- 타입스크립트
- 스파르타코딩클럽
- js
- React
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |