WEB

시멘틱 마크업(semantic Markup)

2024. 2. 19. 20:45
목차
  1. 시맨틱 마크업 (semantic Markup) 
  2. 시멘틱 마크업을 사용하는 이유
  3. 시멘틱 마크업의 종류

 

시맨틱 마크업 (semantic Markup) 

semantic 는 의미의, 의미론적인, 이라는 뜻을 지니고 있습니다. 
즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다.

 

시멘틱 마크업을 사용하는 이유

웹 접근성에 효율적 

시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다.

코드 가독성에 따른 유지 보수의 용이

단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋습니다.

검색엔진 최적화(SEO) 에 유리

검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하기 때문입니다.
검색 엔진에 최적화시킨다는 것은 곧 웹 표준에 맞춘다는 말과 같습니다.

 

시멘틱 마크업의 종류

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

저작자표시 (새창열림)

'WEB' 카테고리의 다른 글

[WEB] CSR vs SSR 차이 및 특징 ( + SPA, MPA )  (1) 2025.02.15
[WEB] React-Query Mutation, invalidateQueries  (0) 2025.02.14
[WEB] ♻️ 데이터 페칭 SSR  (0) 2025.02.11
서버 사이드 렌더링(SSR) , 클라이언트 사이드 렌더링(CSR)  (0) 2024.02.19
프레임워크(Framework) 와 라이브러리(Library)  (0) 2024.02.19
  1. 시맨틱 마크업 (semantic Markup) 
  2. 시멘틱 마크업을 사용하는 이유
  3. 시멘틱 마크업의 종류
'WEB' 카테고리의 다른 글
  • [WEB] React-Query Mutation, invalidateQueries
  • [WEB] ♻️ 데이터 페칭 SSR
  • 서버 사이드 렌더링(SSR) , 클라이언트 사이드 렌더링(CSR)
  • 프레임워크(Framework) 와 라이브러리(Library)
orange_mj
orange_mj
orange_mj
programing
orange_mj
전체
오늘
어제
  • 분류 전체보기
    • Goormthon Univ 2기
    • LikeLion 11기, 12기 (멋쟁이사자처럼)
    • Programing Language
      • [python]
      • [C++]
      • [Javascript]
    • Forensic
      • Basic
      • NOX
      • 앱 분석, Database 복호화
    • 부채널
      • Machine Learning
      • AES
      • Side Channel analysis
    • WEB
      • React
    • MapleStory Worlds Super Hac..
      • 기본 개념
      • 응용
    • Github
    • APP
      • REACT_NATIVE

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

hELLO · Designed By 정상우.
orange_mj
시멘틱 마크업(semantic Markup)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.