All about HTML5 for Absolute Beginners: Part 7

Congratulations, everyone, if you've made it this far in HTML5 and are still motivated and eager to master this skill. There is still a lot more to unfold, so keep reading and practicing patiently.

Non-semantic Containers

The containers you saw in part 6 were semantic tags. However, if you want just a container that is not going to be for a specific section like a header, navbar, footer, article, etc., then you can go for a non-semantic container. It will organize your elements.

For example, snacks are inside wrappers, coffee is inside a coffee jar, so, in this case, wrappers and the coffee jar act as containers, organizing whatever is in them. Similarly, we organize our HTML elements by using both semantic and non-semantic containers.

There are two main non-semantic containers, <div> and <span>.

The <div> Tag <div></div>

The <div> tag is widely used in HTML codebases because it is a popular container. You can put multiple elements inside one <div> tag as the container, and then you can apply styles to that <div>, and they will apply to all the elements inside it. Similarly, in JavaScript we can apply logic to a single container, and it will apply to all the items inside it. So it basically groups related elements in one container.

The <span> Tag <span></span>

This tag is similar to <div> except for one difference: it is an inline element, and <div> is a block element.

Block Elements

Block elements are those that take up the entire width of a webpage, even if they don't need it. Although they may not require that amount of width to fit in, they occupy all the width available. Now any other element afterwards in the codebase is going to come on a new line. For example, consider the picture below.

You can see that in the block elements, all the elements are appearing on a new line, because the rest of the width is occupied by each element. But in inline, two elements are fit on a single line because they are sharing the width.

That's the only difference between div and span. However, we can make changes to these behaviors with the help of CSS that we will learn in the upcoming blogs. So stay tuned.

Lists in HTML5

I know this topic is usually covered earlier, but lists can get a little tricky, and you might get overwhelmed in the start. Now you have completed a considerable amount of HTML, so they won't sound difficult.

Unordered list <ul></ul>

This tag stands for unordered list and creates a bullet point list.

List item <li></li>

Inside the ul tags, you can put in each list item by using li tags. A basic list may look like this:

<ul>

<li>sleek and modern design</li>

<li>powerful specifications</li>

<li>affordable discounted price</li>

</ul>

However, it does not end here because we have a lot of customization to create a personalized list.

Ordered List <ol></ol>

These tags create a list with lowercase alphabets. Try it out in your code editor by just replacing the ul tag with ol.

Types in Ordered List

The difference is self-explanatory, and you will see for yourself once you write it like mentioned.

The first one is the uppercase alphabet:

Uppercase Roman Numerals

Lowercase Roman Numerals

Start Attribute:

This attribute starts your list from a specific number that you mention. For example, you want your list to start from the number 2 and onwards, then it will look like this:

Description List

This list is used if you want to give a description for each element in your list.

These stand for description lists and lay the foundation for it.

These tags stand for description terms. They are used to write the item for which the description is going to be written.

Stands for description detail. They are simply used to write the description.

An example description list looks like this:

<dl>

<dd>used for front-end development</dd>

<dt>JavaScript</dt>

<dd>can be used for both front-end and back-end</dd>

<dd>Used for back-end primarily</dd>

</dl>

The <iframe> Tag

The <iframe> tag is one of the interesting tags in HTML. It does the work of embedding a new webpage, maps or a video on your webpage. Let's say, you want to create a little box on your webpage and open a website in it maybe on Wikipedia. Or you want to add a related YouTube video at the end of an article on your webpage then the <iframe> will be your best friend.

There are 3 attributes that an <iframe> tag takes to properly work:

1. Src (source)

2. Height and width

In the src, we will provide the URL of the desired page that we want to embed. Height and width will be used to adjust it's measurement on our webpage. Here is an example:

This <iframe> embeds the page on Wikipedia about laptops on your webpage in a rectangular shape. Try out on your own with different websites and YouTube videos.

The <video> Tag

If you want to display a video on your webpage that is coming from your local computer, then use the <video> tag. The attributes it takes to function properly are:

1. Src (source)

2. Height and width

3. Controls

These were necessary attributes, however, there are optional attributes as well to customize the behavior of the video. Here is a basic example:

<video src="video.mp4" controls height="400px" width="800px">The video cannot be loaded due to outdated browser</video>

The controls attribute gives the video some basic controls like play, pause, fullscreen, etc.

If the video doesn't get loaded, then it may be because of an unsupported browser so it's good to add some text for the user between the tags which will show if the video doesn't get loaded.

Optional Attributes for Video Tag

1. Loop:

When the video ends, this starts it automatically, creating a loop.

2. Poster:

This displays an image while the video is loading

3. Muted:

It makes the video muted by default.

There were some of the most used attributes for the <video> tag. However, thers are a few more available and you can check them out on MDN web docs.

Wrapping up

I hope you liked this blog and are curious for the next one to advance in your journey. You can leave your thoughts in the comments section and if there's anything you feel like discussing with me, then find me in the Contact Us section and I will try my best to help out.

Don't forget to subscribe to stay updated with our latest web development tutorials!

The Programmar Kid's Ultimate Coding Series

Search This Blog