tutorialstonight logo
A Platform To Learn To Code

HTML TAGS



HTML tags are the basic building block of webpages. HTML tags determine how the browser will format and display the HTML content.

HTML tags are used in nested form. Like: <head and <body tags are used inside <html tag, inside <head we use <title tag and inside <body we use other tags like header,paragraph etc.

Look below at the example to understand the basic structure of web page.You can see how elements are nested.

Example

Run the code

Lets discuss basic elements here:-

HTML <!DOCTYPE>

  • A <!DOCTYPE> is an information that identify a particular SGML (Standard Generalised Markup Language) with a Document Type defination.
  • <!DOCTYPE> is very first thing that is mentioned in any HTML document although <!DOCTYPE> is not an HTML tag.
  • <!DOCTYPE> shows the document type of the file.And also tells server what version of HTML file it is.
  • <!DOCTYPE> is not case sensitive.so you can write it in lower-case letter but it is suggested to write in upper-case.

html tag

  • <html> tag is called root tag of HTML document because it is root element in tree of elements of a web page.
  • All other elements like head or body goes inside it.
  • It contain all other element of web page except <!DOCTYPE>.

HTML head tag

  • <head> contain all necessary information of web page.
  • Information like: title,base,script,meta,style all resides in <head>.
  • Contents of <head> element is not diaplayed in web page.

Example


HTML body tag

  • A <body> tag defines body of HTML document.
  • All the element which are displayed over web page lies inside <body> tag.
  • Paragraph,heading,images,video,link every visible content is defined inside <body> tag.

Example

Run the code

Heading tags

  • Heading tags are used to give headings in HTML documents.
  • There are six levels of headings representing six different sizes of heading.
  • Headings are <h1>,<h2>,<h3>,<h4>,<h5> and <h6>. Where <h1> is biggest in size and <h6> is smallest in size.

Example

Run the code

Paragraph tag

  • <p> tag defines paragraphs in HTML documents.
  • Writing content to one <p> tag and then moving to the next <p> tag automatically changes the paragraph in the web page.

Example

Run the code

Preformatted tag(pre tag)

  • <pre> tag allows you to define spacing and lining itself in an HTML document.
  • Content on a web page is decorated in the same fashion as you define in <pre> tag.

Example

Run the code

HTML br (line breaking tag)

In HTML line breaking is specified by the <br> tag.

The <br> tag is an empty tag.We need not to close it in HTML but in XHTML it is not valid.

Example

Run the code

NOTE:It is valid to use <br> in HTML but in XHTML it's not valid instead we use <br />


HTML horizontal line

In HTML horizontal line is specified by the <hr> tag.

The <hr> tag is an empty tag.We need not to close it in HTML but in XHTML it is not valid.

Example

Run the code

NOTE:It is valid to use <hr> in HTML but in XHTML it's not valid instead we use <hr />.

HTML center tag

HTML <center> tag is used to put any content in the center of the block of webpage.

Example

Run the code