Understanding HTML Tags and Elements
HTML stands for Hyper Text Markup Language. HTML is the skeleton of webpage . It defines the meaning and content of webpage. Hyper Text refers to the links that connects web pages with one another either within single website or between websites. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as <Head> , <title>, etc.
HTML tag
Some special elements present in the document is called tag. Tags are basic building block of HTML. Tags are basically text surrounded by Brackets (<>). The text is not case-sensitive. It can be written in lowercase, uppercase or a mixture . For example - <Head> can be written as <head> , <HEAD>.
Most elements come in pairs to wrap around content:
Opening Tag (
<p>): Tells the browser where the element starts.Content: The actual text or data being displayed.
Closing Tag (
</p>): Identical to the opening tag but includes a forward slash. It tells the browser where the element ends.
While people often use "tag" and "element" interchangeably, there is a technical difference between them. An Element is the combination of the opening tag, the content and the closing tag. Example: <p>Hello World</p> is an element. <p> is just the tag.
Self-closing (void) elements
Not every element needs to wrap around content. Some just exist as a single point in the document. These are called Void Elements. They do not have a closing tag.
Examples:
<img>: Inserts an image.<br>: A simple line break.<input>: A field for user data.<hr>: A horizontal line
Block-level vs inline elements
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. It always takes up the full width available. Examples are: <p> and <div>. Inline elements don’t have top and bottom margin.
An inline element does not start on a new line. It only takes up as much width as necessary. Example - <span> , <a>, <strong>, <em>, <img>. Block elements have top and bottom margin.
Commonly used HTML tags
Some commonly used HTML tags are -
Structure & Text
<html>: The root of the document.<head>: Contains metadata (titles, links to CSS), not visible on the page.<body>: Contains all visible content.<h1>to<h6>: Headings (H1 is the most important).<p>: Paragraphs of text.<div>: A generic container (block-level) used to group elements for styling.
Links & Media
<a>: Hyperlink. Uses thehrefattribute to point to a URL.<img>: Displays an image. Usessrc(source) andalt(description).
Lists
<ul>: Unordered list (bullet points).<ol>: Ordered list (numbered).<li>: List item (placed inside<ul>or<ol>).
Forms
<form>: A container for user input.<input>: Various types (text, password, checkbox).<button>: A clickable button.