HTML5 의미 체계 마크업 섹션 및 기사 예제에 대한 자세한 설명

웹페이지 제작 cnn6 기사 소개: 가장 자주 묻는 질문은: 어떤 상황에서 이러한 요소를 사용해야 합니까? 그리고 이러한 요소들을 어떻게 올바르게 사용해야 할까요?

HTML5는 일련의 새로운 요소를 제공하며 앞으로 널리 사용될 것입니다. 그러나

및

이라는 두 가지 새로운 요소를 포함하여 사용하기 혼란스러울 수 있는 몇 가지 요소가 있습니다.

가장 자주 묻는 질문은 다음과 같습니다. 어떤 상황에서 이러한 요소를 사용해야 합니까? 그리고 이러한 요소들을 어떻게 올바르게 사용해야 할까요?

Section 요소

가장 모호한 요소입니다.

요소와 어떻게 다른가요? 단락을 나누기 위해

를 사용해왔는데,

외에 언제 이 요소를 사용합니까? 이를 설명하기 위해 공식 문서를 인용합니다. WHATWG 문서에 따르면

요소는 다음과 같이 설명됩니다.

"

요소는 문서 또는 애플리케이션의 공통 단락을 나타냅니다. WHATWG"

설명에서 < section> 요소의 역할은

와 유사하게 분할하는 것입니다. 하지만 여전히 특별한 경우가 있습니다. 문서에는 다음과 같은 특별한 설명이 추가됩니다.

"요소가 스타일이나 스크립트 편의를 위해서만 사용되는 경우 작성자는

를 사용하는 것이 좋습니다.

요소는 요소의 콘텐츠가 적합할 때 적합합니다. - WHATWG"

이를 바탕으로 다음 두 가지 사항을 요약할 수 있습니다.

첫째, 섹션 요소는 기술적으로 스타일을 지정할 수 있지만 복잡한 스타일이나 스크립트가 있는 경우에는 여전히 사용하는 것이 좋습니다. p 요소.

두 번째로

요소와 유사하게 섹션 요소는 콘텐츠를 나열하는 데 사용됩니다.

실제 예에서

요소를 사용하는 이유는 블로그의 콘텐츠를 구조화하기 위한 것입니다.

<p class="blog">  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
    <section class="post">  
        <h2 class="post-title">Blog Post Title</h2>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
</p>

이것은 단지 예일 뿐이며

다른 목적으로 사용될 수 있습니다.

기사 요소

이름에서 이미 잘 설명되어 있지만 공식 문서에서 어떻게 설명하는지 살펴봐야 합니다.

"문서, 페이지, 애플리케이션 또는 사이트의 독립적인 요소이며 일반적으로 는 게시할 때 개별적으로 재배포하거나 재사용할 수 있습니다. 이는 포럼 게시물, 잡지 또는 뉴스 항목, 블로그 항목, 사용자가 제출한 댓글, 대화형 위젯 또는 위젯 또는 기타 독립 프로젝트의 콘텐츠일 수 있습니다. . "

위 설명에서

요소는 특히 블로그, 페이지 콘텐츠 또는 포럼 게시물과 같이 게시하려는 기사에 사용된다는 결론을 내릴 수 있습니다.

다음 예에서는

을 사용하여 블로그 기사를 작성하는 방법을 보여줍니다.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies   
        halvah gummies danish biscuit applicak   
        cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.  
    </p>  

</article>

또한 필요한 경우

요소를 사용하여 아래 예와 같이 기사를 여러 단락으로 나눌 수도 있습니다.

<article class="post">  
    <header>  
    <h1>This is Blog Post Title</h1>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        <section>  
        <h2>This is the Sub-Heading</h2>  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake   
        tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah   
        gummies danish biscuit applicake gingerbread jelly-o pastry.  
        </section>  

        <section>  
        <h3>This is another Sub-Heading</h3>  
        Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops  
        toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate  
        cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.   
        Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. 
        Powder croissant jelly beans pastry.  
        </section>  
    </p>  

</article>

요약

월드와이드웹의 창시자들과 W3C의 이사들이 예측한 대로, HTML5에 의해 만들어진 모든 새로운 요소들은 웹 구조를 더욱 의미있게 만들기 위한 것입니다. 이러한 요소를 올바르게 적용하는 것은 여전히 ​​웹 개발자와 디자이너 사이에서 논쟁거리입니다.

어떤 경우에도 아이디어를 혼동하지 마세요. 앞서 언급했듯이, 그것이 의미가 있고 그것을 사용하는 구조가 의미가 있다고 생각되면 그것을 사용하십시오.

위 내용은 HTML5 의미 체계 마크업 섹션 및 기사 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!