시맨틱 태그
의미가 있는 요소
브라우저와 개발자 모두에게 의미를 명확히 설명
<div> 남발 보다는 상황에 맞게 사용하면 편리
<header>
- 제목, 소개 내용
- 하나 이상의 제목 요소 / 로고 또는 아이콘 / 저작권 정보 / 작성자 이름 등
<main>
- 문서 주요 콘텐츠
- 문서의 핵심 주제 / 앱의 핵심 기능 연결, 확장 등
<article>
- 문서, 페이지, 앱, 사이트 안에서 독립적으로 구분해 배포하거나 재사용 할 수 있는 구역
<section>
- 제목이 있는 주제 별 콘텐츠 그룹
- ~장 / 소개 / 뉴스 항목 / 연락처 정보 등
<nav>
- mdn 사이트 참고
- 문서의 부분 중 현재 페이지, 다른 페이지로의 링크 구획
- 목차 / 메뉴 등
<aside>
- 문서의 주요 내용과 간접적으로 연관된 부분
- 사이드바 / 콜 아웃 박스 등
<footer>
- 문서, 섹션의 바닥 글 정의
- 저작권 정보 / 연락처 정보 / 사이트 맵 / 작성자 등
<address>
- 가까운 HTML / 요소의 사람, 단체 조직 등 연락처 정보
기타
<title></title>
웹페이지의 제목
웹페이지의 본문에서 보이지 않으며 브라우저의 탭에서 확인 가능
유저에게 문서의 제목을 알림
페이지의 특성을 드러내는 제목 작성하는 것이 중요
<meta>
웹 페이지의 보이지 않는 정보 제공
태그의 속성을 통해 정보 제공
페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 정보 제공
SEO : 검색 엔진 최적화, 메타 태그를 사용하여 정보 표기
<link>
현재 문서와 외부 리소스 관계 명시
CSS 연결에 가장 많이 사용
<style></style>
<script></script>
자바스크립트와 같은 클라이언트 사이드 스크립트 정의
스크립트 코드를 요소 내부에 직접 명시, src 속성을 사용하여 외부 스크립트 파일을 참조 가능
src 속성이 명시된 <script> 요소에는 스크립트 코드를 직접 명시 불가능
- async 속성이 명시 : 브라우저가 페이지를 파싱되는 동안 스크립트가 실행.
- async 속성은 명시X defer 속성만 명시 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행.
- async 속성과 defer 속성이 모두 명시X : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행.
<noscript> 요소
클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정
스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의
