This article focuses on HTML Tags, Elements, and the various attributes associated with them. This is a second part in the series where I am covering everything related to HTML, make sure you know the basic structure of an HTML Document already before starting this out.
All these 3 things we aim to discuss in this article, make up the whole of HTML. An HTML document is nothing without the 3 of them.
Table of Contents
TAGS
HTML is a page of plain text if it is devoid of tags. A tag is what makes a web browser understand and convert an HTML document into a webpage. A tag is like a keyword used to mark the content into different elements. Tags are not case-sensitive, but it is always advised to use lowercase while writing tags.
Tags give meaning to an HTML Document and tags can be better understood with this example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...Text Body Here...
</body>
</html>The tags used in the above example are:
- <html>
- <head>
- <body>
I have explained the meaning and usage of all the mentioned tags in this blog. So you must have noticed, the tags here show an open tag and a closing tag as well. In simple terms, a tag starts and needs to be closed so that it marks an area(element) that is to be defined within that particular tag only.
Here the <html> is the opening tag and </html> is the closing tag, and it marks that the whole content within these tags is pure HTML. The same goes with the <head> and </head> tag, all the SEO-related content, and links to other files go here, which you don’t want your browser to render as visible content on your webpage.
Self Closing Tags
You might come across some tags that are not written the conventional way. They do have an opening tag, but they lack the presence of a closing tag. They are known as Self-closing tags or empty elements.
Some examples of self-closing tags are <br>, <hr> , <img> etc. You can learn more about tags here.
Note: HTML is more loosely written than its advanced XHTML, which is also a markup language. But it is always a good practice to use a closing tag for self-closing tags too. Look at the example mentioned below:
Instead of writing <br>, use <br/>ELEMENTS
An HTML Element is best explained with a start tag, some content in between, and lastly its closing tag. Everything that is enclosed within HTML tags is considered as HTML Elements.
They can not be defined without the use of tags, a tag is what makes an HTML Element.
<tagname>Your Content Here</tagname>
<p>I am your first HTML Element</p>Also, Elements can come in a nested layout too. Nested Elements simply mean elements resting within elements.
<body>
<h1> Nested Element 1 </h1>
<p> Nested Element 2 </p>
</body>
<!–– The <h1> and <p> elements are nested inside the <body> tag. ––>ATTRIBUTES
HTML attributes can be used with tags to add more meaning to the elements. Attributes are the extra information about a particular element. They are always written within the opening tag.
Attribute Name=”Value” is usually the syntax for writing an attribute.
<img src="dog_cool.jpg" alt="dog" />So let’s break the above-mentioned example:
- <img is the tag name.
- src is the attribute name.
- “dog_cool.jpg” is the attribute value.
- alt stands for alternative text. When a user faces poor connection, or when he/she uses a screen reader or else there’s some error in the src attribute, alt text gets displayed instead of the image.
Some other examples of attributes are shown in the example below. Relative URL and Absolute URL are worth mentioning here. Relative URLs are the ones that are used to roam around within the same website. Absolute URLs use the whole path in the link, they are used to link to an external website.
<a href="/pages/page1">Relative URL</a><a href="https://www.google.com/">Absolute URL</a>So here we come to an end with this. I’ll dive deep into the complete HTML in the coming articles. So please share this article and leave a comment if you have any doubts regarding this.
Make sure to check out the previous articles here:
2 Comments
Vaishali_Rastogi · July 30, 2021 at 12:29 pm
Very well explained
"Qu'est-ce que le marquage dans le code HTML" Réponse de code - Coder les réponses · November 13, 2021 at 8:15 pm
[…] La Source Étiquetteswhatever […]