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

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

HTML5는 일련의 새로운 요소를 제공하며 앞으로 널리 사용될 것입니다. 그러나 23c3de37f2f9ebcb477c4a90aac6fffd 및 2f8332c8dcfd5c7dec030a070bf652c3이라는 두 가지 새로운 요소를 포함하여 사용하기 혼란스러울 수 있는 몇 가지 요소가 있습니다.

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

Section 요소

가장 모호한 요소입니다. e388a4556c0f65e1904146cc1a846bee 요소와 어떻게 다른가요? 단락을 나누기 위해 e388a4556c0f65e1904146cc1a846bee를 사용해왔는데, e388a4556c0f65e1904146cc1a846bee 외에 언제 이 요소를 사용합니까? 이를 설명하기 위해 공식 문서를 인용합니다. WHATWG 문서에 따르면 2f8332c8dcfd5c7dec030a070bf652c3 요소는 다음과 같이 설명됩니다.

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

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

"요소가 스타일이나 스크립트 편의를 위해서만 사용되는 경우 작성자는 e388a4556c0f65e1904146cc1a846bee를 사용하는 것이 좋습니다. 2f8332c8dcfd5c7dec030a070bf652c3 요소는 요소의 콘텐츠가 적합할 때 적합합니다. - WHATWG"

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

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

두 번째로 25edfb22a4f469ecb59f1190150159c6 요소와 유사하게 섹션 요소는 콘텐츠를 나열하는 데 사용됩니다.

실제 예에서 2f8332c8dcfd5c7dec030a070bf652c3 요소를 사용하는 이유는 블로그의 콘텐츠를 구조화하기 위한 것입니다.

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

이것은 단지 예일 뿐이며 2f8332c8dcfd5c7dec030a070bf652c3 다른 목적으로 사용될 수 있습니다.

기사 요소

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

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

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

다음 예에서는 23c3de37f2f9ebcb477c4a90aac6fffd을 사용하여 블로그 기사를 작성하는 방법을 보여줍니다.

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

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

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!