IT

★★★★★★★★★★★★★★★★★」 ★★★★★★★★★★★★★★★★★」 ★★★★★★★★★★★★★★★★★」?

itgroup 2023. 4. 18. 22:28
반응형

★★★★★★★★★★★★★★★★★」
?

<section> ★★★★★★★★★★★★★★★★★」<div>HTML무슨 일입니까?
두 경우 모두 섹션을 정의하는 것 아닌가요?

<section>는, 내부의 컨텐츠가 그룹화되어(즉, 단일 테마에 관련), 페이지의 아웃라인에 엔트리로 표시되는 것을 의미합니다.

<div>한편, 에서는, 그 안에 있는 것을 제외하고, 어떠한 의미도 전달하고 있지 않습니다.class,lang ★★★★★★★★★★★★★★★★★」title★★★★★★ 。

no: " " " 를 합니다.<div>는 HTML내의 .

사양부터:

<section>

<section>요소는 문서 또는 응용 프로그램의 일반 섹션을 나타냅니다.여기서 섹션은 콘텐츠의 주제 그룹입니다. ★★section, 를 「h1-h6」의 자식으로 것으로 가 있습니다.<section>★★★★★★ 。

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

...

<section>이치노으로만 필요한 작성의 필요한 요소가 있는 , 는 이 요소를 하는 것이 .<div>이치노으로는 '하다'는 이다.<section>요소의 내용이 문서의 개요에 명시적으로 나열되는 경우에만 요소가 적절합니다.

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

<div>

<div>요소는 특별한 의미가 없습니다.이치노 it와 the the the the the the the the the the the the와 함께 사용할 수 .class,lang , , , , 입니다.title연속된 요소의 그룹에 공통적인 의미를 마크업하는 속성.

주의: 작성자는 다음 내용을 참조할 것을 강력히 권장합니다.<div>적절한 다른 요소가 없는 경우, 최종 수단 요소로서의 요소. <div>요소는 독자들에게 더 나은 접근성과 작가들의 더 쉬운 유지보수로 이어집니다.

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

섹션은 보조 기술을 위한 랜드마크 내비게이션과 가장 관련이 있습니다.나 랜드마크한데, 이름이 있어야 합니다. 이름은 이 의 개요나 목록에 나와야 .aria-label,aria-labelledby ★★★★★★★★★★★★★★★★★」title:

<section aria-labelledby="s3-h2">
  <h2 id="s3-h2">Introduction</h2>
  …

예를 들어 Mac의 VoiceOver는 해당 섹션으로 직접 이동하기 위한 개요를 제공할 수 있습니다.

<section>섹션을 표시합니다.<div>는 연관된 시멘틱스가 없는 범용 블록을 마크합니다.

관찰 결과입니다. 이를 뒷받침하는 문서는 발견되지 않았습니다.

단면이 다른 단면을 포함할 경우 내부 단면의 h1-헤더는 외부 단면의 h1-헤더보다 작은 글꼴로 표시됩니다.섹션 대신 div를 사용하는 경우 내부 div h1-header는 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에서도 같은 동작입니다.

<div> Vs <Section>

1라운드

<div>: HTML 요소(또는 HTML Document Division Element)는 본질적으로 아무것도 나타내지 않는 흐름 내용의 일반 컨테이너입니다.클래스 또는 ID 속성을 사용하거나 lang 등의 속성 값을 공유하기 때문에 스타일링을 위해 요소를 그룹화하는 데 사용할 수 있습니다.다른 의미 요소가 없는 경우에만 사용해야 합니다(예:<article> ★★★★★★★★★★★★★★★★★」<nav>가 적절합니다.

<section>: HTML 섹션 요소(<section>는 문서의 을 나타냅니다는 문서의 일반적인 섹션(일반적으로 제목이 있는 내용의 주제 그룹)을 나타냅니다.


2라운드

<div>: 브라우저 지원 여기에 이미지 설명 입력

<section>: 브라우저 지원

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

이러한 맥락에서 div는 순수한 CSS 또는 DOM 관점에서만 관련이 있는 반면 섹션은 의미론 및 가까운 미래에 검색 엔진에 의한 인덱싱에도 관련이 있습니다.

<section>요소는 관련된 요소의 블록으로 정의됩니다.

<div>요소는 하위 요소의 블록으로 정의됩니다.

섹션 태그를 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 태그로 콘텐츠를 마크업 및 제어해야 합니다.

대부분의 간단한 페이지에는 여러 섹션 태그가 아닌 하나의 섹션 태그만 있어야 합니다.섹션과 유사한 다른 흥미로운 HTML5 태그도 있다는 점도 고려하시기 바랍니다.문서 흐름 내에서 문서, 요약, 기타 항목을 사용하는 것을 고려해 보십시오.보시는 바와 같이 이러한 태그는 HTML 문서의 주요 영역을 정의하는 기능을 더욱 강화합니다.

<div> 모두가 알고 좋아하는 범용 플로우컨테이너.요소는 추가 가 블록 입니다.

<section> 또는 프로그램섹션 에는 보통 제목.A a a 제 제 ( ) a a a a a a a a a a 。, 등), 웹탭 등

제안: div: 낮은 버전을 사용(4.01에서 아직) html 요소(디자이너들이 많이 처리했습니다)section: 최근 커밍(html5) html 요소.

「」를 사용합니다.<section>깔끔할 수 있습니다.헬프 스크린 리더와 SEO는<div>바이트 수가 적고 입력 속도가 빠릅니다.

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

또, 퍼팅은 추천하지 않습니다.<section>in a a a a <section> 를를를를를 a를 <div> a <section>

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

<section></section>

HTML<section>요소는 문서의 일반적인 섹션(일반적으로 제목이 있는 내용의 주제 그룹)을 나타냅니다. ★★<section>제목)을 .<h1>-<h6><section> 다음의 링크를 참조해 .자세한 내용은 다음 링크를 참조하십시오.

참고 자료:


<div></div>

HTML<div>element Element콘텐츠의 입니다.으로 아무것도 나타내지 .element(HTML Document Division Element).클래스 또는 ID 속성을 사용하거나 lang 등의 속성 값을 공유하기 때문에 스타일링을 위해 요소를 그룹화하는 데 사용할 수 있습니다. 요소: 른른 ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ()가 없는 경우에만 사용해야 .<article> ★★★★★★★★★★★★★★★★★」<nav>가 적절합니다.

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


다음 링크에서는 이들 간의 차이에 대해 자세히 설명합니다.

웹에는 다음과 같은 되어 있습니다.<div id="nav"> <div class="header"> <div id="footer">네비게이션, 헤더 및 바닥글을 나타냅니다. ★★★★★★★★★★★★★★★★★.<div>에서 웹 하기 위해 되었습니다.html4는 html4를 나타냅니다.<div>없기 때문에 html5는 많은 요소를 했습니다.<section>스크린 리더, 검색 엔진 및 브라우저 등에 충분한 정보를 제공하여 웹사이트의 다른 부분을 식별할 수 있도록 하는 것 중 하나입니다.

은 '만'을 했을 경우, '만'을 사용하는 입니다.<div> 안 읽히네요가독성이 떨어집니다.

tagdiv가 아닌 하면 리더, 향상에 아직 쓸 수 있습니다.<div>컨테이너로서의 의미 요소 내부.

<section>태그는 장, 머리글, 바닥글 또는 문서의 다른 섹션과 같은 문서의 섹션을 정의합니다.

반면:

<div> documenttag HTML 내의 또는 합니다.

<div>를 그룹화하여 tag로 합니다.

언급URL : https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div

반응형