section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”
div의 무의미와 상대적으로 간단하게 말하면 섹션은 의미를 가진div이다. 그러나 절대로 이렇게 간단하다고 생각하지 마라.섹션은 특정한 주제를 나타내는 내용으로 일반적으로 제목을 붙인다.여기를 보면 블로그 글이나 단독 논평이 섹션을 사용할 수 있지 않을까 하는 생각이 들 수도 있다.다음을 살펴보십시오.
“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”
원소의 내용이 집합되어 더욱 내용이 있을 때,article를 사용하여section을 대체해야 한다.
그럼 섹션은 언제 써야 하나요?이어서 보다.
“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”
섹션 응용의 전형적인 장면은 문장의 장과 절, 탭 대화상자에 있는 탭, 또는 논문에 번호가 있는 부분이 있다.한 사이트의 홈페이지는 프로필, 뉴스, 연락처 등 몇 부분으로 나눌 수 있다.사실 저는 이곳에서 정보를 전달하는 것에 관심이 많습니다. 섹션과 다음에 소개할artilce가 모듈화 응용에 더욱 적합하다고 생각하기 때문에 이 화제는 나중에 전문적인 글을 내서 토론할 것입니다. 여기는 잠시 생략하겠습니다.
또한 W3C는 다음과 같은 경고를 제공합니다.
“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”
섹션은 일반적인 용기 라벨이 아닙니다.탭이 스타일링이나 스크립트 사용을 위한 것일 때div를 사용해야 합니다.일반적으로 요소의 내용이 문서 대강에 명확하게 나타날 때section은 적용된다.

<article>
<hgroup>
 <h1>Apples</h1>
 <h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
 <h1>Red Delicious</h1>
 <p>These bright red apples are the most common found in many
 supermarkets.</p>
</section>
<section>
 <h1>Granny Smith</h1>
 <p>These juicy, green apples make a great filling for
 apple pies.</p>
</section>

HTML5에서 div section article의 차이점
섹션 요소는 문서나 프로그램의 일반적인 섹션을 묘사하는데, 일반적으로 하나의 섹션은 헤드와 콘텐츠 블록을 포함한다.섹션은 하나의 소절이나 탭 페이지의 탭 아래의 박스 블록을 나타낼 수 있습니다.한 페이지에서 introduction, news items,contact information을 대표하는 여러 섹션으로 나눌 수 있습니다.
원소의 내용이 한데 모여 상응하는 뜻을 나타낼 수 있다면article 원소로 정의할 수 있고section 원소를 사용할 필요가 없다.
섹션 요소는 일반적인 용기 요소가 아니기 때문에 원소가 해당하는 스타일이나script 스크립트를 정의해야 한다면div 요소를 사용하는 것을 추천합니다. 섹션의 사용 조건은 이 원소의 내용을 문서의 대강에 명확하게 보여줄 수 있도록 하는 것입니다.
아래의 예 코드는 애플 사이트 페이지의 일부분에서 나온 것으로 코드에는 2개의 짧은 섹션이 포함되어 있다.

<article>
<hgroup>
    <h1>Apples</h1>
    <h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
    <h1>Red Delicious</h1>
    <p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
    <h1>Granny Smith</h1>
    <p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>

섹션에서 h1 요소를 임의로 사용할 수 있으며, 이 섹션이 최고급인지, 2급 또는 3급 요소인지 고려하지 않아도 된다.
다음 코드는 졸업식 페이지로 2개의 섹션을 포함한다. 하나는 졸업할 사람의 명단을 표시하고, 하나는 졸업식을 표시하는 형식이다.

   <!DOCTYPE Html>
   <html>
   <head>
    <title>Graduation Ceremony Summer 2022</title>
   </head>
   <body>
    <h1>Graduation</h1>
    <section>
        <h1>Ceremony</h1>
        <p>Opening Procession</p>
        <p>Speech by Validactorian</p>
        <p>Speech by Class President</p>
        <p>Presentation of Diplomas</p>
        <p>Closing Speech by Headmaster</p>
    </section>
    <section>
        <h1>Graduates</h1>
        <ul>
            <li>Molly Carpenter</li>
            <li>Anastasia Luccio</li>
            <li>Ebenezar McCoy</li>
            <li>Karrin Murphy</li>
            <li>Thomas Raith</li>
            <li>Susan Rodriguez</li>
        </ul>
    </section>
   </body>
   </html>

Graduation Ceremony Summer 2022

Graduation

Ceremony

Opening Procession
Speech by Validactorian
Speech by Class President
Presentation of Diplomas
Closing Speech by Headmaster

Graduates

Molly Carpenter

Anastasia Luccio

Ebenezar McCoy

Karrin Murphy

Thomas Raith

Susan Rodriguez

HTML5 학습노트 간명판(2): 새로운 요소의 섹션,article,aside
섹션의 주요 역할은 헤드링의 상하문을 바꾸는 것이다. 이를 통해 삽입되고, 주로 장과 절 등 디렉터리 구조와 그들의 종속 관계를 나타내는 데 사용된다.
HTML5에서 section article의 차이점은 무엇입니까?header footer nav은 어떻게 이해합니까?
HTML 표준은 다음과 같습니다.
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
의역은 다음과 같다(【】 안에는 나의 주석이다).
섹션 요소는 문서나 응용의 일부분을 나타냅니다.'부분'이란 주제에 따라 그룹을 나누는 내용 구역을 가리키며 보통 제목이 붙는다.[즉 각각의 섹션이 서로 다른 주제에 대응하는 것이다. 주의는 내용 자체의 주제이지 다른 사람이 설정한 구분 기준이 아니다.]
섹션의 예는 책의 장과 절 회목, 다중tab 대화상자의 모든tab 페이지, 논문의 숫자 번호로 된 소절을 포함한다.사이트의 홈페이지는 소개, 최신 내용, 연락처 정보 등section으로 나눌 수 있다.
주의: 웹 페이지 작성자는 섹션 요소가 아닌 article을 사용해야 합니다. 만약 그 내용이 집합 (syndicate) 에 사용된다면.[예를 들어 블로그의 첫 페이지에 있는 모든 블로그. 또 게시판의 1층, 2층, 3층...n층과 같다. 보통 이런 부분의 내용은 형식적으로 유사하지만 출처는 독립적이다.]
주의: 섹션은 일반 용기 요소가 아닙니다.스타일이나 스크립트 처리를 설정하는 데만 사용되는 경우div 요소를 적용합니다.간단한 준칙은 원소의 내용이 문서 대강에 열거될 때만 섹션 원소를 사용하기에 적합하다는 것이다.
HTML5의 섹션을 어떻게 이해합니까?어떤 장면에서 사용하나요?왜 이런 장면들은div가 아니라section을 사용합니까?

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

java 입출력 I/O

스트림(stream) 자바에서 입출력을 수행하려면 두 대상을 연결하고 데이터를 전송할 수 있는 무언가가 필요한데 이것을 스트림(stream)이라고 정의했다. 스트림은 단방향 통신만 가능하기 때문에 하나의 스트림으로 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Section 태그

section

Graduation

Ceremony

Graduates

좋은 웹페이지 즐겨찾기