Getting Started Guide of HTML – Introduction

Satish Kumar January 25, 2022
HTML acronym of Hypertext Markup Language is the backbone language behind each and every web page you see all over the internet to build the structure of the web pages. It is not a typical programming language rather a markup language as a set of specific instructions known as “tags” are used to construct the elements of a webpage.

What is an Element?

An element is a portion that can be a chunk of text, image, or anything else like that. These pieces of content can be made appear on the web page in a certain way using different tags and their attributes.

What is Tag?

A tag is a specific alphabet, or a combination of alphabets, or of alphabets and numbers that are enclosed inside the angle brackets. Like, <p>, <h1>, etc.

Structural Pattern of an HTML Element

The structure of an element consists of

  • Opening Tag
  • Content
  • Closing Tag

Example:

<p> This is my first paragraph</p>

Void/Empty Elements

There are a number of elements that do not follow the structural pattern of an opening tag, followed by content, followed by the closing tag. Such elements are known as the Void or Empty elements which use a single tag and most of the time are used to insert something in an HTML document.

For example,

<img src="https://ift.tt/3IGE7iP">

Case-Sensitivity of HTML Tags:

HTML tags are not case-sensitive. For example, one will get the same results by inserting <body>, <BODY>, or <bOdY> as the tag. However, using the small letters in the whole HTML document is considered the best approach as it confirms the consistency.

Nesting Tags

Tags can be placed inside the content of other tags. It is known as “Nesting”. For example, if one has a paragraph “COVID-19 is a deadly disease.” and the word “deadly” is to be emphasized by making it bold, we can use <strong> tag inside the paragraph tag <p>.

<p>COVID-19 is a <strong>deadly</strong> disease.</p>

The result would be as follows:

One thing that should be ensured here is that in case of nesting, a tag that is placed inside the content of another tag should be properly closed first before making the outer tag closed. As in the above example, the <strong> was closed before the closing paragraph tag </p>.

The following code is not the correct way of nesting.

<p>COVID-19 is a <strong>deadly disease.</p></strong>

Attributes of the Elements:

The elements can have different attributes which contain some extra information about the element that is not shown on the webpage but their effect is seen over there. An attribute consists of the following two things:

  • Attribute name
  • Attribute value

An attribute is placed in the starting tag. For example,

<p class="editor-note">I am disappointed in you, my friend.</p>

Here “class” is an attribute name that deals with the style of the content, while “editor-note” is the attribute value. If one wants to insert more than one attribute, those will also be separated by white space.

Boolean Attribute:

There are some attributes that do not have any value. Those are known as the Boolean attributes which are in fact binary and such attributes can have only one value at a time. Most of the time, their name and value are the same. For example, “disabled” is such an attribute in the following code which is set if there is no intent anyone can interact with the input.

<input type="name" disabled="disabled">

White Spaces in HTML:

It does not matter how many white spaces are inserted in the code, the HTML parser will take all space as a single space. So, there is no difference whether one puts a single space or multiple spaces, even line breaks. However, readability is surely the aspect that can be taken into account here.

<p>I have visited London, New York, Sydney, and Toronto.</p>
<p>I have visited
London,
New York,
Sydney,
and Toronto.</p>

HTML Comments:

The browsers ignore comments in an HTML code, so comments are invisible to the user. The major purpose of inserting comments is to write some relevant notes over there so that if the code is returned after a long period of time, it can be understood easily.

To write comments, one needs to enclose the text in <!—- and –>. For example,

<p>This is not a comment.</p>

<!-- <p>This is a comment.</p> -->

Conclusion

HTML acronym of Hypertext Markup Language is a backbone language behind the webpages used to give them a structure. The whole language is controlled by a set of commands known as “tags” which are used in a way the elements on the webpage are supposed to appear. Every element has specific anatomy where all content is enclosed in opening and closing tags except a few. An element can have its own attribute that helps one to add some extra information and make an element appear on a webpage in a certain way.



from https://ift.tt/3H9YJ2Y
Tags:

Post a Comment

0 Comments