When to Use Section and Article in Html

But the separator is purely decorative, so Leonie couldn`t tell where the summary ends and the article begins. She proposed a solution: we wrapped the summary into a

single element: “But,” another friend intervened in the conversation, “now browsers display different font sizes depending on the depth of

nesting in s

,” and we proved it. Madness! Both tags are semantic tags in HTML 5. This article explains the behavior of the

and tag.

Tags and tags are represented similarly, but used for a specific meaning, that meaning is for browsers and developers. The two tags can replace each other because there are no changes in the outputs, but it will be difficult for developers and browsers to understand how to respond to this content. The second is known as semantic information or simply semantics. It conveys “meanings” in the document, that is, the purpose of each element and the relationship between them. In this sense, the specification would say that an element “represents” something. So if you see “represented” in the specification, the semantic information embedded in the element follows. If necessary, your sections and articles can contain other bundled content.

For example, you can use a header for your section header or a footer to get information about a section, such as links to related documents, and so on. If desired, the “Further reading” section of this article could be wrapped in a footer. In terms of navigation, Narrator users can`t access an article because it`s imperceptible. NVDA users who have enabled the item publishing option cannot access an article. There is no shortcut for this. It is only announced when it occurs while browsing the page. JAWS has a special shortcut to navigate one-page posts by pressing the O button. VoiceOver users can jump over articles using the keyboard shortcut (VO+Shift+Left/Right Arrow). Looks like you should include each of the “sections” (as you call them) in the tags

and entries in the article within the

tags. While some users would be notified of the presence of an article, others would not. The experience is therefore not uniform.

I was also wondering if there was any practical utility for advertising an article. I don`t know if when I heard the ad that I was “in the article” on a web page, I would interpret it as “in independent, redistributable, standalone content.” It seems more like I`m in a “written work”. I don`t have the ability to test this anyway, so it`s really just my own thinking.

The element defines a section in a document. A few days ago, I was talking to friends, one of whom asked me about the difference between


in HTML. This is one of the eternal secrets of web development, up there with “Why is it white space: nowrap, not white space: no-wrap?” and “Why CSS `gray` a darker color than `dark gray`?”. A conversation I had on Twitter led me to research this issue and eventually write about it. It was a conversation with Grace Snow in which I shared an approach to HTML writing that I love to use. I like to write my HTML structure (boxes) first and without content to make sure I don`t think about style when writing my HTML. She then discovered that I could use the elements of the section and article in problematic ways in my sincere attempt to be semantic. Unfortunately, no browser implements HTML5 description, so it makes no sense of


At one point, the JAWS screen reader tried to implement the document outline algorithm (in IE but not in Firefox) but implemented it poorly. It seems that browser developers are simply not interested (more dirty details in the section More literature for real anoraks). Let`s take another look at Twitter, a web application for using the aria-labelledby technique. Take a look at the developer tools, especially the section with your timeline. You will see an aria-labelledby=”accessible-list-9″ attribute in the opening tag of the section. It refers to the h1 element just below, which has an id=”accessible-list-9″ and text content titled “Your Home Timeline”. Now, screen reader users can use their screen reader`s orientation navigation menu and navigate to “Your Personal Timeline Region.” Examples where

the element can be used: Unfortunately, I was not able to reproduce this behavior directly. When you access VoiceOver with the link through articles, only “Article, article, article” is announced. It doesn`t seem they implemented the feature to allow users to navigate the hierarchy of nested articles, or I couldn`t get it to work. Even when content is extremely short, thinking about how we group content helps create better content. During a recent knowledge-sharing webinar on content design and accessibility, Amanda Diamond shared this slide that shows how a very short block of content can be broken down to make it easier to read.

Laat uw bijzondere bijeenkomst livestreamen en/of vastleggen in beeld en geluid. Voor uw dierbaren op afstand en voor de herinnering later.


Wij zijn het snelst te bereiken via telefoon. Voor vragen of boekingen, bel of WhatsApp naar: 06-22395937