<head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분 ┌ <meta> : 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용 └ <title> ~ </title> : 웹 브라우저의 제목 표시줄에 표시되는 부분
<body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용
HTML 문서의 기본 구조
시맨틱 태그
<header> 태그
헤더 영역을 의미
주로 사이트에서 맨 위쪽이나 왼쪽에 있음
검색 창이나 사이트 메뉴를 삽입함
<nav> 태그
같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦
내비게이션을 만들 때 사용
웹 문서의 위치에 영향을 받지 않음 → 헤더나 푸터, 사이드 바 안에 포함할 수 있고, 독립해서 사용 가능
여러 개 사용할 경우 각각 id 속성을 지정하면 네비게이션마다 다른 스타일을 적용할 수 있음
<main> 태그
웹 문서에서 핵심이 되는 내용을 넣음
웹 문서마다 다르게 보여 주는 내용으로 구성함
웹 문서에서 한 번만 사용 가능
<article> 태그
웹에서 실제로 보여 주고 싶은 내용을 넣음
여러 개 사용 가능
안에 <section> 태그를 넣을 수 있음
독립된 콘텐츠로 사용
<section> 태그
웹 문서에서 콘텐츠 영역을 나타냄
몇 개의 콘텐츠를 묶는 용도로 사용
<aside> 태그
본문 내용 외에 왼쪽이나 오른쪽 혹은 아래쪽에 사이드 바를 만듦
<footer> 태그
맨 아래쪽에 있는 푸터 영역을 만듦
사이트 제작 정보나 저작관 정보, 연락처 등을 넣음
푸터 영역 안에 <header>, <section>, <article> 등 다른 시맨틱 태그를 모두 사용 가능
<div> 태그
<header>, <section> 같은 시맨틱 태그가 나오기 전에 헤더나 내비게이션, 푸터 등을 구별할 때 사용했음
