Table of contents
Have you ever wondered how web pages are made and how they work? The creation of a website begins with text, blocks, and paragraphs, which are some of the core elements of HTML. Actually, HTML stands for Hyper Text Markup Language. It is not a programming Language.
Real Life Analogy
If we relate this to real life, consider the example of a car.
The frame of the car acts like HTML, providing the structure that includes the seats, wheels, doors, mirrors, and other essential components. Similarly, HTML provides the basic structure of a web page , like headings (
<h1>), paragraphs (<p>), images (<img>), and links (<a>).The color and design of the seats, car body, mirrors, bonnet, etc., represent the beautification of the car, which is achieved through CSS. CSS ensures that our car looks stylish and appealing. Similarly, CSS enhances a web page by providing colors, fonts, layouts, and animations, making it visually attractive.
The engine powers the car, enabling it to move and perform tasks like accelerating, braking, and turning. Similarly, JavaScript adds interactivity and functionality to a web page, making it dynamic and responsive.
How HTML evolve over the time
HTML 1.0 (1991):
Developed by Tim Berners-Lee.
Very basic structure for creating simple web pages.
Limited to text, links, and basic formatting tags like
<p>,<a>, and<h1>.
HTML 2.0 (1995):
Introduced forms (
<form>,<input>) for basic user interaction.Supported tables (
<table>) and images (<img>).
HTML 3.2 (1997):
Added new features like
<font>for custom text styles .It became widely used because popular web browsers .
HTML 4.01 (1999):
Introduced the concept of document types (DOCTYPES).
Allowed separation of structure (HTML) and presentation (CSS).
It introduced frames ( and ) and allowed scripting for more interactive web pages.
XHTML 1.0 (2000):
XML-based version of HTML.
It wasn’t used much because it was not flexible and didn’t work with older versions.
HTML5 (2008 Draft, 2014 Finalized):
Introduced semantic elements like
<header>,<footer>,<article>, and<section>.Audio and video support with
<audio>and<video>tags.Geolocation API, Web Sockets, and Web Storage.
HTML Components
<html> tag: This tag acts as a container for every other element except the <!DOCTYPE html> tag.
<head> tag: Includes all the document's metadata.
<title> tag: Defines the title of the document which is displayed in the browser's title bar.
<body> tag: Acts as a container for the document's content that gets displayed on the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML Cheat Sheet <title>
</head>
<body>...</body>
</html>
<meta> tag: This tag can be used to define additional information about the webpage.
<link> tag: Used to link the document to an external resource.
<style> tag: Used for defining styles for the document
<script> tag: Used to write JavaScript code or to link the document to an external script.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<h1> to <h6> tag : It represent the Heading , Started with the highest level to the lowest level of heading.
<p> tag : To write Paragraph.
<div> tag: block-level container element used to group content and structure a webpage.
<span> tag: inline element used to group or style a small portion of content within a larger block, like text, without affecting its layout.
<br/> tag: Insert line breaks.
<hr/> tag :Create a horizontal line
IMAGE IN HTML
<img/> tag: Insert images . Some attribute like - src , alt , width , height , border etc.
TEXT FORMATING IN HTML
<i> tag : formats text in italics.
<b> tag formats text in bold.
<strong> tag also formats text in bold.
<em> tag: is another emphasis tag that formats text in italics.
<sup> tag formats text as a superscript, like the power of a number, 23².
<sub> tag formats text as subscript, like Carbon Dioxide CO2.
<small> tag decreases the size of text.
<del> tag formats text as deleted by striking a line through it.
<address> tag is used to show the author's contact information.
<code> tag formats text as code snippets
<mark> tag highlights text.
<abbr> tag denotes an abbreviation.
<blockquote> tag is used to enclose a section of text quoted from another source.
Link IN HTML
<a> tag : used to establish hyperlinks that link to other pages (external web pages included) or to a particular section within the same page. - Some attribute are like href , download , target etc.
LISTS IN HTML
<ol> tag defines an ordered list.
<ul> tag defines an unordered list.
<li> tag is used to create items in the list.
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
FORMS IN HTML
<form> element is used to create a form in HTML. Some attributes are also their like as action , target , autocomplete , novalidation , method , name , required , autofocus , disabled , placeholder.
Some Input element are also their like as -
<textarea> allows users to enter multiple lines of text as input.
<select> provides a list of options for users to choose from.
<option> creates a single option within a <select> element
<input> provides an input field for users to enter data.
<button> creates a button that can be clicked to perform an action.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Write your message here" required></textarea><br><br>
<label for="category">Category:</label>
<select id="category" name="category">
<option value="feedback">Feedback</option>
<option value="question">Question</option>
<option value="suggestion">Suggestion</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
TABLES IN HTML
<table> tag defines a HTML table.
<thead> defines the header information for each column in the table.
<tbody> defines the body or content of the table.
<tfoot> defines the footer information of the table. <tr> : represents a row in the table.
<td> represents a single cell in the table.
<th> represents the heading for a column of values in the table.
<table>
<thead>
<tr>
<th>Name</th>
<th>CGPA</th>
</tr>
</thead>
<tbody>
<tr>
<td>Himanshu</td>
<td>9CGPA</td>
</tr>
<tr>
<td>Aditya</td>
<td>10CGPA</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Aman</td>
<td>8CGPA</td>
</tr>
</tfoot>
</table>
TAGS IN HTML
<header> tag: defines the header section of a webpage.
<footer> tag: defines the footer section of a webpage.
<main> tag: defines the main content section of a webpage.
<article> tag: defines a standalone section of content, such as an article.
<nav> tag: used to contain navigation links.
<meter> tag: used to measure data within a given range.
<progress> tag: used as a progress bar to indicate the completion of a task.
<dialog> tag: used to create a dialog box.
<audio> tag: used to embed an audio file on a webpage.
<video> tag: used to embed a video on a webpage.
<section> tag: defines a section within a webpage.
<aside> tag: often used for content placed in a sidebar.
<time> tag: used for formatting dates and times.
<figure> tag: used for figures such as charts.
<figcaption> tag: provides a description for a <figure>
CHARACTER AND SYMBOLS
Some symbols may not be directly available on the keyboard.
Copyright Symbol: © => ©
Dollar Symbol: $ => &dollor
Ampersand Symbol: & => &
Greater than Symbol: > => >
Less than Symbol: < => <
If you want to learn more about any tag or find new tag then prefer “mdn docs”.
Read More Blogs
I’m truly thankful for your time and effort in reading this.