<main>...</main> element is used to wrap the main content of the page.
<article>...</article> element contains the important content inside the main element. This does not give any behavior to the content rather this is used for semantic purposes. You can have more than one
article element in a page.
<aside>...</aside> is used to keep content that are important but not necessarily directly related to the main article and/or is not as important as the
<section>...</section> element is a bit like the
<div> element and is used to group different elements. This grouping is for making a logical group rather than for visual purposes.
Header and Footer
<footer>...</footer> are generally used to frame the main content of the page above and below respectively.
<nav>...</nav> element is a logical container for site navigation. This is explicitly reserved for links to the locations or a part of the original web-site.
So far, A logical skeleton of a typical web-page would look like:
<!DOCTYPE html> <html> <head>...</head> <body> <header> <nav>...</nav> </header> <main> <article> <section>...</section> <aside>...</aside> </article> </main> <footer> <nav>...</nav> </footer> </body> </html>
Helps semantically identify a point in time. The
pubdate attribute gives the time stamp for the publication date of the page. A HTML page may only have a single
<time date="2018-07-15" pubdate> July 15, 2018 </time>
Figure and Figcaption
figcaption elements are meant to provide semantic meaning about the figure to search engines.
<figure> <figcpation> Screenshot of menu </figcaption> <img src="screenshot.jpg"> </figure>
Details and Summary
<details> <summary>Events</summary> <p>Come join us</p> </details>
Following is an implementation of the same
Come join us
<mark> highlighted text </mark> element provides semantic meaning to the highlighted text content.
<wbr> or wordbreak element can tell the browser where to hyphenate a really long word when wrapping text to new line.
<output></output> element provides semantic meaning to the result of a calculation.
<embed src="intro.mov> acts as a host container for external plugin. These days, it is no longer used.
<canvas>...</canvas> element is used to draw shapes on the page.
Audio and Video element
<video controls> <source src="vid.mp4" type="video/mp4"> <source src="vid.webm" type="video/webm"> <track kind = "subtitles" label = "Spanish Subtitle" src = "es.vtt" srclang = "en"> </video>
<audio controls> <source src="music.mp3" type="audio/mp3"> </audio>
meter element is used to demonstrate a value between a threshold of values. e.g battery power, product ratings and so on.
70 out of 100
<meter min="0" max="100" value="70"> 70 out of 100 </meter>
progress is a related element to
meter, it depicts how much progress the user has made.
<progress max="100" value="50"> </progress>
<math> <!-- MathML elements --> </math>
With this element we can define a list of elements which are shown as options in input field.
<form> <input type="text" list="colors" name="color_names"> <datalist id="colors"> <option value="blue"> <option value="red"> </datalist> </form>