# Mastering HTML: Discovering the Fundamental Tags

We used HTML to create webpage for our website. It use markup for formatting text and provide meaning behind the text.

# What Is HTML

HTML is created under WWW. it is created to provide proper structure to the document so the browser understand how to render the text on screen . Every things are text but HTML helps to give meaning of the different text like for image , there is **img tag**, for paragraph there is **p tag** , for bold and big heading/ main title of webpage , There is **h1 tag** , for link which is most important on the basis of which it is also called **HyperText** , There is **a tag** for it.

For every thing there are markup which is called Tag in HTML. Tags are used to define proper content that need to show on the screen . In HTML5 There are something called Semantic Tag. Semantic means provide meaning and structure which is easier to understand for both Browser and Developer. **It is very important for SEO, screen readers and other tools to access and interpret with the content of webpage.**

Some Semantic Tags are :

**a . header** : to show heading of website. <header></header>

**b . nav** : to show navigation links on website . <nav></nav>

**c . main** : it is used for main content of webpage . <main></main>

**d . aside** : it is used for secondary info or additional information for webpage or mainly for sidebar . <aside></side>

**e . section ,article** : section is used for section of page like About section, C.T.A. section, Testimonial section and article is used for mainly define one product , like on ecommerce website . the detail page for single product there article Tag is used for one product. <section></section> and <article></article>

**f. footer** : footer is used for defining footer of website which is mainly at the bottom of page . it includes info about copyright . links of some extra resources . <footer></footer>

## About Tag , Content, Element

from above section , We say Tag is used for markup the text. **Tag** has opening and closing part. The starting of Tag begins by **<Tagname>** and the ending part is **</TagName>.**

Content itself got meaning that the text which is written inside the between Opening Tag and Closing Tag is known as **Content** of Tag. on relation It is Child of Tag.

**Element** is Overall structure of Tag with content. When Tag is used in webpage then it is called element . like paragraph we use p tag and when we used in code and it display on browser then we called it paragraph element or p tag.

By above scenario we can say There are few Tags which do not contain content between them so that is called **void tag or self closing tag .**

**1 . Paired Tag** : It always comes with opening and closing tag so it is called paired tags like <p></p>, <strong></strong>, <date></date>, <code></code>, <div></div>.

**2 . unpaired /empty/ void** : it has only starting tag like <img />, <br />, <hr />, <input />. the slash at end gives developer about the the tag is self closed which makes developer easier to understand code. so always used slash at the end of empty tag . it is good for understanding purpose.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769494982200/cee9a3f2-c6d7-43ce-ad62-c99f03cd45aa.webp align="left")

## Some Most Used Tags

Below is image showing HTML Code with most used Tag and Its output on browser.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769490835526/bb3cb38a-ec79-4cca-8a9f-de99b7096ffc.jpeg align="center")

## Block and Inline Elements

Everything , every tag is displayed like **rectangular box** on browser screen. by default some elements are taking **full width** or some elements are taking **content-size width**. on the basis of that Elements are classified into **two** types :

**a. Block Level Element** : These are the elements display as full width on the screen .The new Element comes after these type of elements into new line. examples like `div , p, h1-h6, nav, ul, li, ol, br, hr` …

**b. Inline Level Element** : These are the elements who took only content-size width. and the another inline element comes side by side . examples : `img, a, button,span,input, label,strong,em,i`…

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769494519305/6fe2db9c-5fdc-4283-a754-6665ebcd10fc.png align="center")

## Behind the Scenes

We know that browser can understand HTML so the browser engine got **C++** written code who understand the HTML and convert into proper structure that can be rendered on screen the Parsed HTML is called **DOM** which can be selected , modified and updated by using **Javascript.**

## Summary

HTML is **HyperText Markup Programming Language** that is used for creating structure of webpage . It is used for defining the content that can be shown on the screen by using tags