사이드 바를위한 최고의 HTML5 마크 업
HTML5 테마에 대한 WordPress 사이드 바를 설정하고 있으며 실제로 사용 before_widget하고 싶습니다 after_widget.
그래서 내 질문은 이것이다 : 두 마크 업 패턴 중 어느 것이 더 적절한가? 다음 코드는 모두 완전히 <article>요소 외부에 있습니다.
옵션 1 : 섹션 제외
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
옵션 2 : Asides와 Div
<div id="sidebar">
<aside id="widget_1"></aside>
<aside id="widget_1"></aside >
<aside id="widget_1"></aside >
</div>
보조 질문은 각 위젯 제목에 사용할 제목이라고 가정합니다. 각 위젯을 <section>다음으로 감싸면 <h1>가장 적절 해 보입니다. 를 사용하면 <aside>확실하지 않습니다.
모든 의견을 환영합니다. 악마의 옹호자들은 격려했습니다.
우선 ASIDE는 일반 사이드 바가 아닌 기본 콘텐츠에 관련된 콘텐츠를 표시하는 데만 사용됩니다. 둘째 , 각 사이드 바에 대해 하나씩
각 사이드 바에 대해 하나만 따로 있습니다. 사이드 바의 요소는 옆에있는 div 또는 섹션입니다.
나는 갈 것이다 옵션 1 : 제외 섹션으로
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
사양은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside입니다.
다시 섹션은 머리글 이나 바닥 글 이있는 경우에만 사용하고 그렇지 않으면 일반 div를 사용하십시오.
업데이트 17/07/27 : 가장 많은 투표를받은 답변이므로 현재 정보를 로컬로 포함하도록 업데이트해야합니다 (참조 링크 포함).
사양에서 [1] :
aside 요소는 부모 섹션 콘텐츠의 콘텐츠와 접선 적으로 관련되고 해당 콘텐츠와는 별개로 간주 될 수있는 콘텐츠로 구성된 페이지의 섹션을 나타냅니다. 이러한 섹션은 종종 인쇄 된 타이포그래피에서 사이드 바로 표시됩니다.
큰! 정확히 우리가 찾고있는 것. 또한 확인하는 것이 가장 좋습니다 <section>.
섹션 요소는 문서 또는 애플리케이션의 일반 섹션을 나타냅니다. 이 맥락에서 섹션은 콘텐츠의 주제별 그룹입니다. 각 섹션은 일반적으로 섹션 요소의 하위 항목으로 제목 (h1-h6 요소)을 포함하여 식별되어야합니다.
...
일반적인 규칙은 섹션 요소는 요소의 내용이 문서의 개요에 명시 적으로 나열되는 경우에만 적절하다는 것입니다.
우수한. 우리가 찾고있는 것. "독립형"콘텐츠를위한 <article> [2] 와는 반대로 <section>독립형이 아니거나 <div>요소에 대해 충분히 일반적인 관련 콘텐츠를 허용합니다 .
따라서 사양은 옵션 1 <aside>을 <section>어린이 와 함께 사용하는 것이 가장 좋은 방법 이라고 제안하는 것 같습니다 .
참고 문헌
- https://www.w3.org/TR/html51/sections.html#the-aside-element
- https://www.w3.org/TR/html51/sections.html#elementdef-article
- http://html5doctor.com/aside-revisited/
에 대한 HTML5 사양aside 의 다음 예를 살펴보세요 .
현재 권장되는 사항 (2012 년 10 월)은 aside요소 내부에 위젯을 그룹화하는 것임을 분명히합니다 . 그런 다음 각 위젯은 가장 잘 나타내는 것, a nav, 일련 번호 blockquotes등입니다.
다음 발췌문은 블로그의 블로그 롤 및 기타 측면 콘텐츠에 aside를 사용하는 방법을 보여줍니다.
<body> <header> <h1>My wonderful blog</h1> <p>My tagline</p> </header> <aside> <!-- this aside contains two sections that are tangentially related to the page, namely, links to other blogs, and links to blog posts from this blog --> <nav> <h1>My blogroll</h1> <ul> <li><a href="http://blog.example.com/">Example Blog</a> </ul> </nav> <nav> <h1>Archives</h1> <ol reversed> <li><a href="/last-post">My last post</a> <li><a href="/first-post">My first post</a> </ol> </nav> </aside> <aside> <!-- this aside is tangentially related to the page also, it contains twitter messages from the blog author --> <h1>Twitter Feed</h1> <blockquote cite="http://twitter.example.net/t31351234"> I'm on vacation, writing my blog. </blockquote> <blockquote cite="http://twitter.example.net/t31219752"> I'm going to go on vacation soon. </blockquote> </aside> <article> <!-- this is a blog post --> <h1>My last post</h1> <p>This is my last post.</p> <footer> <p><a href="/last-post" rel=bookmark>Permalink</a> </footer> </article> <article> <!-- this is also a blog post --> <h1>My first post</h1> <p>This is my first post.</p> <aside> <!-- this aside is about the blog post, since it's inside the <article> element; it would be wrong, for instance, to put the blogroll here, since the blogroll isn't really related to this post specifically, only to the page as a whole --> <h1>Posting</h1> <p>While I'm thinking about it, I wanted to say something about posting. Posting is fun!</p> </aside> <footer> <p><a href="/first-post" rel=bookmark>Permalink</a> </footer> </article> <footer> <nav> <a href="/archives">Archives</a> — <a href="/about">About me</a> — <a href="/copyright">Copyright</a> </nav> </footer> </body>
이 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 -->
나는 그것이 주 요소 밖에 있는 한 <aside>그것이 적절한 요소 라는 것이 분명하다고 생각합니다 .<article>
이제는 <article>옆에있는 각 위젯에도 적절하다고 생각합니다 . 에서 는 W3C의 말 :
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
The book HTML5 Guidelines for Web Developers: Structure and Semantics for Documents suggested this way (option 1):
<aside id="sidebar">
<section id="widget_1"></section>
<section id="widget_2"></section>
<section id="widget_3"></section>
</aside>
It also points out that you can use sections in the footer. So section can be used outside of the actual page content.
The ASIDE has since been modified to include secondary content as well.
HTML5 Doctor has a great writeup on it here: http://html5doctor.com/aside-revisited/
Excerpt:
With the new definition of aside, it’s crucial to remain aware of its context. >When used within an article element, the contents should be specifically related >to that article (e.g., a glossary). When used outside of an article element, the >contents should be related to the site (e.g., a blogroll, groups of additional >navigation, and even advertising if that content is related to the page).
참고URL : https://stackoverflow.com/questions/8407805/best-html5-markup-for-sidebar
'IT박스' 카테고리의 다른 글
| C에서 문자열과 정수를 연결하는 방법은 무엇입니까? (0) | 2020.11.28 |
|---|---|
| 목표 C : NSString에서 NSMutableString 변환 (0) | 2020.11.28 |
| 빨리 감기 병합 실행 취소 (0) | 2020.11.28 |
| 특정 종속성이있는 gem을 어떻게 알 수 있습니까? (0) | 2020.11.28 |
| MVC5, WebAPI2 및 AutoFac이 작동하지 않습니다. (0) | 2020.11.28 |