11
Searching, I found some questions related to HTML5 tags:
But I still can not understand what the difference between them, in the various contents I read, I found article within section and vice versa, only article or just section, article inside article, This is a little confusing for me
11
I will make my considerations about <section> and <article> based on some sources where I will take part of the content.
SECTION
The HTML element <section> represents a generic section contained in an HTML document, usually with a title, when there is no more specific semantic element to represent it.
Usage notes
<section> should be identified, usually including a heading (element <h1>-<h6>) as a child of the element <section>.<article> in his stead.<section> as a container generic; for that purpose <div> serves, especially when the section is for styling purposes only. A rule of thumb is when a section should logically appear in the structure of a document.Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
You can use a Section to define areas or regions for:
Introductory texts
Listings
Maps
Commentary
Contact information
Etc....
ARTICLE
The HTML Article Element (<article>) represents an independent composition in a document, page, application, or website, or which is intended to be distributed independently or reusable, for example in syndication. This could be a forum post, a magazine or newspaper article, a blog post, a comment sent by a user, a gadget or widget interactive, or any other form of independent content.
Usage notes
<article> is nested, the inner element represents an item related to the outer element. For example, blog post comments can be elements <article> nestled in <article> representing the blog post.<article> can be provided through the <address>, but it does not apply to <article> nested.<article> can be described using the attribute pubdate of a single element <time>.Usually you use a heading within the article and tb may be advisable to use a footer also.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
You can use a Section to define areas or regions for:
Lamppost in Foruns
Blog Entries
Articles
Etc...
What is observed is that you can separate for example a set of articles in a section, and in each of these articles you may have other sections inside. That’s why I think you got a little confused. Different from the element <main> for example, that it is not advisable to have more than one per document, or set it within a article. Source
Structure model built with semantic tags:
Example of "nonsemantic structure" verses "semantic structure"
Source: https://www.vikingcodeschool.com/html5-and-css3/html5-semantic-tags
OBS: According to this article on Estruturas Semaânticas and Mozilla Accessibility
There are currently no known implementations of the structure algorithm in graphical browsers or
user agentsof assistive technology, although the algorithm is implemented in other software as in compliance checkers. Thus, the structure algorithm cannot be trusted to deliver the document structure to users. Authors are advised to use header levels (H1-H6) to transmit the document structure.
Source: https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document
Article I recommend reading: https://internetingishard.com/html-and-css/semantic-html/
Practical example
In this example will be at the discretion of the team define the scope and understanding of how it should be interpreted semantically "Mission, Vision and Values". If each part works alone or if the message only works together.
If you understand that the "Mission, Vision and Values" belong to the same context, and it would not make sense, for example, to use only the Values insolate form in other parts of the site, I suggest you use a article mounted as below:
<article>
<h2>Missão, Visão e Valores</h2>
<section>
<h3>Missão</h3>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h3>Visão</h3>
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section>
<h3>Valores</h3>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</article>Already if you believe that it is fully possible to use only the Mission in a certain part of the page and that even insolada it would pass the message properly and does not depend on Vision and Values you can separate "Mission, Vision and Values" into articles within a section, for the article works independently without depending on the rest of the content around.
<section>
<h2>Missão, Visão e Valores</h2>
<article>
<h3>Missão</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article>
<h3>Visão</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
<article>
<h3>Valores</h3>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</section>Very good answer, just to see if I understand... I’m updating a single-page static site based on <div>, in it there are some <article>, as "Who we are", "Mission, vision and values" and "Contact", in the second there are 3 <section> ("Mission", "Vision" and "Values"), I’m sure?
@Guilhermecostamilam see that you can have a Section with an H2 called "Mission Vision and Values" and within this Section you can have an Article for H3 Mission, an Article for H3 Vision, etc... I believe that you can use for example only Article H3 Values, in other parts of the site, without needing the Vision and Mission for example. So I see this content as independent. But if you think they are "inseparable" Ai it would be better to start with an Article, and within it make a Section for each Mission, Vision and Values, since they may not make sense to you if used separately.
Personally, I see no sense in any of the three isolated, without the other two, not that it is incomprehensible, but greatly diminishes its meaning, so the use of the <section>. In this case, each of the three, with a title and a paragraph, without a parent title "Mission Vision and Values", as the three together can be separated from the rest of the content without losing meaning, I imagined putting in a <article>. Thanks for the help, in the end the use of each is a little subjective, since it goes from the interpretation of each one how dependent that element is of its context
@Exact Guilhermecostamilam, this is a slightly more particular case... Note the Practical Example which I have just posted in the edition of my reply. I address precisely this
One last question, the article must be independent of the other elements of the page or the context it is in (aside, main, section or another article)? Because in the case of the second option "Mission", "Vision" and "Values" would be article inside article (following the idea of their first practical example)
@Guilhermecostamilam theoretically you can have an article as the son of another article, but I believe that even you can in this case you should not... If you said and intended to use it as a "single block" there is no pq have other Articles inside. In your case I suggest you use the first example, article > sections with mission vision values, since it will not separate them and will always be within the same article.
Okay, so the article must be independent of the other elements of the page (body) and not the context in which it is, right?
@Guilhermecostamilam what I mean is that you also have to have a coherence with its content. You should not use content in one place as an article and then use it at another time as a Section. Nav Main Aside etc each has its function and its particularities you can use an article with Mission etc... Inside Main and then repeat this Article with Mission etc... in an Aside. You just shouldn’t use it every hour in a way, or build it as an article and then want to fragment the pieces of it into sections in the footer for example. Body is part of the document structure, not the content
3
Both serve to mark code blocks, to simply separate things, or to use a differentiated formatting.
Before the HTML5, there was only the tag div with this more generic purpose of separating things, so everything was separated in the layout by Divs, menus, navigation, links sections, footers, headers, etc.
The HTML5 introduced tags semantics, that is, that has more a function to help in the understanding and interpretation of the layout than properly a design function, as table and h1 for example.
Tags like header, footer, section and article has this function: mark what is each thing separately in the layout of the html. When you look at a structure like this:
<header>
<nav>
</nav>
</header>
<section>
</section>
<section>
</section>
<footer>
</footer>
You easily identify that there is a header with a navigation bar on it, two distinct sessions, and at the end a footer.
This could be done only with div, but imagine the confusion that would be to quickly identify what makes each part in the layout?
Therefore semantics is important, tags do not have a special behavior, but mark well as the layout, hence the difference enter use a section for example and simply a div.
Taking advantage, a great reading on Anderson semantics Carlos Woss: What is HTML Outline (HTML Outlines)?
EDIT to reply to the comment, I will use the settings of Mozilla:
The HTML Article Element (
<article>) represents a composition independent in a document, page, application, or website, or that is intended to be distributed independently or reusable, by example, in syndication. This could be a forum post, an article magazine or newspaper, a blog post, a comment sent by a user, an interactive gadget or widget, or any other form of independent content.
The HTML element
<section>represents a generic section contained in an HTML document, usually with a title, when there is no more specific semantic element to represent it.For example, a navigation menu must be inside an element
<nav>, but a list of search results or the display of a map and its controls have no specific elements, and can be placed within a<section>.
The site tableless.com.br brings a simplified but interesting definition:
ARTICLE Define the area where there is an article, text, writing, content and etc...
SECTION Define a block or a group of a specific subject. It is important to understand that Section groups several elements that have relationship with each other. For example, if there is an area on the site that there are links, content, images and etc of a common subject, you will group these elements with a Section. In this case, it came in place of that div we used to divide large blocks of subjects in common.
About this semantics you quoted, I talked a little bit about What is HTML Outline (HTML Outlines)? It will probably be of interest to anyone who reads your answer.
very good even @Andersoncarloswoss, includes in the answer!
Yeah, but what’s the difference between section and article? I understand the question of what semantics are, and meaning of other tags, for example,header, footer and aside. The doubt is exclusively between the use and meaning of the section and article, in which situation use one or the other?
@Guilhermecostamilam, added to the text of the question
0
Yes, both the <section> like the <article> it seems that they are the same thing and that it makes use of one or the other, but it is not quite so.
Summary: <section> by itself just has no meaning, already <article> should be used to represent elements that are independent and self-explanatory.
•Section: The specification states that it is a block of generic semantic content, i.e.: it does not have an explicit meaning and you should use it if there are no other semantic elements that best describe the content in question. The key point here is that, what will give the meaning to the <section> is a title that is inside it (scroll attribute values too).
Ex.:
<section>
<h2>Comentários da página</h2>
</section>
In this case, the title is giving meaning to that <section>. It is also worth making it clear that, if by chance in <section> that you are using does not have a title within it, very possibly this means that you are using the <section> wrong way, and it would be more appropriate for example to use a <div>.
Ex.:
<section>
<button>curtir</button>
<button>não curtir</button>
<button>salvar</button>
</section>
In this case until it is correct (for no more semantic element could be used here), but it would be more appropriate to use <div>, especially if you just want to use the element just to stylize, where if you just want to use a wrapper to style in any case you use <section>.
•article: It is basically an independent element, which has no direct relation to the rest of the page and that even if its content were treated independently it would continue to make sense, because its content has no right relation to the page. It is ideal to be used for example to wrap the content within an article (since it is independent of the rest of the page), either as the comments of the page (since they are independent and can be reused separately), or even a product card, an advertisement, a video card too (Youtube videos)... And so it goes. In this case it’s also legal to have a title within , but it’s not mandatory. If you have a <article> inside one another <article> implies that the nested element has a direct relationship with its <article> father, this being useful to involve semantically the comments of an article.
Ex.:
<article>
<header>
<h1>Como Ter dinheiro</h1>
<p>Henrique Barbosa</p>
</header>
<p>Basta ser rico KKK</p>
<section>
<h2>Comentários</h2>
<article id="comment-1">
<header>
<p>Adriano Gomes</p>
</header>
<p>Mds cara esse artigo foi uma merdaKKKKKK</p>
</article>
</section>
</article>
OBS: Realize that the <article> main represents the article as a whole, and the articles within it represent the comments, because the comments have a direct relationship with the article.
OBS2: If you look deep inside each <article> has a <header>. This header basically serves to give more information about the <article>. You could use a <footer> also.
OBS3: Also notice that I used a </section> within the <article>. That’s normal, 'cause like I said:
it is a block of generic semantically contentThat is, you give whatever meaning you want to him, especially in this case here that I made it clear that it represents the comments section of the article. You can also use an Adress inside the article to tell where you can find the author of that article, but putting the Adress inside an article that’s nested inside another article doesn’t work.
Browser other questions tagged html html5 semantics
You are not signed in. Login or sign up in order to post.
A basic rule: if I extract this element from its context, will it still make sense? If so, everything indicates that it is a
<article>, if not, it may be a<section>. A chapter of a book, for example, would lose its meaning, as it is strongly associated with the context of the rest of the story - it would be a<section>; a blog post is usually independent of other posts and makes sense even outside the context of the site - it would be a<article>.– Woss