I want to write semantic beautiful no-nonsense HTML. When is the right time to include class and when it's not? Should I add class on every element of my HTML?
To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable. When we write semantic markup we can no longer select HTML elements based on visual presentation. Instead, we select HTML elements based on their semantic meaning, and then use CSS to define the visual presentation of our content. When writing semantic markup, the presentation of web page elements is kept completely separate and distinct from the markup of the content itself.
<body>
<ul class="post">
<li class="title"> <h3>Title of Post</h3> </li>
<li class="content"><p> Lorem Ipsum bla bla..</p></li>
<li class="hashtag">#samplepost
</li>
</ul>
</body>
<style>
.title{code}
.content{code}
.hashtag{code}
</style>
or
<body>
<ul class="post">
<li> <h3>Title of Post</h3> </li>
<li><p>Ipsum bla bla..</p></li>
<li>#samplepost </li>
</ul>
</body>
<style>
.post > li > h3{code}
.post > li > p {code}
.post > li > a {code}
</style>
Which of these is more semantic? Should we use class on everything or only when necessary?
Only use classes when you want to style a group of elements in a similar way (and ids for unique elements), it can be confusing for someone picking up your code if class names don't have any styles attached to them, and it just adds clutter.
Using semantic tags will make your html more semantic - ie. header, nav, main, footer, aside - etc. Some of these tags even make it easier for screen readers to navigate. w3 schools has good info about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp
It is better not to be attached to HTML tags, who knows where else you will have to use a similar interface. It’s best to stick with some CSS methodology (for example BEM) and write styles based on CSS classes. From the presence of classes, the layout will not be less semantic. The main html tags to write correctly.
In general, if you want to avoid problems in the future, use the css classes.
I would write like this:
<body>
<div class="posts-list">
<h3 class="posts-list__title">Title of Post</h3>
<ul class="post-list__ul">
<li class="post-list__item">
<p> Lorem Ipsum bla bla..</p>
</li>
</ul>
<div class="posts-list__hashtag">
#samplepost
</div>
</div>
</body>
Creating classes everywhere is a lot of work and can potentially cause some problems later on. If you add a class to every HTML tag, imagine how hard to maintain the code is going to be if the project becomes bigger. As mentioned above there are specific methodologies which can be really helpful, and BEM is a popular, but not the only one, you can use other. If you don't want to use methodology and stick with simple classes for now (though at some point I really suggest diving into that topic, you don't have to know perfectly how to use specific methodology, but how they works, if you ever join any team working with code, then they are going to tell you what methodology they picked for the project), I suggest using second code, but with comments:
<body>
<!-- Post -->
<ul class="post">
<!-- Title -->
<li>
<h3>Title of Post</h3>
</li>
<!-- Content -->
<li>
<p>Ipsum bla bla..</p>
</li>
<!-- Hashtag -->
<li>#samplepost </li>
</ul>
</body>
<style>
.post>li>h3 {
code
}
.post>li>p {
code
}
.post>li>a {
code
}
</style>
Comments are really simple and powerful tool. They will help you getting oriented in the project really quick, and avoid adding unnecessary classes for semantics.
The first thing to note is your content is not a list, so you shouldn't be using ul/li. That bad semantics, and as such worse than no semantics at all.
Your semantic markup is this:
<body>
<h3>Title of Post</h3>
<p>Lorem Ipsum bla bla..</p>
#samplepost
</body>
If you want to create a containing block for your post, to might reasonably wrap it in a div element, and although it's not necessary for such simple content, you could also consider wrapping it in a main element. You could put your anchor inside a p element but that makes no semantic difference.
Now you add one or more classes to any element when it is sensible to do so. What is sensible? It means not going over the top, forcing a class onto an element just because it looks naked without one. Generally, a good rule of thumb is to add a class when there's a utilitarian purpose in doing so. Classes are a way of putting you content in to categories, so that categorisation should be useful in some way.
For example, it might be that you want to style all the content with a particular category a similar way. Or it might be that you want to add some common functionality via JavaScript to all the content in a particular category.
Or it might be that you want to identify a category of content for your maintenance purposes. For example, suppose you have a large document describing products that you sell. With each product is a price. Even if you have no intention of styling the price differently from the other content, nor have any relevant JavaScript, you might add a class of "price" to each one, so that when the time comes to update your prices, you can easily find them all in your editor, and thus make sure that you don't miss one.
For each utilitarian purpose, think about opportunities, rather than necessities. By adding a class to categorise some some content, you are creating an opportunity for common styling, or functionality, or discovery to be applied.
Related
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>
Let's say you had something like a TV show listing, where you had a show title, and a show description. You want the listing to be accessible for people with disabilities as well.
Would it make more sense to use a definition list:
<dl>
<dt>...title...</dt><dd>...description...</dd>
...
</dl>
Or an unordered list with headings?
<ul>
<li><h3>...title...</h3><p>...description...</p></li>
...
</ul>
Which makes more semantic sense and will respond better to screen readers? (knowing that they can both be styled the same way)
If you are using HTML 4.01, you shouldn't use dl as it's defined as "definition list" (and your example does not consist of terms and their definitions). If you are using HTML5, the use of dl is fine, because the definition of dl changed.
Using headings inside of li might be a bit problematic regarding the document outline. The scope of a heading would include the start of the next li: <li><!--scope start--><h3>title</h3><p>description</p></li><li><!--scope end--><h3>…. By using section (resp. article), this could be avoided.
So, for HTML5, I think the following ways are possible:
dl
<dl>
<dt>Title1</dt>
<dd>Description1</dd>
<dt>Title2</dt>
<dd>Description2</dd>
</dl>
That would be my favorite, if you only want to provide title and description for each show (if not, see the last example).
ul + section
<ul>
<li>
<section>
<h1>Title1</h1>
<p>Description1</p>
</section>
</li>
<li>
<section>
<h1>Title2</h1>
<p>Description2</p>
</section>
</li>
</ul>
I don't like that very much. The list isn't adding much here, so why not omit it? (see next example)
headings only
<section>
<h1>Title1</h1>
<p>Description1</p>
</section>
<section>
<h1>Title2</h1>
<p>Description2</p>
</section>
Instead of section the article element might be possible, too.
You could also omit section (or article) and use headings only (in the case of section it wouldn't change the meaning); in that case you'd need to apply the correct heading level.
headings + dl
If you want to provide additional metadata (maybe in the future), I'd go with the following markup:
<section>
<h1>Title1</h1>
<dl>
<dt>Description</dt>
<dd>…</dd>
<dt>Rating</dt>
<dd>…</dd>
<dt>Time</dt>
<dd>…</dd>
<dt>Length</dt>
<dd>…</dd>
</dl>
</section>
I prefer the former. First, it seems to make more sense to me just based on the content.
But that's me. I think the markup should reflect the document structure, and since (as you say) the CSS can style it either way, why not make the markup reflect the content? A list containing items that contain a header for a title, followed by a description seems a bit of overkill to me.
But, hey. You know what they say about opinions.
In this case using a Definition list makes much more sense. Aside from this though, is it really necessary to use a list at all? It may make more sense just to use your Heading tags appropriately on the page wit a tag (x= 2-6) and have everything apply under the header of that. TV Shows in specific it may not make sense to use a "List" to display them with definitions or anything else. Again, they can be styled however, so i'm only worried about sematics with this.
Hope this helps
Zach
Take these two pieces of markup:
<div id="header">
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
</div>
and
<header>
<img src="/img/logo.png" alt="MyLogo" />
<ul id="misc-nav">
<li>..</li>
</ul>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?
It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.
Can you offer any clarity on it?
Both are fine. But what exactly do you mean by "structural" vs "semantic"?
It's your first method (semantically).
The < header> tag defines an
introduction to the document.
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
http://www.w3schools.com/html5/tag_header.asp
Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
The header tag purely semantic.
However, in fact all HTML tags are to provide a context to the content (= semantics).
Use CSS to style your content approperiately.
I would advocate the following combination of markup and CSS:
In your CSS:
header {
background: #fff url(/img/logo.png) top left no-repeat;
padding-left: 64px; /* or whatever required to display margin correctly */
}
/* if you REALLY want your navigation to appear as a bulleted list */
nav a {
display: list-item;
}
In your page markup:
<nav>
<a>...</a>
<a>...</a>
</nav>
<header>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<p>The smell of invention awaits you...</p>
</header>
This way you're using the semantic <header /> and <nav /> tags to mark up text content, and then using CSS to enhance the presentation with display formatting, logo images, etc.
I recall - although alas I can't find the sources now - that the proposed new elements in HTML5 (header, nav, footer, aside, article, etc.) were chosen based on analysis of Google's database of websites to identify the most commonly-used ID attributes assigned to DIV elements, figuring that those represented the most common scenarios where developers were using DIVs to wrap meaningful elements of their page structure.
HTML5 actually does away with block/inline distinction in favour of a more nuanced content model. The header element is flow content, which is like the default state for HTML5 elements. Semantically it should be considered as introductory information for its nearest section content or sectioning root ancestor.
I think both your examples are valid uses of the element, though I personally would probably markup your first one this way:
<header>
<img src="/img/logo.png" alt="MyLogo" />
<nav>
<ul>
<li>..</li>
</ul>
</nav>
<hgroup>
<h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
<h2>The smell of invention awaits you...</h2>
</hgroup>
</header>
I used to think that the first method is the proper way to use the element, as it is intended to provide relevant information for a given section it is included in, not being a section itself, besides we already have elements for structuring the content, but for what i've seen in some pages, the reason many people includes also a header element at root level is to provide that same information considering the whole page as a big section, so i've changed my mind to think both of the examples can be considered correct.
If you read the W3C HTML5 specification you will find that every html page should have only one H1 tag, so if you use h1 then h2 then h3 you might see some weird styling. That is because the browser expect one h1 on every html page when it parses it.
So you can instead use h1 h2 h3 tags and style them any way you want.
The point of using semantic html elements is because your website will be 'read' not only by web browsers but also by web crawlers, tools that read the page with voice, braile tools and many more applications and physical tools.
So when those applications read your website they don't read css, only html and might read some javascript. So when they see lang="en" they know to read the contents in the element in english etc. When they see "section" they know it's section element and when they see "aside" they know it is some aside element etc.
We can easy see the page and know what is what, but visually impaired and other people can't do that so for them this will be of great help. Think about that when you make your websites, think about all the people that will access it and how easy will be for them to do that.
That is the whole point of the new awesome html5 elements. You can make the same webpage just with one element - "div" for example, and with a whole range of new html5 semantic elements - article, section, header, footer, aside etc. The webpage will look the same in web browsers, but smart applications like search engine robots will crawl the page better and some applications that read web pages will parse the page more easily.
The point of web is to be open to all people and free, and I agree to that.
In the future, the web will evolve without doubt, new tools will be made that will parse web pages, and using new html5 semantic elements will make your webpages future proof, so these new tools will read our pages in smart way.
Hope this helped someone :)
using HTML5, would it be semantically correct to place an <article> element within a <li> element. A situation where this would prove useful is a list of recent or popular articles on a blog. Consider the following:
<section id="popular">
<div class="blurb">
<h2>Popular Articles</h2>
<p>The most popular posts from my blog.</p>
</div>
<ul>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
<li>
<article>
<h3>Article</h3>
<p>An excerpt from the article.</p>
</article>
</li>
</ul>
</section>
Which would appear as follows:
Popular Articles
The most popular posts from my blog.
Article
An excerpt from the article.
Article
An excerpt from the article.
Article
An excerpt from the article.
To me, this seems an excellent way of marking up the information. My only question is if it is correct to nest the <article> element inside the <li> element in this way.
There is nothing semantically incorrect about it, but it is not really necessary. The <ul> and <li> elements aren't really adding anything here, unless you are taking advantage of their default styling. Simply putting the <article> tags directly within the <section id="popular"> should be sufficient, and it reduces the complexity of your page as well as its size.
To determine whether something is semantically correct and useful in HTML, ask yourself a few questions. Are you using each element for its intended purpose? For instance, it's not semantically correct if you use an <a> element for a button, as <a> is for hyperlinks, <button> is for buttons. Do you need each element you are using in order to convey all of the semantic information about your content (sections, headings, links, etc)? Is there anything meaningful that you intend to convey that isn't expressed by use of appropriate elements? Having lots of extra meaningless elements usually isn't harmful, but it adds clutter, and it may mean that there are semantic distinctions you are conveying visually but not encoding in a way that a screen reader or automated bot or browser that presented the information in a different format could make sense of.
If it displays correctly in all implementations, I don't have any idea why it would be incorrect... HTML5 is meant to be flexible. Also, the documentation states:
Contexts in which this element can be
used:
Where flow content is expected.
Which looks to be the context of most elements available.
I'm writing a new webpage for a company and I have (a sane subset of) HTML5/W3C recommendations in mind.
After reading the semantic meaning of <hr />, I was wondering if this was a good place to use it:
<section name="historyItem">
<h2>2002</h2>
<p>Dolorem ipsum dolor sit amet in 2002, consectetur [...]</p>
<hr />
<ul>
<li>Link A</li>
<li>Link B</li>
</ul>
</section>
My line of reasoning is that, yes, that <hr /> represents a thematic change from section description to section links, but I'm unsure about that.
Maybe "thematic change" means to have a new paragraph later on another subject, and thus my example wouldn't be "correct". What do you think?
(ps.: Yes, that <ul> is CSS-styled to fit a single line and look cool)
I see what you mean. But personally I just wouldn't bother. Ask yourself why you're using the tag in the first place. If you want to delineate a change between the paragraph and the links, then in terms of pure mark-up I don't reckon it's required. If it's about the look and feel of your page (i.e. you want a rule demarcating the two areas), then again I'd question its usefulness, given that you can apply a border to either the paragraph or unordered list tags.
Of course, given that this is html5, you could go the whole hog and use the <section> tag…
Thematically speaking, <hr> means the end of one "section" and the start of "another". Essentially these should be appearing after your <section> tags, not within. Although semantically speaking, it doesn't really matter where you want to use them.
If your list of link items are relevant to the items ABOVE the <hr> tag (meaning relevant to your other elements within the <section> tag, then I do not recommend using <hr> there. Instead, use CSS to differentiate border and underlines.
If you'd like additional reference, I've located this for you:
http://html5doctor.com/small-hr-element/