I must admit the HTML5 semantic markup confuses me. I'm talking about these tags in particular:
<header>
<nav>
<section>
<article>
<aside>
<footer>
Using semantic elements provides the UA with information it couldn't normally get from a <div>, but should they be used along with <div> tags or can/should you style the semantic markup directly?
In other words, what is the proper approach?
This:
<div id="content">
<section>
<h1>Lorem ipsum></h1>
<p>Text</p>
</section>
</div>
Or this:
<section id="content">
<h1>Lorem ipsum></h1>
<p>Text</p>
</section>
If you are using the semantic markup tags, you should not also use division tags for the same thing. The semantic tags are a replacement for some of the div tags.
The div tags are of course still useful, for when there is no semantic tag that fits.
I believe your first example is semantically correct, assuming you would have more section tags in that div tag.
The div tag would imply a section of the page that is for content, and then the section tag something like posts.
Since the new tags are not universally recognized by browsers, even as candidates for styling, using div with class is safer. You also have the option of using just div with class like before, and you don’t lose anything now or in the foreseeable future. No software cares about the “semantics” of the new tags.
The first example is more safer to use.
<section>
<h1>Lorem ipsum></h1>
<p>Text</p>
</section>
is the content.
In order to style this content you can wrap it inside a container eg. div with a style hook(class) and apply style to it.
Related
I'm trying to write a semantic HTML and also trying to use class names based on BEM methodology.
Before I start the project with completely wrong structure, I just wanted to double check with you if this is right, what I'm doing:
<main>
<article class="card card--light">
<section class="card__wrapper">
<div class="card__image">
an image
</div>
<div class="card__name">
a name
</div>
<div class="card__button">
<button>Click Me</button>
</div>
</section>
</article>
</main>
Is it ok that all sections go inside an article?
Am I doing maybe too many divs?
It's often a good choice to use an <article> tag for card.
There is one error, the HTML5 tag <article> is already creating a section of the page. So there is no meaning of having a <section> as only child. This <section> means "I'm a section of the article", but that's not really the case here. So you should use a simple <div> instead of a <section>.
Globally, be careful with too much HTML5 semantic elements. Using an extra <div> has no bad consequences, this is not true for "sectioning content" tags (<article>, <section>, <nav> and <aside>). For example screen reader will notifiy the visitor for each new section.
With HTML 5 new semantic tags were introduced which includes header and footer.
But i am confused what should i use and why?
Use header tag directly or give class="header".Which one is better and why?
Use <header> and those semantic tags.
Why? Because they are meaningful, easier to read.
For example, consider
<header id="article-header">
...
</header>
and
<div id="article-header" class="header">
...
</div>
As you can see the first is shorter, and easier to read.
According to Inbound now, semantic tags are better in terms of SEO too.
Also, this and this question have interesting answers
Edit:
I'm quoting this from MDN:
Some of the benefits from writing semantic markup are as follows:
Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
Screen readers can use it as a signpost to help visually impaired users navigate a page
Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
Suggests to the developer the type of data that will be populated
Semantic naming mirrors proper custom element/component naming
Additionally, I have read somewhere quite some time ago that semantic tags are for defining the outline of the document, divs are more suitable for visual sectioning like box styling (I'm unable to find the source right now).
In CSS Definition
Class contruction:
. means a class
.header{
...........
}
HTML
<div class=header>
..........
<div>
while the header tag
This is calling the element name itself like body or any
header{
.............
}
HTML
<header>
................
</header>
It's better to use header tags. The header element represents a container for an introductory content or a set of navigational links. header tag has a block scope as same scope as a normal div tag .
<html>
<body>
<article>
<header>
<h1>Most important heading here</h1>
<h3>Less important heading here</h3>
<p>Some additional information here.</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
Here is my code:
<html>
<head>
<style>
div p h1 {
background-color: red;
}
</style>
</head>
<body>
<div>
<p><h1>hello2</h1></p>
</div>
</body>
</html>
I think thats why:
The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.
This is basic HTML (or any other markup language). You should separate the paragraph, <p></p> from the heading, <h1></h1> element.
If you want to put a sub heading below your main heading, I suggest you do something like
<div>
<h1>Main heading</h1>
<h2>Smaller heading</h2>
<p>Some information or a quote</p>
</div>
It's important to CLOSE the html elements before creating new ones. Unless it's a div, span or section which is meant for gathering topically similar elements.
A lot more could be said, but I suggest you get ahead and read more about HTML and markup language. A good place to start is http://www.w3schools.com/html/html_basic.asp and http://www.w3schools.com/html/html_elements.asp …
If you specifically wonder what elements can be nested inside a paragraph check out the answer on this question: List of HTML5 elements that can be nested inside P element?
Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p. Once this has occurred, the selector no longer matches anything.
Use the W3C markup validator to ensure the validity of your document
<div>
<h1>hello2</h1>
<p>im the best</p>
</div>
Because your header is like the title of an article - you don't put the title in a paragraph. Using the <p> tags, you're just writing the content for the article, so you wont be able to style a header tag in a p tag as you will most likely be styling your header and content differently
If you are having issue with HTML Structure See the Lynda HTML5 course really worth Your Time It Clarifies how to structure your document. Along with reasons why. You will have a better understanding of What is Style and what is structure which most people struggle with I would include myself.
Also has links to the official web standards "World Wide Web Consortium", Yes I know it's a paid for service but it help me avoid or understand why HTML and CSS react the way it does when you move element in to invalid place.
Understand that h1-h6 Tag are not meant for styling as I previously thought from my earlier days in HTML. Yes we used them because it seemed to make since or easyer to target with CSS. But the h1-h6 are more to structure of importance off the section or content on the page. I would use a div if it's or a span or Bold tag.
Great resource is developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
Here is a good example: Of structure from the link above!
<body>
<!-- Main header used across all the pages website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li>Home</li>
</ul>
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<!-----------***** As you can see the h1-h6 is for structure not style****** -->
<h2>Article heading Rank2</h2>
<p>This is Paragraph</p>
<h3>subsection Rank3</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
<h4>Another subsection Ranked</h4>
<p>This is Paragraph </p>
<h3>Another subsection Ranked</h3>
<p>This is Paragraph </p>
<p>This is Paragraph </p>
</article>
<aside>
<h2>Related</h2>
<ul>
<li>beside the seaside</li>
<li>beside the sea</li>
</ul>
</aside>
</main>
<!-- main footer that is used across all the pages of site -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
But really Check out the Lynda HTML 5 Essentials Tutorials!
When a document it's structured correctly it's readable and more applications and devices. Like Readers.
Let's say I want to create a simple responsive one page homepage. I find several alternatives to do this, but what is the best option? I have read several articles on the net including the ones fron W3C, but I don't get a clear answer!
I'm going to have two column layout with text to the left and an image to the right. On a desktop computer they will be besides each other, styled left and right. But in smaller devices like a mobile, the right column will be changed to left and be placed below the text column.
Is alternative 1 bad in a HTML5 point of view? My thought was to devide the page with several parts of alternative 1 or 2. There is also a third alternative(I guess there almost endless with other options aswell) to use two article elements inside the section element and use a article element for the image instead of the aside element.
I guess some of you might also suggest me to use article element instead of section elements and use nested article. It's confusing with all this options!
Should I also use article and header element in alternative 1?
Preciate some feedback and guidelines! Sorry for all my questions, I just want to improve my coding skills!
Alternative 1:
<div id="intro">
<div class="content-left">
<h2>Headline</h2>
<p>Text</p>
</div><!-- end class content-left -->
<div class="content-right">
<img src="...."/>
</div><!-- end class content-right -->
</div><!-- end id intro -->
Alternative 2 with HTML5 elements:
<section id="intro">
<article>
<header>
<h1>Headline</h1>
</header>
<p>Text</p>
</article>
<aside>
<img src="...."/>
</aside>
</section>
The answer is: it doesn't really matter much, apart from code readability. Please see Why use HTML5 tags? for more on that.
You could have a <section class="articles"> that contains all <article> elements. You could have a <div class="articles"> that contains all <div class="article"> elements. I think it's safe to say there's no doubt the first one is easier to read for developers. Your pick.
There is, however, one issue: you self-close <img> -- no need for that in html5 anymore. See Are (non-void) self-closing tags valid in HTML5?.
In HTML 5, <foo /> means <foo>, the start tag. It is not a "self-closing tag". Instead, certain elements are designated as having no end tag, for example <br>. These are collectively called void elements. The slash is just syntactic sugar for people who are addicted to XML. Using the slash in a non-void element tag is invalid, but browsers parse it as the start tag anyway, leading to a mismatch in end tags.
Let's say you want to use a <header> tag for the header part of your site.
But currently your header is made from 3 elements (because of design-related reasons), like:
<div id="header-wrap">
<div id="header">
<div id="header-content">
...
</div>
</div>
</div>
So which one of these DIVs should be replaced with <header> ? And does it matter?
A purpose of HTML5's new tags is to add semantic meaning to your document. On the other hand, generic elements like <div> have been preserved precisely because they have no semantic meaning. They are ideal for adding visual structure without impacting the semantic structure.
The <header> element should envelop the semantic header. I would venture to say it's most likely the outermost element that should be <header> since all elements involved clearly exist to support the header in some fashion, but only you know the semantic meaning of your document best, so you can best answer specifically.