분명 내가 많이 쓰고, 알고있던 내용이라고 해도
면접이나 다른사람에게 제대로 설명을 못하면.. 그냥 모르는거라고 생각한다. 그래서 간단하게 정리해 보려고 한다.
Sementic Markup
시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
- 시맨틱 태그는 HTML5에서 도입되었다. 개발자와 브라우저에게 의미있는 태그를 제공하는 것을 의미한다.
- 예를들어 div 태그는 non-sementic태그이고, section, article등은 sementic태그에 속한다.
- 시맨틱 태그는 그 태그만 보고 대략적으로 들어갈 내용을 유추할 수 있다는 장점이 있다. header와 footer를 설정할 때도 과거에는
<div id='header'></div>를 썼다면 이젠<header>태그 하나로 깔끔하게 정리할 수 있다.
장점
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 SEO에 유리하다.
- 웹 접근성 측면에서 좋다.
- 가독성이 좋다.
작성 방법
- 헤더/푸터에
<header> 와 <footer>사용 - 메인 컨텐츠에
<main> 과 <section>사용 - 독립적인 컨텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul> 과 <li>사용 - 내비게이션에
<nav>사용
HTML5
-
월드와이드웹을 통해 제공되는 정보를 나타낼 목적으로 사용되는 마크업 언어이며 차세대 웹 표준으로 확정된 html의 5번째 버전을 의미한다.
-
html5로 넘어오면서 클라이언트와 서버와의 통신이 가능하며 플러그인을 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가되었다. 이러한 발전된 html5는 css, js API를 통한 기능의 확장, 결합을 통해 기존의 markup language 이상의 의미를 갖게 되었다.
-
모든 HTML 문서는 <!DOCTYPE>선언으로 시작한다. HTML5의 경우 이런식으로 말이다.
-
이 선언은 태그는 아니지만 브라우저가 어떤 타입을 받아들여야할지를 알려주는 정보이다. HTML5의 필수 태그에는 html, head, body 등이 있다. html은 HTML문서의 가장 최상단에 위치하는 태그이며, head태그에는 style, script, title, link, meta 태그등이 있다. body 태그에는 HTML 문서의 내용이 들어간다.
-
meta 태그는 head 부분에서 다른 태그들로 나타낼수 없는 메타데이터를 나타내는 태그를 의미한다. 검색엔진이나 브라우저에서 읽히게 된다.
참고
기록하는 습관