Understanding HTML Tags and Elements
Introduction
Developer: Hey Scroller, how you create a single webpage, you have any idea about it.
Scroller: Hmm…!! No.
Developer: No problem in this article we will discuss HTML from starting.
Let’s Start…
What is HTML?
HTML (hypertext markup language) is a language that define the structure and meaning of web content.
It’s a fundamental building block of the web.
HTML tells web browsers how to display text, images, and other multimedia on a webpage.
HTML is used to structure content within a web page, Such as in paragraphs, lists, image, and tables.
HTML satisfied the following list of statements.
It is a language that works for describing the webpage.
It is a markup language.
Markup means special meaning.
It is a main language for web environment.
All text is predefined.
It displays by the browser.
What is HTML tag?
The component used to design the structure of website are called HTML tags.
The text placed between the right angle bracket “>” and the left angle bracket “<” is known as a tag.
A container for some content or other HTML tags
Example:
<HTML>
Types of tag
Paired tag
Non-paired tag / Singular tag
Paired tag: The tag that have both opening and closing tag are called as paired tag.
Example:
<html>…………</html>
<body>…………</body>
<title>…………</title>
Note→ The closing tag starts with the forward slash (/).
Non-paired tag (Singular tag): The tag that have only opening tag & no closing tag are called singular (or) non-paired tag.
Example:
<hr>
<br> or <br/>
<img>
What an HTML element?
HTML elements mean consist of starting tag and closing tag and content which is written between both tags. it defines the part of webpage.
for example:
<p> Hey, from Satya </p>
Block-level vs inline elements
1. Block-level element:
A container used for other HTML elements which takes full width of webpage is known as Block Element.
List of block tags:
| <address> | <fieldset> | <main> |
| <article> | <figcaption> | <nav> |
| <aside> | <figure> | <ol> and <ul> |
| <blockquote> | <form> | <p> |
| <canvas> | <footer> | <pre> |
| <dd> | <h1> to <h6> | <section> |
| <div> | <header> | <table> |
| <dl> | <hr> | <tfoot> |
| <dt> | <li> | <video> |
2. Inline elements:
A container used for other HTML elements which takes width as per size of webpage is known as Inline Element.
List of Inline tags:
| <a> | <i> | <object> |
| <abbr> | <img> | <tt> |
| <acronym> | <input> | <var> |
| <b> | <code> | <output> |
| <bdo> | <dfn> | <q> |
| <big> | <em> | <samp> |
| <br> | <kbd> | <script> |
| <button> | <label> | <select> |
| <cite> | <map> | <small> |
| <span> | <strong> | <sup> |
| <sub> | <textarea> | <time> |
Commonly used HTML tags
Heading tag
It is used to display headings in HTML.
Paragraph tag
used to add paragraph in HTML.
- <p> This is a sample paragraph </p>
Anchor tag
It is used to add links to your page.
- <a href=”https://google.com”\> Google </a>
Image tag
Used to add images to your web page.
- <img src=”/image.png” alt=”Random Image”>
BR tag
Used to add next line (line breaks) to your page.
- <br>
Bold, Italic & underline tags
Used to highlight text in your page.
<b> Bold </b>
<i> Italic </i>
<u> underline </u>
HR tag
used to display a horizontal ruler, used to separate content.
- <hr>
Subscript & Superscript Tag
used to display a horizontal ruler, used to separate context.
<sub> subscript </sub>
<sup> superscript </sup>
PRE tag
used to display text as it is (without ignoring spaces & next line)
<pre> thisis a sampletext</pre>
Conclusion
HTML is the basic language used to create web pages. It helps us structure content like text, images, links, and tables so that browsers can display them properly. By using different tags and elements, we can design simple or complex web pages. Understanding HTML is the first step in learning web development, and it forms the foundation for building websites on the internet.