🌐 HyperText Markup Language
웹을 이루는 가장 기초적인 구성 요소이다.
Hypertext란 웨페이지를 다른 페이지로 연결하는 링크를 말하며 링크는 웹의 근본적인 속성 이다.
HTML은 웹 브라우저에 표시되는글, 다양한 컨텐츠를 표시하기 위해 마크업을 사용한다.
📁 HTML문서의 기본 구조
1.<!DOCTUPE html>
:현재 문서가 HTML5 문서임을 명시한다.
2.<html>
: HTML 문서의 루트(root) 요소를 정의합니다.
3.<head>
: HTML 문서의 메타데이터(metadata) 를 정의합니다.
-메타데이터란? html 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
-이러한 메타 데이터는 title, style, meta, link, script 태그 등을 이용하여 표현할수있다.
4.<title>
: html 문서의 제목을 정의한다. 웹 브라우저의 툴바에 표시되고 즐겨찾기에 추가할 때 즐겨찾기 제목이 된다.
5.<body>
: 웹 브랄우저를 통해 보이는 내용 부분입니다.
✍ semantic tag
시맨틱이란 HTML 태그로 문서를 작성하는것을 말한다.
시맨틱 태그를 사용 해야 하는 이유?
구글 검색 엔진의 경우에 필요한 정보를 검색했을 때
header, section, article, main 등 문서 구조를 표현하는 html 태그를 찾고
이것을 기반으로 리뷰, 사람, 제품, 업체 등 다양한 검색 결과를 제공한다.
이처럼 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹을 시멘틱 웹이라고 하며
header, section, main, summary, mark 등 문서 구조를 표현하는 태그를 시멘틱 태그라고 한다.
그렇다면 작성방법은?
시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.
1. header
문서의 header, 어떤 웹페이지인지 정의한다
2. nav
현재 문서의 메뉴에 해당하는 영역,
다른 문서로의 이동이 필요한 링크가 이 영역에 포함될 수 있다.
3. div
영역을 나눌 때 사용하는 태그. 목적이나 영역, 컨텐츠를 사용할 땐 div보다 section 태그를 권장한다. 그래야 브라우저와 검색엔진이 어떤 컨텐츠인지 올바르게 인식할 수 있다.
4. section
같은 성격/유형의 컨텐츠를 묶는 태그이다.
5. article
section처럼 같은 성격/유형 컨텐츠끼리 묶을 때 사용하는 태그이다. 차이점은 아티클은 독립성을 이야기할 수 있다.
6. aside
사이드바
7. footer
문서 작성자에 대한 정보가 담기는 영역이다.
