Programing

섹션 대 기사 HTML5

crosscheck 2020. 5. 23. 10:16
반응형

섹션 대 기사 HTML5


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

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

건배

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

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


각 "섹션"을 호출 할 때 <article>태그와 기사의 항목으로 묶어야 하는 것처럼 <section>들립니다.

HTML5 스펙 (과) 말한다 :

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

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

참고 : 요소의 내용을 신디케이트하는 것이 합리적 일 경우 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다.

그리고 기사

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

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

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

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

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


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

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

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

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

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

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

In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

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

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

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

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

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

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

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

I'd use <article> for a text block that is totally unrelated to the other blocks on the page. <section>, on the other hand, would be a divider to separate a document which have are related to each other.

Now, i'm not sure what you have in your videos, newsfeed etc, but here's an example (there's no REAL right or wrong, just a guideline of how I use these tags):

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

As you can see, the sections are still relevant to each other, but as long as they're inside a block that groups them. Sections DONT have to be inside articles. They can be in the body of a document, but i use sections in the body, when the whole document is one article.

e.g.

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

Hope this makes sense.


I like to stick with the standard meaning of the words used: An article would apply to, well, articles. I would define blog posts, documents, and news articles as articles. Sections on the other hand, would refer to layout/ux items: sidebar, header, footer would be sections. However this is all my own personal interpretation -- as you pointed out, the specification for these elements are not well defined.

Supporting this, the w3c defines an article element as a section of content that can independently stand on its own. A blog post could stand on it's own as a valuable and consumable item of content. However, a header would not.

Here is an interesting article about one mans madness in trying to differenciate between the two new elements. The basic point of the article, that I also feel is correct, is to try and use what ever element you feel best actually represents what it contains.

What’s more problematic is that article and section are so very similar. All that separates them is the word “self-contained”. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It’s up to you to decide which element is the most semantically appropriate in any given situation.

Here is a very good answer to the same question here on SO


Section

  • Use this for defining a section of your layout. It could be mid,left,right ,etc..
  • This has a meaning of connection with some other element, put simply, it's DEPENDENT.

Article

  • Use this where you have independent content which make sense on its own .

  • Article has its own complete meaning.


A section is basically a wrapper for h1 (or other h tags) and the content that corresponds to this. An article is essentially a document within your document that is repeated or paginated...like each blog post on your document can be an article, or each comment on your document can be an article.


The flowchart below can be of help when choosing one of the various semantic HTML5 elements: 여기에 이미지 설명을 입력하십시오


also, for syndicated content "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."


My interpretation is: I think of YouTube it has a comment-section, and inside the comment-section there are multiple articles (in this case comments).

So a section is like a div-container that holds articles.


Article and Section are both semantic elements of HTML5. Section is block level generic section of a webpage, but relevant to our webpage content. Article is also block level, but article refers to an individual blog post, a comment, of a webpage.

Both Article and Section should include an heading elements h2-h6.

참고URL : https://stackoverflow.com/questions/7549561/section-vs-article-html5

반응형