The Ultimate Guide to HTML: From Fundamentals to Advanced Techniques

HTML (HyperText Markup Language) is the standard language used to create and design websites and web applications. It structures the content on the web by using a system of elements, tags, and attributes.

1.The Birth of HTML
HTML was invented by Tim Berners-Lee, a British computer scientist, in 1989 while working at CERN (European Organization for Nuclear Research). He proposed the idea of a "hypertext system" that would allow researchers to share and access documents over the internet.

In 1991, Berners-Lee created the first version of HTML, which included just 18 tags. These tags allowed the creation of simple documents with hyperlinks (which is why it’s called HyperText) and basic formatting. This marked the birth of the World Wide Web. Tim Berners-Lee introduced HTML as a way to format documents and hyperlinks on the web.

2.HTML 2.0 (1995)
As the internet began to grow rapidly, the need for a standardized version of HTML arose. In 1995, the Internet Engineering Task Force (IETF) formed a working group to standardize HTML, leading to the release of HTML 2.0. HTML 2.0 was the first version to be formally standardized and included all the basic elements necessary for web documents. It supported text, images, tables, forms, and links but was still quite limited in terms of formatting and layout capabilities.

3.HTML 3.2 and HTML 4.0 (1997 - 1999)
By 1997, HTML had become more widely used, and the World Wide Web Consortium (W3C), led by Tim Berners-Lee, took over the development and standardization of HTML. HTML 3.2 (1997): This version introduced table-based layout, the tag, and other presentational elements. It was a major step forward for web design, although still lacking in advanced styling features.

HTML 4.0 (1999): This version was a significant upgrade, emphasizing separation of content and presentation. HTML 4.0 encouraged web developers to use CSS (Cascading Style Sheets) for layout and design, which improved accessibility and usability. HTML 4.0 also introduced features like:
New semantic elements such as <header>, <footer>, <section>, and <article> (though they would become more relevant in later versions). Internationalization support (with support for different languages). Scripting support with <script> tags for JavaScript.

4.HTML 5 (2014)
HTML5 is the most significant update to HTML, introduced to meet the growing demands of modern web applications, multimedia content, and mobile devices.
Key Features Introduced in HTML5:

New Semantic Elements: HTML5 added more meaningful elements for better document structure, such as: <header>, <footer>, <nav>, <article>, <section>, <figure>, and more.

Multimedia Support: HTML5 introduced new elements like:- <audio> and <video> for embedding multimedia directly into web pages without needing plugins like Flash. <canvas> for dynamic, scriptable rendering of 2D shapes and bitmap images.

Offline Capabilities: HTML5 added support for offline web applications with features like:-Local storage and IndexedDB to store data on the client side.

Form Controls: New input types were introduced, including date, email, number, and range to improve user input and form validation.

API Support: HTML5 included many JavaScript APIs for geolocation, local storage, web workers, and more.

Better Mobile Support: HTML5 was designed to be mobile-friendly, ensuring that websites could be easily viewed on smartphones and tablets.

HTML5 marked the transition to web apps and interactive websites, as it offered features that eliminated the need for many third-party plugins (like Flash and Java applets).

5. HTML Today
After HTML5, there was no formal "HTML 6." Instead, HTML has transitioned into a living standard under the stewardship of the Web Hypertext Application Technology Working Group (WHATWG).This living standard approach means HTML is continuously evolving, with regular updates and improvements.New features are introduced as necessary, based on the needs of modern web applications and the web development community.

HTML Structure

HTML documents are structured hierarchically, with elements containing other elements. Here's a basic breakdown of an HTML document structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

• <!DOCTYPE html>: Declares the document type and version of HTML.

• <html>: The root element that contains all the HTML content.

• <head>: Contains metadata such as the title, character set, and external links.

• <body>: Contains the visible content of the page like text, images, and links.

HTML Elements and Tags :
HTML uses elements that are enclosed in tags. An element can contain other elements, text, or attributes.

• Tags: Elements are wrapped in angle brackets, e.g., <h1>, <p>, <a>.

• Opening Tag: <h1> (start of an element).

• Closing Tag: </h1> (end of an element).

• Content: The content goes between the opening and closing tags.

• Empty Tags: Some elements don’t have closing tags, such as <img> and <br>.

Common HTML Tags :

• Headings: <h1> to <h6> tags represent headings, with <h1> being the most important and <h6> the least.

<h1>This is a most important heading</h1>
<h6>This is a lest important heading<h6>

• Paragraphs: <p> is used to define paragraphs.

<p>This is a paragraph of text.</p>

• Links: <a> is used to create hyperlinks.

<a href="https://dev.to">Dev.to</a>

These links are used to navigate the user into different addresses/references. These links are generated by anchor tag. anchor tag denoted with 'a'.We can even keep one element inside another element called as "nested elements".eg:

<p> for more content like,share and subsctibe <a href="https://youtube.com">fb</a></p>

we can even navigate to mail using 'mailto:mailid' or telephone using 'tel:number' or watsapp using 'wa.me/number'

To open anchor links in new tab , we use attribute target and set value = "_blank"
eg:

<a href="https://dev.to" target="_target">click for Dev.to</a>

• Images: <img> is used to display images.But img is a self closing tag. self closing tags are the tags which do not have closed tags.

<img src="image.jpg" alt="Description of Image">

img have following attributes:
src -- used to keep links/path of images source.
alt -- it describes alternative text for image and it works only when
src is not works.
height -- used to mention height of the image.
width -- used to mention width of the image.

• Lists: Lists are used to list out certain items either ordered or unordered. eg: grocery list,expenditure list,books list, students list,todo lists,results,contact list some lists have order and some don't. In HTML, lists are classified as 3 types :

1.ordered list : ordered lists are used to list out certain items in an order.HTML uses 'ol' tag for ordered lists.Inside ol, each list item denoted by 'li' tag.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

2.unordered list: unordered lists are to lists out items in which order is not necessry.unordered lists uses 'ul' tag and each list item is 'li'
Type of the unordered list can be done similary as ordered but not recommanded.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

3.Definition list: These lists are used to define certain statements or events, changelog,timline etc.., They uses 'dl' tag.
Each item will have 2 properties
dt- definition term
dd - definition data

• Tables: Tables are used to represent the data in rows and columns. Eg: crickbuzz, screener, school/college time tables...etc. Horizontal lines of information is called row,Vertical lines of information is called column. tables are created by 'table' tag each table have rows, which are created by 'tr' tag each row contains either heading or data , which are created by 'th' or 'td' tags

Formatting Tags :

Click here

Element :
An element is nothing but content with open and closed tags.
<h1>heading</h1> -- h1 element
Elements are two types:
i. block element: block element will not allow any other element beside.
blocks element also have height and width
Eg: h1 to h6, p, div etc..,
ii. in-line element: inline element will allow other elements beside.
inline elements also not have height and width
Eg: a, img, span

div and span are container elements, they are used to wrap certain elements as a group.

div is a general block container element.
span is a genral inline container element.

** Class and id's** :
we can specify a class name or id name to any element to identify the element.class names can be multiple and multiple elements can have same class name.id names will be always unique or singular.
<element class="classname" id="idname"></element>

Semantic elements :
sematic elements are introduced to make meaningful HTML which is easily understand by search engines. This practice is good for better SEO(Search Engine Optimation). semantic elements will not change any UI.
Most used semanti elements are:
header, main, footer, nav, aside, section, article, thead, tbody, tfoot, address, figure, picture etc...

Media :

Audio--audio's are used to keep audio track files into webpage. it uses audio tag and for source it uses source tag. we can use flags like autoplay,controls to make audio plays automatically and contains controls.

Video--video's are used to show the media to user. To keep video into webpage, we can use video and for source, it uses source tag.

Iframe --Iframe is used to embedany 3rd party media into your website.

<iframe src=""></iframe>

Figure--Figure is used to display images with its captions.

<figure>
   <img src="" alt=""/>
   <figcaption>caption</figcaption>
 </figure>

Picture :
Picture is used to add responsive images to web page(means different images for different devices).it works with source tag containing media queries.

<picture>
  <source media="">
  <source media="">
  <img />
</picture>

Forms :

forms are used to collect user's data such as name,email,phone_number etc..,Eg: login, registration, feedback,contact,admission, attendance form, messages,subscribe,search, forgot password etc...,To take user's data we can use a self closing element named 'input', Every input will have following attributes:
type: it defines the type of input it can take.
placeholder: Dummy text to hold the place until actual value comes.
id : used to identify the input uniquely.
name : name is the variable by which value is sent to server.
Label Tag: label is used to select certain elements and it needed to be connected with input's id (for attribute) form tag also have attributes such as :
-- action: contains the path of server(where the form to be submitted).
-- method: it defines the way to send the values.
--- GET: get shows all the values in URL.
--- POST: post will not show the values in the URL.

Input Types: There are different types of inputs such as
i. text: text is used for alphanumerical inputs.
ii. email: email is used for email inputs.
iii. password: password is used for secret keys,pins,password etc..,
iv. url: url is used to input links of http/https;
v. number: number is used to input the only numerical values.
vi. date: date is used to input date using default calender.
vii. time: time is used to input time using default timer.
viii. datetime-local: it is used to input date and time at a time.
ix. week : it is used to input week of the year.
x. month : it is used to input the month of the year.
xi. file: file is used to upload certain files.
xii. hidden : hidden is used to hide the input.
xiii. button: button is used to include buttons of different variations.
submit: submit is used to submit the form.
reset: reset is used to reset the form .
xiv.color: color is used to select specific colours.
xv. range: range is used to get range slider.

Radio buttons: radio buttons are used to select only one out of the choices. In radio buttons, all same purpose radio buttons should have same name.

<input type="radio" name="answer" value="yes>
<input type="radio" name="answer" value="no">

Checkboxes: checkboxes are used to select one or more values.

<input type="checkbox" name="" id="" value="">

all names of same purpose checkboxes should be same.

Dropdowns: Drop Downs are used to select one or more values.
it uses 'select' tag where each option is a 'option' tag

<select>
<option value=" "> </option>
</select>

HTML Validation

HTML validation is the process of checking whether an HTML document follows the syntax and rules defined by the HTML specification (such as HTML5, HTML4, or XHTML). It helps ensure that a webpage is properly structured and can be rendered correctly by browsers. Validation also plays a significant role in improving accessibility, search engine optimization (SEO), and web performance.

HTML5 Validation Methods:
With HTML5, validation has become easier, thanks to new form elements and input types that allow better client-side validation.

• Required Fields : HTML5 introduces the required attribute, which ensures that a user fills in a form field before submitting it.

<form>
  <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

• Pattern Validation : You can define a pattern for form inputs using the pattern attribute, which ensures that the user input matches a specific format (using regular expressions).

<form>
  <input type="text" name="pincode" pattern="\d{6}" title="Enter a 6-digit pin code">
  <input type="submit" value="Submit">
</form>

• Input Types for Validation : HTML5 introduces new input types like email, url, date, number, and tel, which provide built-in validation for specific data formats.

<form>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>

HTML is the backbone of web development. It structures the content on the web using tags, elements, and attributes, forming the foundation for building web pages. As you advance, you will combine HTML with CSS (for styling) and JavaScript (for interactivity) to create fully functioning websites.