One of the most important features of HTML5 is its semantics. Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable,allowing browsers and search engines to better interpret content.
Resources
<header>The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document. In case of section it represents the header of a section/ document, typically containing headings and subheadings, and other metadata about the section.
The following example defines a header for an article:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
<footer>The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
You may have several <footer> elements in one document.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>
<section>The <section> element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
A home page could normally be split into sections for introduction, content, and contact information.
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
Examples of where an <article> element can be used:
The <article> element is a specialised kind of <section>; it has a more specific semantic meaning than <section> in that it is an independent, self-contained block
of related content. We coulduse <section>, but using <article> gives more semantic meaning to the content.
By contrast <section> is only a block of related content, and <div> is only a block of content. To decide which of these three elements is appropriate, choose the first suitable
option:
<article><section><div><article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
<nav>The <nav> element represents a section of a page containing primary navigation links to other pages or to parts within the page.
NOTE that not all links of a document should be inside a
<main>The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>,
<header>, or <nav> element.
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>
<aside>The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The most common misconception of how this element should be used is for the standard sidebar. While there is usually a degree of relation between sidebar content and the content in an article, it is not enough to be considered fit for an <aside>.
Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use of an <aside>.
Content within an <aside> should be stand-alone information that is related to the article in context.
Good <aside> content examples include pull-quotes, a glossary or even related links (posts).
<article>
<header>
<h1>Web Technologies</h1>
</header>
<p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
<aside>
<dl>
<dt>CSS</dt>
<dd>A set of standards for styling documents presented on the
World Wide Web.</dd>
<dt>PHP</dt>
<dd>A server-side scripting language suited to dynamic HTML document
generation for the web.</dd>
<dt>JavaScript</dt>
<dd>A client-side scripting language used for manipulating HTML documents
within a browser.</dd>
</dl>
</aside>
</article>
<address>The <address> element provides contact information for a document or part of a document.
Information provided by address may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on.
The <address> element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.
So what should we do with addresses that aren't directly related to the document? One solution is to use the p element in combination with the hCard microformat. For more information check here
<footer>
<div class="vcard">by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne"href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer>
<time>The <time>tag defines a human-readable date/time.
The <time> element can also be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results. For that datetime attribute is used.
datetime attruibute represent a machine-readable date/time of the datetime
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
<ul> <ol>The <ul> - unordered list is used to group a set of related items in no particular order.
The <ol> - ordered list is used to group a set of related items in a specific order.
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>
<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
</ol>
<dl> <dt> <dd>The <dl>element introduces an association list containing groups of terms and associated descriptions. (a description list).
The <dt> element represents the term, or name, part of a term-description group in a description list (dl element), and the talker, or speaker, part of a talker-discourse pair in a conversation (dialog element).
The <dd> element represents the description, definition, or value, part of a term-description group in a description list (dl element), and the discourse, or quote, part in a conversation (dialog element).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<figure> <figcaption>The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things).
The <figure> element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow
of the document without affecting the document’s meaning.
The <figcaption> element represents a caption or legend for a figure.
It is important to note difference between <figure>and <aside>. You should choose between <aside>or <figure> by asking yourself if the content is essential
to understanding the section:
<aside>.<figure>.Having said that, if its position relates to previous and subsequent content, use a more appropriate element — e.g., a <div>, a plain old <img>, a <blockquote>, or possibly
even
<canvas>, depending on its content.
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>
<blockquote> <q> <cite>The <blockquote> element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
The <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that
don't require paragraph breaks; for long quotations use the <blockquote> element.
The <cite> element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, which may be in an abbreviated form as per the conventions
used for the addition of citation metadata.
The <cite> element is typically used in <blockquote> and <figcaption>
<blockquote>
<p>My favorite book is <cite class="from-quote">At Swim-Two-Birds</cite></p>
<footer>- <cite>Mike[tm]Smith</cite></footer>
</blockquote>
<mark>The <mark> tag represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
<p>Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.</p>
<abbr>The <abbr>tag defines an abbreviation or an acronym, like "HTML", "Mr.", "Dec.", "ASAP", "ATM".
Tip: An abbreviation and an acronym are both shortened versions of something else. Both are often represented as a series of letters.
Marking up abbreviations can give useful information to browsers, translation systems and search-engines.
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
When creating a new template the following man layout should be taken into consideration
<html>
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
....
</footer>
</body>
</html>
When we have overview page of articles such as press/media, blog, webinars, we need to keep the following structure:
article tag<main>
<h1>Webinars</h1>
<h2>Learn more about investing with interesting webinar videos.</h2>
<div class="container-class">
<article>
<h3> Featured article title </h3>
Featured article goes here...
</article>
</dv>
<div class="container-class">
<ul>
<li>
<article>
<h3> Article1 title </h3>
Article content goes here ....
</article>
</li>
....
<li>
<article>
<h3> Article2 title </h3>
Article content goes here ....
</article>
</li>
</ul>
</div>
</main>When building a single article page like webinar, news , blog page, the following points need to be considered:/p>
article tagheader tagaside tagsection tagsExamples:
<main>
<article>
<h1>Article heading goes here</h1>
<h2>Article subheading goes here</h2>
<section>
<h3>Section title goes here</h3>
Section content goes here
</section>
...
<section>
<h3> Section title goes here</h3>
Section content goes here
</section>
<aside>
<h3> Related articles</h3>
Related articles content goes here
</aside>
</article>
<main>
<ul> <ol> <li> usage in content
https://www.questrade.com/about-us/why-questrade
<address> <time> usage in content