헤더 - 사이드 바를위한 최상의 HTML5 마크 업




section article 차이 (4)

ASIDE는 이후 보조 콘텐츠를 포함하도록 수정되었습니다.

HTML5 Doctor는 훌륭한 글을 여기에 있습니다. http://html5doctor.com/aside-revisited/

발췌 :

새로운 정의를 제쳐 놓고, 그 상황을 인식하는 것이 중요합니다. > 기사 요소 내에서 사용될 때 그 내용은 그 기사와 구체적으로 관련되어야합니다 (예 : 용어집). 기사 요소 외부에서 사용될 경우> 내용은 사이트와 관련되어야합니다 (예 : 블로그 롤, 추가> 탐색 그룹 및 해당 내용이 페이지와 관련된 경우 광고).

https://code.i-harness.com

HTML5 테마에 대한 내 WordPress 사이드 바를 설정하고 있으며 실제로 before_widgetafter_widget 을 사용하고자합니다.

그래서 내 질문은 이것입니다 : 두 마크 업 패턴 중 어느 것이 더 적절합니까? 다음 코드는 모두 <article> 요소 외부에 있습니다.

옵션 1 : 섹션을 제외하고

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

옵션 2 : Divs와 Div

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

나는 보조적인 질문이 각각의 위젯 제목에 어떤 제목을 사용하는지 생각해 봅니다. <section> widget <section> 에 각 위젯을 래핑하면 <h1> 이 가장 적합한 것 같습니다. <aside> 사용하면 확실하지 않습니다.

모든 의견 환영. 악마의 옹호자들은 격려했다.


HTML5 Doctor 다이어그램을 기반으로, 이것이 최고의 마크 업이라고 생각합니다.

<aside class="sidebar">
    <article id="widget_1" class="widget">...</article>
    <article id="widget_2" class="widget">...</article>
    <article id="widget_3" class="widget">...</article>
</aside> <!-- end .sidebar -->

주요 <article> 요소 바깥에 있는 한 <aside> 가 적절한 요소라는 것이 분명하다고 생각합니다.

이제는 <article> 이 제쳐두고 각 위젯에 적절하다고 생각합니다. W3C의 말 :

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


웹 개발자를위한HTML5 지침 : 이 방식으로 제안 된 문서의 구조 및 의미 (옵션 1) :

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

또한 바닥 글의 섹션을 사용할 수 있다고 지적합니다. 그래서 섹션은 실제 페이지 컨텐트 외부에서 사용될 수 있습니다.


우선 ASIDE는 일반 콘텐츠가 아닌 일반 콘텐츠에 관련 콘텐츠를 표시하는 용도로만 사용됩니다. 둘째 , 각 사이드 바에 대해서만 하나씩

각 사이드 바에 대해 단 하나만 따로 보관할 수 있습니다. 사이드 바 요소는 div 또는 섹션의 옆에 있습니다.

나는 옵션 1 과 함께 갈 것이다 : 섹션을 제외하고

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

다음은 https://www.w3.org/wiki/HTML/Elements/aside 의 사양입니다.

머리글 이나 바닥 글 이있는 경우에만 섹션을 다시 사용하십시오. 일반 div





semantic-markup