Program Tip

차이점은 무엇입니까

programtip 2020. 9. 28. 09:57
반응형

차이점은 무엇입니까
과
?

<section>와 <div>HTML 의 차이점은 무엇입니까 ? 두 경우 모두 섹션을 정의하지 않습니까?

<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 )

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

<div> Vs <Section>

라운드 1

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

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

2 라운드

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

<section>: 브라우저 지원

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

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

관찰 일뿐입니다.이를 입증하는 문서를 찾지 못했습니다.

섹션에 다른 섹션이 포함 된 경우 내부 섹션의 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에서 동일한 동작입니다.

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

The <div> element is defined as a block of children elements.

Take caution not to overuse the section tag as a replacement for a div element. A section tag should define a significant region within the context of the body. Semantically, HTML5 encourages us to define our document as follows:

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

This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.

In most simple pages, there should only be a single section tag, not multiple ones. Please also consider also that there are other interesting HTML5 tags which are similar to section. Consider using article, summary, aside and others within your document flow. As you can see, these tags further enhance our ability to define the major regions of the HTML document.

<div>—the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)

<section>—a generic document or application section. A normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. (W3C:Markup, WhatWG)

My suggestion: div: used lower version( i think 4.01 to still) html element(lot of designers handled that). section: recently comming (html5) html element.

The section tag provides a more semantic syntax for html. div is a generic tag for a section. When you use section tag for appropriate content, it can be used for search engine optimization also. section tag also makes it easy for html parsing. for more info, refer. http://blog.whatwg.org/is-not-just-a-semantic

Using <section> may be neater, help screen readers and SEO while <div> is smaller in bytes and quicker to type

Overall very little difference.

Also, would not recommend putting <section> in a <section>, instead place a <div> inside a <section>

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

whereas:

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used to group block-elements to format them with CSS.

<section></section>

The HTML <section> element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element) as a child of the <section> element. For Details Please following link.

References :

<div></div>

The HTML <div> element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

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

Here are some links that discuss more about the differences between them:

다음은 웹 애플리케이션의 경우 몇 가지 최근 html5 요소를 구별하는 방법에 대한 팁입니다 (순전히 주관적).

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

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

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

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

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

반응형

'Program Tip' 카테고리의 다른 글

컬렉션이 수정되었습니다.  (0) 2020.09.28
자바 문자열을 날짜로 변환  (0) 2020.09.28
C #에서 리플렉션을 사용하여 문자열에서 속성 값 가져 오기  (0) 2020.09.28
십진수 대 두 배!  (0) 2020.09.28
Gmail을 통해 .NET에서 이메일 보내기  (0) 2020.09.28

'Program Tip'의 다른글

  • 현재글차이점은 무엇입니까

관련글

댓글

티스토리툴바