티스토리 뷰

공부 노트

시맨틱 태그(Semantic tag)

2021bong 2021. 9. 27. 15:19

많은 개발자가 웹 사이트를 개발할 때 특정 레이아웃을 선호하자,

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 사용)

728x90

'공부 노트' 카테고리의 다른 글

콜백함수 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
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
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
글 보관함