[HTML] div, section, article <tag>의 차이

Notice

Recent Posts

Recent Comments

Link

github

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

DevLog

[HTML] div, section, article <tag>의 차이 본문

🧑🏻‍💻 개발개발

[HTML] div, section, article <tag>의 차이

Seungjae Lee 2021. 6. 21. 09:30

article 요소

article 영역은 페이지에서 독립적인 내용(독립적인 공간)이다.
해당 부분을 따로 떼어서 다른 페이지로 이동해도 그 영역 속 내용 만으로 온전히 하나의 기사가 될 수 있다.
예를 들면 신문기사, 잡지기사, 블로그 항목, 위젯, 가젯, 바로가기 배너 등 기타 모든 독립 아이템에 해당한다.

section 요소

같은 성격/유형의 컨텐츠를 묶는 태그 방식이다.
<body> 영역 안에 적어도 하나 이상의 section이 존재 해야한다.
section 영역은 article의 집합소 역할을 할 수도 있다.
section을 독립체로 여기지 않고 일종의 한 팀과 같은 역할을 합니다. article처럼 다른페이지로 이동하여 사용할 수 없다.
section은 한 문서에 여러 개가 존재할 수도 있다.

div 요소

div 영역은 특별한 의미 없이 단순히 콘텐츠 영역의 구분 지을때 사용한다.

+ <div> 태그는 의미가 없기에 편하게 사용가능하지만 목적을 갖는 영역 또는 컨텐츠 영역은 <section>, <article> 태그를 이용하면 브라우저와 검색엔진이 어떤 컨텐츠인지를 올바르게 인식할 수 있기 때문에 <div>태그를 사용하기 보다는 <section>, <article> 태그를 이용하는 것이 좋다.

저작자표시 (새창열림)

'🧑🏻‍💻 개발개발' 카테고리의 다른 글

크롬 개발자 도구에서 함수 실행 시간 측정 방법 (0)	2021.10.06
[CSS] background & background-color 속성 차이 (0)	2021.06.21
react-router 라이브러리 설치하기 (0)	2021.06.07
[CSS] 박스모델(box model) (0)	2021.05.27
java - 버거킹 키오스크 (0)	2020.09.12

'🧑🏻‍💻 개발개발' Related Articles

Comments

DevLog

[HTML] div, section, article <tag>의 차이 본문

[HTML] div, section, article <tag>의 차이

article 요소

section 요소

div 요소

'🧑🏻‍💻 개발개발' 카테고리의 다른 글

티스토리툴바