본문 바로가기

프론트엔드 개발/HTML, CSS - 이론

[HTML 심화] div 태그의 용도에 따른 이름.

<개요>

<header> <nav> <footer> <main> <aside> <section> <article> 은 모두 div 태그와 기능이 동일하고 이름만 다를 뿐이다. 

아무 기능도 없는 해당 태그들을 div 대신 쓰는 이유는 다음과 같다. 

1. div를 남발할 시, 가독성이 떨어져 유지보수가 어렵다. 

2. 해당 태그들을 쓰면 검색엔진이 정보의 종류를 파악할 때 도움이 된다. 

3. 스크린 리더로 읽는 분들이 읽기 훨씬 수월해 진다.

 

그럼 각 태그들이 어떨 때 쓰이는 지 알아보자. 

<head>

페이지 전체나 특정 구획의 제목 역할을 하는 요소들을 두는데 사용된다. 

ex- 로고, 제목, 검색창

<nav>

링크가 들어가는 요소가 들어가는 태그

ex- 색인, 페이지 메뉴들

<footer>

페이지 전체에서 혹은 특정 구획의 최하단에 뭐 적을 때 해당 태그를 이용함

ex-

<main>

페이지의 주요 내용이 들어가는 곳으로 

페이지마다 꼭 하나여야만 한다.

<aside>

사이드 바 같은 거 

해당 버튼 클릭하면 글로 갈 수 있게 만드는 것

<section>

페이지의 컨텐츠를 일정 단위의 구획으로 나누는데 사용

더 작은 단위의 컨테이너(block)은 div 이용

<article> 

페이지 내에서 재사용될 수 있거나 페이지로부터 독립적인, 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용됨

ex- 기사 ,블로그 포스트, 댓글 등

 

*스스로 해보기

list 내용들이 안 커진다. 음