Easy HTML5 Tutorials Part: 4

Elements explained
laptop with logos

In our last tutorial we covered “classes“, but before going any further  we should cover “elements“. Elements are the building blocks of your web page and you can add classes to them to decorate them just the way you want.

In Easy HTML5 Tutorials Part: 2 we covered the main elements such as body, header, main and footer. In this tutorial we will cover the other elements that fit within those elements.

The Main Elements

*These are the primary blocks of a web page which are the “body” with the “header“, “main“, and “footer” nested inside.

fig 1.1

<body>
<Header>
</header>
<main>
</main>
<footer>
</footer>
</body>
html sections

Secondary Elements

The <div> Element

*The “div” element is the most commonly used as it is a generic container that is not restricted to a certain purpose, it can be placed anywhere and can contain anything including other elements

Learn more here.

fig 1.2

<div>
</div>

The <nav> Element

*The <nav> tag defines a set of links that is intended only for major block of navigation links. Notice that NOT all links of a document should be inside a <nav> element.

Learn more here.

fig 1.3

<nav>
</nav>

The <aside> Element

*The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.

NOTE: This can be used as a sidebar by adding style=”float: right;” to the opening tag

Learn more here.

fig 1.4

<aside>
</aside>

The <section> Element

*The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Learn more here.

fig 1.5

<section>
</section>

The <article> Element

*The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Learn more here.

fig 1.6

<article>
</article>

This is an example of elements covered so far.

<body>
<Header>
<div>
</div>
<nav>
</nav
</header>
<main>
<section>
</section>
<article>
</article>
<aside style="float: right;">
</aside
</main>
<footer>
</footer>
</body>
html elements

Text & Media Elements

Now that we have covered the most common building blocks used to create your layout, we will introduce the  text and media elements that can be nested within your other elements.

The <h1> – <h6> Elements

*The <h1> to <h6> tags are used to define HTML headings.

 

**<h1> defines the most important heading. <h6> defines the least important heading.

 

NOTE: Search engines like “google” use these to define how you will show up in search results based on search query and identical keywords within the <h> tags

Learn more here.

fig 2.1

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>This is paragraph</p>
text size examples

The <img> Element

*In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. Both “src" and "alt" are required.

*The src attribute specifies the URL (web address) and/or the folder of the image

*The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image:

Learn more here.

fig 2.2

URL example...
<img src="https://yoursite.com/images/yourpic.jpg" alt="a picture of myself"


Folder example...
<img src="images/yourpic.jpg" alt="a picture of myself"

The <video> Element

*The HTML5 <video> element specifies a standard way to embed a video in a web page, the “width” and the “height” are optional but recommended.

The controls attribute adds audio controls, like play, pause, and volume.

Learn more here.

fig 2.3

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

The <audio> Element

*The HTML5 <audio> element specifies a standard way to embed audio in a web page.

The controls attribute adds audio controls, like play, pause, and volume.

Learn more here.

fig 2.4

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Congratulations

If you have been following the previous Easy HTML5 Tutorials then you should have a basic understanding of how to create a blank web template, fill it with elements to create your layout and attach css classes to modify it’s appearance. I encourage you to dig around at w3schools.com and learn way more from their vast library.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Share on print

Leave a Reply

Your email address will not be published. Required fields are marked *