Section, Article, Or Div? And Smaller Text In A Section And Article Tag?
Solution 1:
When to use section:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Helpful rules of thumb from Html5doctor:
- Don’t use it just as hook for styling or scripting; that’s a
div - Don’t use it if
article,asideornavis more appropriate - Don't use it unless there is naturally a heading at the start of the section
- Use
articleinstead for syndicated content
When to use article:
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be 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
Use div when no other element can semantically describe it better, or you need a semantically meaningless hook for styling.
The reason the h1s look different is because individual browsers render them differently. You can normalize things across browsers, and deal with default browser style sheets with a css reset.
Solution 2:
This is pre-defined in browsers. When I inspect one of the small h1 tags in Chrome, I get the following style sheet that is hard-coded into the browser ("User agent style sheet"):
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
Whereas the normal predefined style sheet for h1 looks like this:
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
This means that browsers have their own presets regarding what h1 elements (and probably the other h elements as well) should look like inside one of article, aside, etc.
You can prevent this from happening by defining your own sizes for these cases.
Solution 3:
About your last question (why does the text gets smaller when I use a section and article tag?), I think there is a rational reason to that event. Elements such as section, Article, aside, nav are considered as Sectioning Elements. One of the main characteristics of these elements is that in the document’s outline a new indent appears when a browser face to them (to find out more). So according your sample code:
<!DOCTYPE html><html><head><title>Page Title</title></head><body><section><h1>H1 tag in a section tag</h1></section><article><h1>H1 tag in an article tag</h1></article><h1>H1 tag in nothing</h1></body></html>Its outline is (you can use this online tools):
H1 tag in nothing
- H1 tag in a section tag
- H1 tag in an article tag
Post a Comment for "Section, Article, Or Div? And Smaller Text In A Section And Article Tag?"