Ultimate Guide: Understanding Essential HTML Elements - A Special Explanation for Learners

We already know the basic and important tags of HTML. This is the fourth chapter of the HTML course. In the first chapter we learned all about HTML and definitions. In the second chapter we learned about all the basic tags of HTML and in the third chapter we learned about HTML advanced tags. Now we are here for all the important and main elements.

Introduction   Explain in Details   Final Lines

In this post we will almost finalize our HTML course. If you have been with us from the beginning you will know what is meant by "important elements" here but if you are new then I will briefly explain that important elements means that we have divided our HTML course into three parts. Rated as (basic tags, all used tags and special elements). Basically all are HTML tags but we have only categorized them so that we can easily understand.

All the important (special) elements of HTML are the list of elements (tags) that are most used in the web page and are the most visible part of the web page or website. Before I get started, here is a brief explanation of the logic of the various HTML tags.

So basically html built-in tags and custom tags like  <3l>  are the same except for some tags. The difference is that when we use the built-in tag, the browser automatically adds some CSS to the built-in tag. Here is a question, what is CSS? We will talk about CSS in more detail later. When we learn about HTML, it is important to learn CSS because CSS is the language of web style. A webpage without CSS would be a homogenous body without bones.

The div tag is a very common and most used tag of html. This is a simple block that stands as a page partition. It starts with a new line and ends at a line break because its default CSS is display: block. That is, its width will be 100%.

The img tag is used to attach an image to a document. The img tag retrieves the binary from the external server and displays it on the document (embedding image).The "src" attribute is required for the img tag, "src" means the source or path of the image file. Here is a question, what is an attributes? As I mentioned earlier, our HTML course is almost complete after this post, it almost means that there is still something left that is HTML attributes. Then we will study the attributes of HTML. Another attribute "alt" is used for substitute text in the img tag, if somehow img does not appear then alt text will appear.

Then there are others like width, height and others that are linked to CSS. In the future we will learn the attributes of html and their types.

<img alt="img tag" src="https://i.ibb.co/zrkCkWX/ftr.jpg" height="auto" width="100%"/>

---

The video tag is same as img tag but it is used to embed video in a document.The "src" attribute is also required for the video tag, "src" means the source or path of the video file. Another way of video imbedding is used  <source>  element inside video Element. This method is used if we want to add more file sources so that if the browser does not support the first file then the second file will be loaded or if the second one fails then it will be the next file. If not, there will be a text display if we set the text in the video tag after the source tags. Browsers support these video formats as MP4, WebM, and OGG.

This tag has attributes like controls, autoplay, loop and muted which we will discuss in HTML attributes tutorials.

  <video width="480" height="320" controls>
    <source src="https://freetoolkit.github.io/vid/15%20seconds%20of%20nature%20(by%20Mr.%20Downloader).mp4" type="video/mp4">
    <source src="https://freetoolkit.github.io/vid/15%20seconds%20of%20nature%20(by%20Mr.%20Downloader).webm" type="video/webm">
    <source src="https://freetoolkit.github.io/vid/15%20seconds%20of%20nature%20(by%20Mr.%20Downloader).ogg" type="video/ogg">
    Video tag is not supported by tour Browser.
</video>

---

Top↑

•  <audio> 

An iframe tag is widely used in websites to embed an external web page. The "src" attribute is also required for the iframe tag that indicates the path to the external source. We can also embed images, audios and videos using iframe tags. It works as a browser but not as an actual browser due to some limitations. We will learn more about  <iframe>  in detail in future posts.

<iframe src="https://mrdl.orgfree.com" style="border: 0;width: -webkit-fill-available;height: 500px;"></iframe>

---

In this post we learned about the special HTML elements (tags) that are used in a document to embed external sources. After which we were able to answer the question what is img tag? What is a video tag? What is an audio tag? What are object tags and iframe tags? This is almost the end of the HTML course, except for the HTML attributes that we will learn later.