[HTML, CSS] - HTML 시맨틱 태그

---

---

 

시맨틱 태그

의미가 있는 요소

브라우저와 개발자 모두에게 의미를 명확히 설명

<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)를 사용하지 않도록 설정

스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의

 

---