Learn Html Tags with 15 most used tags in Html

jatin sharma
4 min readDec 3, 2019

--

First We Discuss what is Html Elements

Html Element usually consists of content between the Html Tags

For Example,

The relation between Html Elements and Tags

HTML TAG

Html Tag are like the keyword which defines how the Html content looks like in the Web Browser or To display and Format the content of the Html in the browser

I didn’t give you the details of all the Html Tags but I will give you the most commonly used Html Tags.

  1. <!Doctype>,<head>,<body>: It defines the type of the document, information about the document and defines the document body respectively.
  2. <p>: It defines a paragraph
  3. <pre>: It also defines a paragraph in a pre-formatted way in other words just see this example
<p> tag and <pre> tag

As you can <pre> tag is used to display the content in your own way while as pre tag is used to make the content in a single until if you break the line or the max. with you achieve.

4. Headings(<h1><h2>…<h6>):The size is decreased from h1 to h6 respectively.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

5. <a>: This Tag is used to give the hyperlink in the element. Suppose you want to insert a link in an element so you need to you a tag

<a href="<website name>">You are a genious</a>
Anchor tag

But the link you open runs on that page but if you want to open a new window when clicking on this then you have to give a target attribute in the anchor tag.

6.Image Tag<img>: The Image Tag is used to insert an image in the Html page

<img src="<source of the image>" alt="other image or text" height width>

src is the source of the image you may copy the address or give the URL of the Image. Suppose if the image does not work then we use the alt attribute to represent the other image and height and width are used to make the image perfect match with your size

<img> Html Tag

<br>,<hr> Tags <br> is used for giving the line space and <hr> is used for giving horizontal line

7. Div Tag<div>-: The Div tag is the most important and very useful tag in the HTML page the div tag always gives a line break when you write the content.

8. Span tag<span>-: This tag is also very useful but the span tag always take the width of the content while as div tag which takes whole the width of the browser.

For example,

<div tag> vs <span tag>

9. <i>,<u>,<strong>,<b>:These tags are use for beautifies the content i for italic,u for underline,strong for increase boldness,b for bold the content

10. Form tag <form>: The form tag used for making forms in the web browser, The form tag consist of many other subtags like <input> this tag is used for giving input and it consist of attributes like type, value and name and <textarea> is used to give the text area and with custom width and height.

<input type="text" name="king"> <!-- simple text -->
<input type = "radio" name="gender" value="male"><!-- radiobutton-->
<input type="submit"value ="submit"> <!-- submit form -->

11. Table tag <table>-: The table tag is used for making a table in the HTML the table tag consists of <tr>table row and <td> for table data <th> tag is used to give the header of the table.

For example,

<table> Tag

12. <header>,<footer>,<nav>-:<header> tag is used to give the header and <footer> tag is used to give the footer of the html and <nav> is used in to create the navigation bar.

13.<style> and <script> tag-: These tags are used in to include the css and javascript in the html page <style for css> and <script for javascript>.

14.<iframe>-: The iframe tag is used in to embed the other document in the current html template.

15. <svg>,<canvas>,<picture>-:These tags are used to make a custom picture of your choice.

--

--