Understanding HTML Tags and Elements
HTML is the skeleton or core structure of every website on the internet. Without HTML there are not website or web app. HTML or Hyper Text Markup Language is the language of the Internet to transfer useful, structured and semantic information.
Today we will understand what it is and how you can write your own HTML webpage.
HTML tags
Tags are little smaller chunks of an HTML that are written in specific order to make up the whole HTML document. Each and every tag has it’s own individual purpose. Each tag is a wrapper or a box to contain some content or information. Depending how you want to convey or present an information on the screen you chose and appropriate tag for it.
Tag and Element
If Tag is a wrapper around the content then the whole content wrapped in a tag with all the information and content as a whole is called an Element. A tag is an available wrapper and an element is a content wrapped in a particular tag.
Common Tags
Below is some of the most commonly used simple tags.
body
A body tag is used group all the content of an HTML document. All the content elements are written inside the <body> tag.
h1 to h6
h1 tag is used to write a heading. H1 is the most biggest available heading tag by default. And from H1 to H6 you can go largest to smallest heading in order. An example of an h1 tag is below.
p tag
P tag is used to create paragraph elements in an HTML documents. it is usually used write large chunk of words in a single block.
a tag
Anchor tag or a is used to hyperlink or simply connect our HTML document to other websites or links. It is used for navigation from one page to another.
div tag
Div tag is used to group multiple element together inside a single structure. This is used to show content in different segments and parts inside you HTML document.
hr tag
hr tag also known as horizontal rule tag and used to create a horizontal line across the HTML body,
br tag
br tag is know as line break tag this tag is used to put line breaks. This tag can be used to put breaks between different elements or different contents of an element.
Paired tags and self closing tags
You may have noticed that some tags like body, h1, p, div are paired they have a opening and closing pairs like <h1> and </h1> , essentially same tag name repeated with a / . But some tags like hr br are self closing , simply they are written once and in the first < and > they are terminated with an / .
Block level and Inline elements
The element’s like div and p they contain multiple blocks or elements , like paragraph tag can contain multiple chunks or text or div elements can contains multiple other elements including div elements. So elements made of them are known as block level elements and they take all the available space.
And the other elements like a tag elements take only the space needed. These types of elements are knows as Inline elements.
Conclusion
This is not nearly close to all the available tags and elements available in HTML and are just a small subset. You may go ahead and read more about all the tags available, although that is not recommended. You may refer to MDN docs or w3schools for reference.
Hopefully now you understand basics of HTML and the tags and elements, difference between them, what are Inline and Block elements.
