섹션 대 기사 HTML5

201

비디오, 뉴스 피드 등과 같은 다양한 "섹션"으로 구성된 페이지가 있습니다. HTML5로이를 표현하는 방법이 약간 혼란 스럽습니다. 현재 HTML5로 가지고 <section>있지만 추가 검사에서 더 정확한 태그가 보입니다 <article>. 아무도 나를 위해 이것에 대해 약간의 빛을 비출 수 있습니까?

이러한 것들은 단어의 진정한 의미에서 블로그 게시물이나 "문서"가 아니므로 적용 할 요소를 찾기가 어렵습니다.

건배

편집 : article태그가 내 "섹션"이라고 생각하는 관련없는 요소에 대한 컨테이너 태그 인 것처럼 보이기 때문에 태그 를 사용하기로 선택했습니다 . 그러나 실제 태그 이름 기사는 다소 오해의 소지가 있지만 HTML5가 웹 응용 프로그램에 대해 더 많이 고려되어 개발되었다고 말하지만 많은 태그가 블로그 중심 / 문서 기반이라는 것을 알았습니다.

어쨌든 귀하의 답변에 대한 감사는 상당히 주관적인 것으로 보입니다.

html markup

— 제임스 헤이
소스

5

정말 중요하지 않습니다. 말이되는 것을 사용하십시오. 개인적으로 내가 사용하는 것 section의

— 일리아 Choly

@illia choly : 동의합니다. 옳고 그름은 없습니다.

— Shirgill Farhan

1

예 MDN을

— randominstanceOfLivingThing

143

에서 구조화 HTML5에 대한 W3 위키 페이지 , 그것은 말합니다 :

<section>: 다른 기사를 다른 목적이나 주제로 그룹화하거나 단일 기사의 다른 섹션을 정의하는 데 사용됩니다.

그런 다음 정리 한 이미지 를 표시 합니다.

여기에 이미지 설명을 입력하십시오

또한 <article>태그 를 사용하는 방법을 설명합니다 (위의 동일한 W3 링크에서).

<article>에 관련되어 <section>있지만 분명히 다릅니다. <section>콘텐츠 또는 기능의 개별 섹션을 그룹화 하는 반면 <article>개별 블로그 게시물, 비디오, 이미지 또는 뉴스 항목과 같은 개별 독립형 콘텐츠를 포함하기위한 것입니다. 이 방법으로 생각하십시오-당신이 각각 독자적으로 읽을 수 있고 RSS 피드에서 별도의 항목으로 신디케이트하는 것이 합리적 일 수있는 많은 컨텐트 아이템을 가지고 있다면, <article>마크 업에 적합합니다.

이 예에서는 <section id="main">블로그 항목을 포함합니다. 각 블로그 항목은 RSS 피드의 항목으로 신디케이트하기에 적합하며 컨텍스트를 벗어나 독자적으로 읽을 때 의미가 있으므로 <article>다음과 같이하십시오.

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

허? 기사 내에 섹션을 중첩시킬 수도 있습니다. 예를 들어, 이러한 블로그 게시물 각각에 고유 한 섹션의 일관된 구조가있는 경우 기사 내에 섹션을 넣을 수도 있습니다. 다음과 같이 보일 수 있습니다.

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

— 저스틴
소스

13

또한 <main>을 사용하여 머리글과 바닥 글 사이의 요소를 래핑 할 수 있습니다 (이미지의 파란색 블록). <그림>은 기사 또는 섹션 내에 이미지를 래핑합니다.

— 논리 유닛

2

잘 했어. 이것이 정답입니다. 나는 당신이 추가 해야하는 논리 단위에 동의합니다 main.

— Chuck Le Butt

1

기사의 섹션으로 그림을 업데이트해야합니다.

— K-SO의 독성이 증가하고 있습니다.

나는 기사와 섹션 사이의이 전쟁이 혼란 때문에 지금 갈 것 같은 느낌이 든다. 그러나 Justin Im 100 %는 기사로 섹션을 섹션으로 사용하는 경우 기사가 독립 실행 형 독립 문서 인 문서 (및 그 섹션)에있는 문서의 일부 (표시된대로)에 적용됩니다. 의미 적으로 "섹션"이라는 용어는 이전 div 섹션을 대체하는 것으로 더 의미가 있습니다. 잘 했어!

— Stokely

1

<section>보다 더 구체적인 것이 필요한 경우 <article> 안에 <header>와 <footer>를 사용할 수도 있습니다.

— Ric

130

각 "섹션"을 호출 할 때 <article>태그로 기사의 항목과 태그 로 래핑해야 <section>합니다.

HTML5 스펙 (과) 말한다 :

section 요소는 문서 또는 응용 프로그램의 일반 섹션을 나타냅니다. 이와 관련하여 섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹입니다. [...]

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

참고 : 작성자는 요소의 내용을 신디케이트하는 것이 적절한 경우 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다.

그리고 기사

기사 요소는 문서, 페이지, 응용 프로그램 또는 사이트에서 자체 포함 된 구성을 나타내며, 원칙적으로 신디케이션에서 독립적으로 배포 가능하거나 재사용 가능합니다. 포럼 게시물, 잡지 또는 신문 기사, 블로그 항목, 사용자가 제출 한 의견, 대화 형 위젯 또는 가젯 또는 기타 독립적 인 컨텐츠 항목 일 수 있습니다.

나는 OP에서 "섹션"이라고 부르는 것이 독립적으로 배포 가능하거나 재사용 가능한 기사의 정의에 적합하다고 생각합니다 .

업데이트 : HTML 5.1 용 최신 편집기 초안article 에서 일부 사소한 텍스트 변경 사항 (이탤릭체 변경) :

아티클 요소는 문서, 페이지, 애플리케이션 또는 사이트 에서 완전하거나 독립적 인 구성을 나타내며 , 원칙적으로 신디케이션에서 독립적으로 배포 가능하거나 재사용 가능합니다. 포럼 게시물, 잡지 또는 신문 기사, 블로그 항목, 사용자가 제출 한 의견, 대화 형 위젯 또는 가젯 또는 기타 독립적 인 컨텐츠 항목 일 수 있습니다.

또한, 대한 공공 HTML 메일 링리스트에 대한 토론 article에서 1월 및 년 2 월 2013 년.

— 스티브 락스
소스

17

웹에서 검색하는 동안 나는 법률 문서를 발견했습니다 Article 1, Section 2, Clause 3. 나는 그것이 논리를 기억하는 데 도움이되기를 바랍니다.

— commonpike

3

어느 정도 동의하지 않지만 상황에 따라 전환 될 수 있다고 생각합니다. 사양 설명을 읽으면 article"위젯 (widget)"으로 작동 할 경우 다른 방법이어야한다는 것을 알 수 있습니다 . section: "테마 그룹화"및 "문서 섹션". article: "독립형"및 "위젯". 같은 홈페이지의 예를 고려 codepen.io/anon/pen/iDEwf

— daleyjem

2

단일 포럼 게시물이 기사 를 작성한다고 말하는 이유는 무엇 입니까? 나머지 스레드 imho가 없으면 포럼 게시물이 완료되지 않습니다.

— masterxilo 2016 년

7

이것은 거꾸로입니다. W3C section는 콘텐츠를 주제별로 그룹화하고 article독립형 요소 (즉, 테마로 그룹화 할 수 있음)라고 명시하고 있습니다. 신문처럼 생각하십시오 : 각 섹션에 많은 기사가 있습니다. 예를 들어 엔터테인먼트 섹션의 영화 리뷰 기사.

— 척 레 버트

3

@Chuck에 동의합니다. 내 책 에서이 답변은 완전히 거꾸로되어 있습니다. 저스틴의 대답 은 더 적합합니다. 그러나 아, 스펙은 해석의 여지가 많다고 생각합니다. 이것이 나쁜지 좋은지 확실하지 않습니다.

— maryisdead

39

<article>페이지의 다른 블록과 전혀 관련이없는 텍스트 블록에 사용 합니다. <section>반면에 서로 관련된 문서를 분리하기위한 분배기가됩니다.

이제는 비디오, 뉴스 피드 등에 무엇을 가지고 있는지 잘 모르지만 여기에 예가 있습니다 (정확하거나 잘못된 것이 없으며이 태그를 사용하는 방법에 대한 지침 만 있음).

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

보시다시피, 섹션은 여전히 서로 관련이 있지만 그룹을 구성하는 블록 내에있는 한 섹션이 다릅니다. 섹션은 기사 내부에 있어야합니다. 그들은 문서의 본문에있을 수 있지만 전체 문서가 하나의 기사 일 때 본문의 섹션을 사용합니다.

예 :

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

이것이 의미가 있기를 바랍니다.

— mnsr
소스

5

I'd use <article> for a text block that is totally unrelated to the other blocks on the page.나는 당신이 2011 년에 이것을 다시 썼다는 것을 알고 있지만, 이것이 <aside>태그의 것이 아닙니까?

— MyDaftQuestions

19

나는 사용 된 단어의 표준 의미를 고수하고 싶다 : article기사에 적용될 것이다. 블로그 게시물, 문서 및 뉴스 기사를로 정의 articles합니다. 반면 섹션은 레이아웃 / UX 항목을 참조합니다. 사이드 바, 머리글, 바닥 글은 섹션이됩니다. 그러나 이것은 모두 내 개인적인 해석입니다. 지적했듯이 이러한 요소의 사양은 잘 정의되어 있지 않습니다.

이를 지원하기 위해 w3c 는 article요소를 독립적으로 독립적 인 컨텐츠 섹션으로 정의합니다 . 블로그 게시물은 가치 있고 소비 가능한 콘텐츠 항목으로 독자적으로 설 수 있습니다. 그러나 헤더는 그렇지 않습니다.

다음 은 두 가지 새로운 요소를 구별하려는 한 사람의 광기에 관한 흥미로운 기사입니다. 내가 생각하기에이 기사의 기본 요점은 당신이 가장 느끼는 요소가 실제로 포함 된 것을 나타내는 것을 시도하고 사용하는 것입니다.

더 문제가되는 것은 기사와 섹션이 매우 유사하다는 것입니다. 그것들을 분리하는 것은“자족”이라는 단어입니다. 단단하고 빠른 규칙이있는 경우 사용할 요소를 결정하는 것이 쉽습니다. 대신 해석의 문제입니다. 섹션 내에 여러 기사를 가질 수 있고 섹션 내에 여러 섹션을 가질 수 있으며 섹션 내에 섹션과 기사를 중첩 할 수 있습니다. 어떤 상황에서 어떤 요소가 의미 적으로 가장 적합한 지 결정하는 것은 사용자의 책임입니다.

여기 에 같은 질문에 대한 좋은 답변이 있습니다.

— 마이클 재스퍼
소스

8

아래의 순서도는 다양한 시맨틱 HTML5 요소 중 하나를 선택할 때 도움이 될 수 있습니다.

— 현명한 선장
소스

5

부분

이것을 사용하여 레이아웃 섹션을 정의하십시오. 그것은 수 mid, left, right , 등
이것은 다른 요소와의 연결이라는 의미를 가지고 있습니다. 간단히 말하면 종속입니다.

조

독자적인 콘텐츠가있는 곳에서 사용하십시오.
기사는 그 자체의 완전한 의미를 갖습니다.

— 아난드 싱
소스

3

섹션은 기본적으로 래퍼 h1(또는 다른 h태그)와 이에 해당하는 내용에 대한 래퍼입니다 . 은 article기본적으로 문서의 각 블로그 포스트는 기사가 될 수 있으며, 문서의 각 댓글이 기사가 될 수처럼 ... 반복되거나 페이지 매김 문서 내에서 문서입니다.

— 닉 매닝
소스

1

또한 신디케이트 된 컨텐츠의 경우 "요소의 컨텐츠를 신디케이트해야하는 경우 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다."

— 앨버트
소스

0

내 해석은 : YouTube에 의견 섹션이 있고 의견 섹션 안에 여러 기사 (이 경우 의견)가 있다고 생각합니다.

따라서 섹션은 기사를 포함하는 div 컨테이너와 같습니다.

— userX
소스

-2

기사와 섹션은 HTML5의 의미 요소입니다. 섹션은 웹 페이지의 블록 수준 일반 섹션이지만 웹 페이지 콘텐츠와 관련이 있습니다. 기사는 블록 수준이지만 기사는 웹 페이지의 개별 블로그 게시물, 의견을 나타냅니다.

기사와 섹션 모두 제목 요소 h2-h6을 포함해야합니다.

블로그 게시물의 경우 기사 및 섹션에 다음 구문을 사용하십시오.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>

— 아비 나쉬 말호 트라
소스