HTML5 for Beginners 2019 : Interesting Elements

So you are a learning web developer who uses a lot of <div>s right ? Well… what if I told you, there is a whole new world to be explored…..

Below are features you could have fun with during your web development escapades (don’t think that makes sense…but okay)

<sections>

You should use this, if or when you are defining a unique SECTION of an HTML page. e.g. A list of books, a description etc. If however you need a SECTION for styling, use the <div> instead. I read that somewhere…

<section>
<header></header>
<main></main>
<aside></aside>
</section>

Useful Links:

https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div

<article>

Commonly used for blog posts, news articles, podcast descriptions and there can be multiple in an HTML page. This can be a parent element to <header>, <footer>, <section>, <p>, <h1 – h6>, <address> etc.

<article>
<h2>Top 10 programming languages</h2>
<content>
<p>blah.... blah</p>
</content>
</article>

Useful Links:

https://www.bitdegree.org/learn/html-article

<nav>

Navigation links, menus, side-bars can be nested in this element. Commonly has either a <ul> or a <ol> element as a direct child.

<nav>
<ul>
<li class="menu-item"></li>
</ul>
</nav>

Useful Links:

https://www.quora.com/What-is-the-use-of-nav-tag-in-HTML

<aside>

One could use this for side-bars or info-boxes. Frequently used to provide meta- information on content either placed within an <article> ,<section> or listing categories, tags etc.

<aside>
<caption>Most viewed youtube videos</caption>
<ul>
</ul>
</aside>

Useful Links:

https://html5-tutorial.net/new-section-tags/aside-tag/

<footer>

You know that area in websites where you see something like this “© 2005-2019” or social media links ,sitemaps, paypal donation? Yea… that is usually the footer. You could also add another menu in this element even if you already have on in the <header>.

<footer></footer>

Useful Links:

https://www.techonthenet.com/html/elements/footer_tag.php

<header>

Most websites have or should have this section. Main navigation menus, logos, search bars, alert messages etc. could be displayed within this element. Sometimes sliders could also be tucked in here.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

<blockquote>

Used for citations and is indented by default. One could add the citation source (URL) by using the cite attribute i.e <blockquote cite=”http://ajalacomfort.com”> or by using the <cite> tag.

<blockquote cite="ajalacomfort.com">
You can do this! We believe in you...
</blockquote>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote

<cite>

Usually a child element to the <blockquote> node and is used provide a text based citation source. or reference An <a href=””> can be used to provided the reference url.

<blockquote cite="ajalacomfort.com">
You can do this! We believe in you...
</blockquote>
<cite>Ajala Comfort, Blog Post </cite>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

<details>

Creates a widget that shows “more” info on click. Similar to tabs on a lot of website. By adding a <summary> node within <details> element, a “summarized” text is shown before the click action. The text node directly within the <details> element should be the “complete” or “longer” content that is shown after the click action.

<details>
<summary>Book Title: Harry Fotter and the teenage witches </summary>
In a land far away lived a retired wizard who was known for conquering "he who shall named"....
</details>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

<summary>

Usually a child element to <details>. Displays a shorter version of the contents shown in the <details> element.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

<fieldset>

An element found in HTML forms. It is used to group sections within forms. Possible child nodes <input>, <legend>, <label> etc.

<form>
<fieldset>
<legend>Personal Information</legend>
<label>
Type in your Social Security Number
<input type="text" name="social_sec_number"/>
</label>
</fieldset>
<fieldset>
<legend>Job Information</legend>
<label>Select you Current Occupation</label>
<select>
<option value="D_B">Doctor during the day, Batman at night</option>
...
</select>
</fieldset>
</form>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

<figure>

You probably may have already started using this one. This can be used as a parent element to the <img> and the <figcaption> node.

<figure>
<img src="" alt=""/>
<figcaption>The sky is blue but all I see is you</figcaption>
</figure>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

<figcaption>

A child node of the <figure> element; used to display a caption of the sibling node <img>.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

<address>

If you want to provide your contact information or author contact information, you could use this element.

<address>
<a href="tel:0236">Mobile Number</a>
Bremen ,Deutschland
</address>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address

<video>

Well this should be self-explanatory.You can embed video unto the HTML document and add the video source url to its attribute src. But if the video has multiple sources, using the node <source> as a child element is possible. If you want controls to be displayed on your video, add the controls attribute to the video element. Also if for some reason, the linked video does not work or is inaccessible, the browser will render the fallback content ( child content within the video tag). You could also add your custom controls using available APIs. To find out more about adding subtitles, read this

<video src="" controls>
If you are reading this, this is the fallback content.. This means the video is not playing.
</video>

Useful Links:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

<audio>

Similar to <video>, but for audio files.

<audio>
<source src="" type="">
If you can read this, something is wrong with the audio file. 
</audio>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

<source>

The source element via the src attribute provide the “source” for the video to be played. Another attribute is the type, where the video format is specified.

<source src="" type="audio/mp3">

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

<picture>

Huh? What about <img> ? The advantage of using this element over <img> alone is the option of displaying the same image in different versions ( dimensions). The browser will select the “BEST” match amongst the versions provided in the children <source> elements. If however no match is found, if an <img> element exist as a child of <picture>, it will be selected as the last resort.

<picture>
<source srcset="" media="(max-width:500px)">
</picture>

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<track>

This can be used to provide subtitles or captions for audios and videos.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

<object>

You could embed PDFs, audio,video, applets etc. on your website using this element. <param> is an associate element, which is used to provide parameters for the embedded object.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

<area>

I find this feature really cool and just found out about it LOL. This is like an advanced <a href> tag. Let’s say you have an image but you want to link different spots on the same image (e.g. an instagram picture with tagged people). You could use this element.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

<map>

This element is used to group all <area> nodes that are associated with the same image ( i guess 😀 ). This has a name attribute which is used in the associate <img> tag’s attribute called usemap.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

<iframe>

This element is so overused. If you want to display another HTML page on your website, you could use this.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

<dl>

If you have a list of items that are each simply a title and content block, you may ost likely use <ul> or <ol> to group them. But a good alternative is <dl>. Although, unlike ul/ol, it lacks a default numbering system, it is a nice alternative. Child nodes are <dt> and <dd>.

Useful Links:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl