Different HTML Tags

Types of HTML Tags

There are mainly two types of HTML tags, semantic and non semantic tags -

• Semantic tags: Semantic tags in HTML are used to denote some information about the content inside the tag. Example: <nav></nav> tag denotes navigation in HTML.

• Non semantic tags: Non semantic tags in HTML are used to contain HTML elements. They are not targetted for any specific functionality. Example: <div></div> and <span></span>

Tags we learnt about in this class from 11th August 2025

• <a></a> or anchor tag is used to create links to a page

  • A required attribute for this <a></a> tag is href which mentions the location to go to when the a tag is clicked.
  • Another attribute associated with the <a></a> tag is target which tells us whehter to open the target page in the same window/tab or in a differnt window/tab. target = "_blank" will always open a new tab

  <a target="_blank" href="www.google.com">Google</a> is an example use of anchor tag.

• <button></button> Tag can be used to create a button element which is more interactive with JS.

• <img /> tag can be used to show images.

  • src is a required attribute to show an image for the image tag
  • alt is an attribute which shows up when the image can not be shown
  • width attribute sets width of the image
  • height attribute sets the height of the image

• <button></button>, <a></a> and <img /> all are inline tags, so they show up on the same line.

• <ul></ul> tag is used to create unordered list

• <ol></ol> tag is used to create ordered list

• <li></li> tag denotes list items

• You can have nested list in HTML

• <ul></ul> and <ol></ol> both have an attribute named type which sets the type of the list.

  • The types of ol are - “1” (Default), “a”, “A”, “I” and “i”
  • The types of ul are - “disk” (Default), “circle”, “square”

• <ol></ol> has an attribute named reverse which reverses the number order. (The items still show in the same order)

• (Old tags) <center></center> can be used to center an element on page.

• (Old tags) <marquee></marquee> can be used to show a scrolling text. Example - <marquee behavior="scroll" direction="left">Hello</marquee>