<섹션>과 <div>의 차이점은 무엇입니까?


답변:


1037

<section> 내부의 내용이 그룹화되어 (즉, 단일 테마와 관련됨) 페이지 개요에 항목으로 표시되어야 함을 의미합니다.

<div>반면에, 의 , 및 속성 과 는 별개로 어떤 의미도 전달하지 않습니다 .classlangtitle

따라서 아니오 : a를 사용하면 <div>HTML에서 섹션을 정의하지 않습니다.

사양에서 :

<section>

<section>요소는 문서 또는 응용 프로그램의 일반 섹션을 나타냅니다. 이 맥락에서 섹션은 주제별 콘텐츠 그룹입니다. 각 요소 section는 일반적으로 제목 (h1-h6 요소)을 요소의 자식으로 포함하여 식별해야합니다 <section>.

섹션의 예는 장, 탭 대화 상자의 다양한 탭 페이지 또는 논문의 번호가 매겨진 섹션입니다. 웹 사이트의 홈 페이지는 소개, 뉴스 항목 및 연락처 정보를위한 섹션으로 분할 될 수 있습니다.

...

<section>요소는 일반적인 컨테이너 요소가 아닙니다. 스타일링 목적이나 스크립팅의 편의를 위해 요소가 필요한 경우 작성자는 해당 <div>요소를 대신 사용하는 것이 좋습니다. 일반적인 규칙은 <section>요소의 내용이 문서의 개요에 명시 적으로 나열된 경우에만 요소가 적절 하다는 것입니다.

( https://www.w3.org/TR/html/sections.html#the-section-element )

<div>

<div>요소는 특별한 의미가 없습니다. 그것은 아이들을 나타냅니다. 그것은이 사용할 수 있습니다 class, lang그리고title 연속적인 요소의 그룹에 의미의 일반적인를 표시하는 속성.

참고 :<div> 다른 요소가 적합하지 않은 경우 작성자는 최후 의 요소로 요소 를 보는 것이 좋습니다 . 요소 대신 더 적절한 요소를 사용하면 <div>독자의 접근성이 향상되고 저자의 유지 관리가 쉬워집니다.

( https://www.w3.org/TR/html/grouping-content.html#the-div-element )


22
이 답변을 비롯해 sectionvs div에 대해 더 많이 생각 하면서, 나는 그것들이 정확히 같은 요소라는 결론에 도달했습니다. W3C는 div"자녀를 대표 한다 " 고 말합니다 . 글쎄, 그 section요소 도 무엇 입니까? 네, section그 아이가 함께 그룹화,하지만 매우 돌며 아이들을 넣는 행동에 의해하는 의미 div, 당신은, 그래, 또한 함께 그룹화 . 적어도 내가하는 방식은, 나는 너희들에 대해 모른다.
trysis

9
@trysis : "더에 대한 생각 section대는 div"- 그것에 대해 너무 많이 생각하지 않습니다. HTML은 복잡하지 않습니다. "아이들을 안으로 넣는 바로 그 행동에 의해 div, 당신은 또한 그들을 그룹화하고 있습니다 ." HTML 사양에 따르지 않습니다. div스타일링 목적이나 JavaScript 편의 또는 W3C에서 아직 생각하지 않은 다른 목적으로 포장하고 있지만 독자에게 하위 요소가 그룹임을 나타내지 않습니다.
Paul D. Waite

8
@ Matian2040 : HTML의 목적은 텍스트에 의미를 추가하는 것입니다 (예 : <p>This is a paragraph</p>또는) <h2>This is a second-level heading</h2>. 때문에 <div>의미를 추가하지 문제의 텍스트에 적절한 의미를 추가하는 또 다른 HTML 요소가없는 경우, 당신은 단지 그것을 사용하십시오.
Paul D. Waite

7
섹션을 사용할 경우 이점이 하나도 없습니까? 롤, 왜 그때도 존재합니까?!
블랙

14
@EdwardBlack : 다른 태그와 다른 의미를 전달합니다. 전달의 의미는 HTML의 요점입니다.
Paul D. Waite

71

<section> 마크 업하다 부분 , <div>아니 연관된 의미를 가진 일반적인 블록 가입 자국.


@MarwenTrabelsi — 링크가 죽지 않았습니다. "섹션"은 표준 영어 단어입니다. 사전을 이용할 수 있습니다.
Quentin

@MarwenTrabelsi - 당신이 "와이드 추상적이고"부르는 용어 입니다 주요 차이점.
Quentin

64

<div> Vs <Section>

라운드 1

<div>:HTML의 요소 (또는 HTML 문서 부문 요소) 본질적으로 아무것도 나타내지 않는 흐름 콘텐츠에 대한 일반 컨테이너입니다. 스타일 지정 목적 (클래스 또는 ID 속성 사용) 또는 lang과 같은 속성 값을 공유하기 위해 요소를 그룹화하는 데 사용할 수 있습니다. 다른 의미 요소 (예 : <article>또는 <nav>)가 적절 하지 않은 경우에만 사용해야합니다 .

<section>:HTML 섹션 요소는 ( <section>) 일반적으로 제목을 가진 문서의 일반적인 부분, 즉, 내용의 주제를 그룹화 한 것입니다.


라운드 2

<div>: 브라우저 지원 여기에 이미지 설명을 입력하십시오

<section>: 브라우저 지원

표의 숫자는 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. 여기에 이미지 설명을 입력하십시오

그 맥락에서 div는 순수한 CSS 또는 DOM 관점에서만 관련이 있지만 섹션은 시맨틱과 관련이 있으며 조만간 검색 엔진에 의한 색인 생성과 관련이 있습니다.


10
브라우저 지원은 문제가 아니며 의미에 관한 것입니다. HTML5를 사용하는 경우 어쨌든 polyfill을 사용하게 될 것입니다.
Jack Tuck

@JackTuck 그리고 그런 kludges를 사용하지 않으려면 어떻게해야합니까?
Mr Lister

49

단지 관찰-이것을 증명하는 문서를 찾지 못했습니다

섹션에 다른 섹션이 포함 된 경우 내부 섹션의 h1- 헤더는 외부 섹션의 h1- 헤더보다 작은 글꼴로 표시됩니다. 섹션 대신 div를 사용하면 내부 div h1 헤더가 h1로 표시됩니다.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

-Level2-헤더가 Level1-헤더보다 작은 글꼴로 표시됩니다.

CSS를 사용하여 h1 헤더 색상을 지정하면 내부 h1도 색상이 지정됩니다 (일반 h1처럼 작동 함). Firefox 18, IE 10 및 Chrome 28에서도 마찬가지입니다.


1
여전히 일의의로 빠른 stackblitz이 데모하는 방법 매우 이상한 ... 만들어 stackblitz.com/edit/angular-h1ayez
개빈 매니 언

24

HTML5 표준에서 <section> 요소는 관련 요소의 블록으로 정의됩니다.

<div>요소는 자식 요소의 블록으로 정의된다.


왜 누군가가 이것을 표시했는지 모르겠습니다. 짧고, 달콤하고, 요점.
user6031759

1
-1 의미가 없습니다. 계층 구조 문서 (XML / HTML)에서 관련 요소를 그룹화하는 방법, 태그를 사용하여 하위 요소 블록 만 그룹화 할 수 있습니다.
Svisstack

@Svisstack 모든 엔 클로징 태그 (즉, 자체 닫기 / void가 아님)가 하위 요소의 블록을 그룹화 할 수있는 것이 맞습니다. 나는 이것이 아이들의 관계에 대해 점점 더 나아가고 있다고 생각하지만. 그들 모두에게 전달할 관련 맥락이 있습니까? 예를 들어, 기능 / 스타일링을 위해 여러 입력을 포함하는 양식이 함께 그룹화됩니다. 그러나이 양식은 웹 사이트의 섹션이 아니라 기능이있는 조각입니다. 이제 페이지에서 제품을 설명하고 있다고 가정하겠습니다. 요소들이 집합적인 아이디어를 전달하기 때문에 제품에 대한 다른 부분들이 섹션 요소에 나열 될 것입니다.
Xandor

20

섹션 태그를 div 요소 의 대체물로 과도하게 사용하지 않도록주의하십시오 . 태그의 컨텍스트 내에서 상당한 영역을 정의한다 . 의미 적으로 HTML5는 다음과 같이 문서를 정의하도록 권장합니다.

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

이 전략을 통해 웹 로봇과 자동화 된 스크린 리더는 컨텐츠의 흐름을보다 잘 이해할 수 있습니다. 이 마크 업은 주요 페이지 컨텐츠가 포함 된 위치를 명확하게 정의합니다. 물론, 머리글과 바닥 글은 웹 사이트 내에서 수천 페이지가 아닌 경우 수백 개에 걸쳐 일반적입니다. 섹션 태그는 고유 한 내용이 포함 된 위치를 설명하기 위해 제한해야합니다. 섹션 태그 내에서 h1 , div , span 등과 같이 계층 구조에서 더 낮은 HTML 태그로 컨텐츠를 계속 마크 업하고 제어해야합니다 .

대부분의 간단한 페이지에는 여러 개의 섹션 태그가 아닌 단일 섹션 태그 만 있어야 합니다. section 과 유사한 다른 흥미로운 HTML5 태그가 있다는 것도 고려 하십시오 . 문서 흐름 내에서 article , summary , 따로 사용하는 것을 고려하십시오 . 보다시피,이 태그는 HTML 문서의 주요 영역을 정의하는 능력을 더욱 향상시킵니다.


"가장 간단한 페이지에는 단일 섹션 태그 만 있어야합니다." 단일 페이지에서 여러 섹션 태그를 사용하려는 간단한 예를 들어 줄 수 있습니까?
styfle

7
나는 main그 안에 그리고 그 안에 하나 이상의 section태그를 사용할 것입니다.
Chazy Chaz

10

<div>— 우리 모두가 알고 사랑하는 일반적인 흐름 컨테이너. 추가적인 의미 적 의미가없는 블록 레벨 요소 (W3C : Markup, WhatWG)

<section>— 일반적인 문서 또는 응용 프로그램 섹션. 일반적으로 제목 (제목)과 바닥 글이있을 수 있습니다. 긴 기사의 하위 섹션, 페이지의 주요 부분 (예 : 홈페이지의 뉴스 섹션) 또는 웹앱의 탭 인터페이스에있는 페이지와 같은 관련 콘텐츠의 덩어리입니다. (W3C : 마크 업, WhatWG)

내 제안 : div : 더 낮은 버전을 사용했습니다 (4.01으로 생각합니다) html 요소 (많은 디자이너가 처리했습니다). 섹션 : 최근에 오는 (html5) html 요소.


9

section 태그는 html에 대한보다 의미론적인 구문을 제공합니다. div는 섹션의 일반 태그입니다. 적절한 콘텐츠에 섹션 태그를 사용하면 검색 엔진 최적화에도 사용할 수 있습니다. 섹션 태그를 사용하면 HTML 구문 분석이 쉬워집니다. 자세한 내용은 참조하십시오. http://blog.whatwg.org/is-not-just-a-semantic


1
"섹션 태그를 사용하면 HTML 구문 분석을 쉽게 할 수 있습니다"— eh? 페이지 개요를 생성 하시겠습니까?
Paul D. Waite

7

사용 <section>할 수있다 깔끔한 , 도움말 화면 판독기SEO 동안 <div>이다 바이트 작은빠른 유형

전반적으로 거의 차이가 없습니다.

또한, 퍼팅 권하고 싶지 않다 <section>A의 <section>대신 배치 <div>내부를<section>


3

다음은 웹 응용 프로그램의 경우 몇 가지 최근 html5 요소를 구별하는 방법에 대한 팁입니다 (순전히 주관적).

<section> 그래픽 사용자 인터페이스에서 위젯을 표시하는 반면 <div> , 버튼을 보유하는 컨테이너와 같은 위젯 구성 요소의 컨테이너 및 레이블 등입니다.

<article> 목적을 공유하는 위젯을 그룹화합니다.

<header> 제목과 메뉴 바입니다.

<footer> 상태 표시 줄입니다.


1

그만큼 <section>태그는 장, 머리글, 바닥 글, 또는 문서의 다른 부분으로 문서의 섹션을 정의합니다.

이므로:

그만큼 <div>태그는 부서 또는 HTML 문서의 섹션을 정의합니다.

<div>태그는 블록 요소를 그룹화하여 CSS로 형식화하는 데 사용됩니다.


2
문서의 머리글, 바닥 글 및 기타 섹션에는 고유 한 의미 태그가 있습니다. ( <header>, <footer>, <nav>, <article>등)
올리버

1

<section></section>

HTML <section>요소는 문서의 일반적인 섹션, 즉 일반적으로 제목이있는 주제별 콘텐츠 그룹을 나타냅니다. 각 요소 <section>는 일반적으로 요소 ( <h1>- <h6>요소)를 요소의 자식 으로 포함하여 식별해야합니다 <section> . 자세한 내용은 다음 링크를 참조하십시오.

참고 문헌 :


<div></div>

HTML <div>요소 (또는 HTML 문서 구분 요소)는 흐름 내용의 일반 컨테이너이며 본질적으로 아무것도 나타내지 않습니다. 스타일 지정 목적 (클래스 또는 ID 속성 사용) 또는 lang과 같은 속성 값을 공유하기 위해 요소를 그룹화하는 데 사용할 수 있습니다. 다른 의미 요소 (예 : <article>또는 <nav>)가 적절 하지 않은 경우에만 사용해야합니다 .

참고 : - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div


다음은 이들의 차이점에 대해 자세히 설명하는 링크입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.