✔ 본 내용은 사전스터디때 학습했던 내용에 추가 내용을 첨부하여 작성하였다.
1. Semantic elements 이란?
-
Semantic Elements는 의미론적 요소로서, 정확한 의미를 가진 태그를 전달 및 마크업을 하기 위해 도입했다.
-
즉 개발자와 브라우저에게 정확한 의미를 전달함으로써, 개발자에겐 개발 및 유지보수를 용이하게 만들고 브라우저에게는 검색엔진의 최적화를 위한 정확한 정보를 전달할 수 있게 된다.
✔ 검색 엔진 최적화(Search Engine Optimization): 웹사이트의 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트를 보여주기 위한 것이다. 따라서 HTML의 요소들을 가지고 해당 웹페이지의 내용을 파악하고, 그것이 검색엔진에 많이 노출될 수 있도록 하기 위해서 시맨틱한 마크업이 필요하다.
2. Semantic elements & non-semantic elements
1. Semantic elements
-
<form>,<table>,<img>등의 태그가 존재함, 담고 있는 정보를 설명하고 있으며 직관적으로도 쉽게 알 수 있다. -
Semantic Markup을 할 시, 요소들을 묶어주는
<header>,<nav>,<section>등의 요소들도 존재한다.
2. non-semantic elements
-
<div>,<span>등의 태그가 존재하며 어떠한 정보를 담고 있는지 명확히 설명하지 않는다. -
레이아웃을 구성할 시
<div>,<span>에 일일이id,class값으로 네이밍을 하게 되는데, 이는 브라우저와 개발자 모두에게 악영향을 미친다.
3. Semantic Web
-
시맨틱 웹은 의미론적 웹, 즉 개발자와 브라우저를 위해 정확한 정보 및 의미들을 가진 요소와 태그로 이루어진 웹사이트를 뜻한다.
-
Sementic element으로 markup을 하게 되는데 이를 Semantic markup이라 한다.
<header>: 화면 최상단에 위치하며 로고, 로그인, 회원가입 등의 정보를 표시<nav>: navigation, 주로 메뉴 표시<section>: 하나의 주제, 연관된 내용을 그룹화를 위해 사용<article>: 본문의 주 내용, 독자적인 내용(ex) 뉴스 기사, 블로그 글 등..) 표시<aside>:사이드바라고도 하며 광고, 검색기능, 카테고리 등 표시<footer>: 화면 최하단에 위치하며 이메일, 저작권 등을 표시
- 시맨틱 웹의 궁극적인 목표 (이상향)은 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다. 때문에 개발자의 작업 용이성, 브라우저의 정확한 해석을 위해선 위와 같은 시맨틱 웹은 필수적으로 사용되어야 할 것이다.
4. Reference
