Career Planning HTML tutorial -3

HTML Tutorial

Building blocks of HTML

An HTML document consists of its basic building blocks which are:
  • Tags: An HTML tag surrounds the content and applies to mean to it. It is written between < and > brackets.
  • Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.


<tag name  attribute_name" attr_value"> content </ tag name>  


  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>The basic building blocks of HTML</title>  
  5.  </head>  
  6.   <body>  
  7.        <h2>The building blocks</h2>  
  8.        <p>This is a paragraph tag</p>  
  9.        <p style="color: red">The style is attribute of paragraph tag</p>  
  10.        <span>The element contains a tag, attribute, and content</span>  
  11.   </body>  
  12. </html>     


The building blocks

This is a paragraph tag
The style is an attribute of the paragraph tag
The element contains a tag, attribute, and content


HTML tags are like keywords which define how a web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  1. All HTML tags must enclosed within < > these brackets.
  2. Every tag in HTML perform different tasks.
  3. If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)


<tag> content </tag>

HTML Tag Examples:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags:

<br> Tag: br stands for brake line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags:

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, 
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, 
<del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags:

<a> and <base>

HTML Image and Object Tags:

<img>, <area>, <map>, <param> and <object>

HTML List Tags:

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags:

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags:

form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags:

script and noscript

Post a Comment