HtmlCssMonk

15 Important HTML Tags Every Programmer Should Know About

By – HtmlCssMonk

html, keyboard, key

HTML stands for Hyper Text Markup Language. It is the foundation of web pages.

Basically , HTML is used to design the structure of a web page. For example – Whether a particular sentence is a Heading or a link ? Should it be bold or Italic ? Inserting images in a page and many more.

Here are 15 most important HTML tags every programmer should know about whether he/she is interested in Web development or Not !!

Let’s take a quick look at those 15 tags.

1. <html>…….</html> – Root element of the HTML document.

If you’re building a complete HTML file, it must open and close with this one.  It’s also called the root element because it is the root of all elements that make up a web page. There are no HTML tags that can wrap this one, and it can contain ONLY <head> and <body> tags, in respective order.

<html> 
         (Other elements like <head> , <body> go here)  
</html>

2. <head>…….</head> – Head of the HTML document

The head tag sits as the first element in the HTML page. It describes the information about the web page , but does not contain any web page content itself.

There are many elements that you can put inside the head element, such as:

  • title , gives a title to the web page.
  • link, which you can use to add style sheets and favicons to your page
  • meta, for specifying things like character sets, page descriptions, and keywords for search engines
  • script, for adding JavaScript code to the page
<head>
  <title>The Adventures of My Cat Lucky</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="description" content="The adventures of my favourite pet cat Lucky, with stories, pictures and movies.">
  <meta name="keywords" content="cat,Lucky,pet,animal">
  <link rel="stylesheet" type="text/css" href="/style.css">
  <link rel="shortcut icon" href="/favicon.ico">
</head>

3. <title>…….</title> – Title of the Web page

The title tag is what’s used to give the page a title. The title is displayed in the browser’s title bar (the bar at the top of the browser window), as well as in bookmarks, search engine results, and many other places. Try to give each page of your site its own unique title.

<title>Tom and Jerry Show</title>

4. <body>…….</body>– Content of your web page

The body tag is where the actual content appears. This section contains everything that’s viewable on the browser. It should contain all the content of your web page: text, images, and so on. For example, all the text seen here is contained in the body tags.

<body> 
         (all page content like text , images etc goes here)  
</body>

5. <h1>….</h1> to <h6>…</h6> – Headings

These are headings. Search engines have traditionally placed greater emphasis to text within these tags. This makes sense semantically, because if there is a heading on the page, this is likely to indicate something significant that appears within.

HTML actually supports 6 heading elements: h1h2h3h4h5, and h6h1 is for the most important headings, h2 is for less important subheadings, and so on.

<body>

       <h1>This is heading 1</h1>
       <h2>This is heading 2</h2>
       <h3>This is heading 3</h3>
       <h4>This is heading 4</h4>
       <h5>This is heading 5</h5>
       <h6>This is heading 6</h6>

</body>

6. <p>…..</p> – Paragraph

The <ptag defines a paragraph. Browsers automatically add a single blank line before and after each <p> element. A good rule of thumb when writing text for the web is to make sure that each paragraph contains a single point, topic or thought. If you want to talk about 2 different things, use 2 paragraphs.

<p>Hey, I’m a paragraph!</p>

<p>I am The Flash !!</p>
   I am The Flash !!

7. <a>…..</a> – A link

One of the most important elements in a web page, the a element lets you create links to other content. The content can be either on your own site or on another site. This is what the world wide web was built on. To make it work, just add an “href” attribute.

The value of the href attribute is the place where the link should take you.

<a href="https://www.HtmlCssMonk.com">Let's learn web dev with HtmlCssMonk.</a>

8. <img> – Images

Images make everything better, and they make your content a lot more appealing and understandable to the reader. The image tag let’s you put an image on the page. You need to use the “src” attribute to specify the address of the image. You can also use the “width” and “height” attributes if you need to control the size. If you specify only one of them, the unspecified dimension will scale proportionately.

<img src="ironman.jpg" alt="Iron Man">

9. <br> – Line break

A line break is also an empty element, so it doesn’t need to be closed.  A line break is basically an intentional space between two lines of text, created with <br>.

<p>Hello there !
<br>
How are ya !</p>
Hello there !
How are ya !

10. <ul> – Unordered list

This is an Unordered List, or as we typically know it, a bulleted list. This is a block level element in which List Items are placed. The only tag that you can legally put into a <ul> tag is a <li> tag. 

 The content of <li> tag is a little more flexible. They are block level elements, so you can put other block level elements in them — headings, paragraphs, other lists, and such. 

<ul>
<li>Fruits</li>
<li>Vegetables</li>
<li>Proteins</li>
</ul>

This is what it looks like –

  • Fruits
  • Vegetables
  • Proteins

11. <ol> – Ordered list

The more organized sibling to the Unordered List, is the Ordered List. It works the same way as the unordered list does, but it appears on the page with numbers instead of bullets. You can nest these within each other as well. You can even mix an ordered list with an unordered list.

<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>
</ol>

This is what it looks like –

  1. Apples
  2. Oranges
  3. Lemons

12. <strong> or <b> – Bold text

Wrapping text in the Strong or Bold tag has the same default effect. This makes the text inside it bold. These tags are inline elements, and should only contain other inline elements.

<b>I am Bold.</b>
I am Bold.

13. <em> or <i> – Italic or Emphasized text

The Emphasis and Italic tags also have the same default effect. These make the text inside italic. These tags are inline elements as well, and should only contain other inline elements.

<i>I am Italic</i>
I am Italic

14. <div>….</div> – A block level container

The div element is a generic container that you can use to add more structure to your page content. For example, you might group several paragraphs or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like:

  • Page headers and footers
  • Columns of content and sidebars
  • Highlighted boxes within the text flow
  • Areas of the page with a specific purpose, such as ad spots
  • Image galleries
<div id="sidebar"> 
    <h1>Sidebar Heading</h1> 
    <p>Sidebar text</p> 
    <p>More sidebar text</p> 
</div>

15. <table>…</table> – For content in tabular form

The table is one of the most powerful layout elements that HTML provides. This allows you to place content into a grid of columns and rows. To use a table, there are three main pieces involved. A tabular layout will consist of the table container, rows within that container, and cells within each row. The cells are the only thing in the table that can contain any actual content of the table.

<table>

The Table tag is the tag that starts the table. Alone, it doesn’t do much. In fact, it is not valid to have <table> tag with nothing in it. It simply doesn’t make sense to set this up without contents inside. There are only a couple of valid tags that can be direct children of a <table> tag, and they are all specific to a tabular layout.

<tr>…</tr>

One of the main HTML tags that can be a child of a <table> tag is the Table Row. This too requires content to be valid. The content of a table row can only be table cell tags. 

<td>

The Table Data cell can only appear within a <tr> tag. However, the <td> tag can contain just about anything it wants to. Other tables, headings, images, plain text, paragraphs.

Here is a sample table –

<table>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>

Result is –

OneTwo

Alrighty then !!! That’s it for today.

Tell us in the comments if you know some more interesting tags of HTML.

Wanna learn more Html , Css or JavaScript .

Check out our tutorials and Amazing quizzes.

Happy learning 🙂

Namaste !

Leave a Comment

Your email address will not be published. Required fields are marked *