HTML Introduction

HTML stands for Hyper Text Markup Language, it is the foundation of creating webpages
HTML is the standard markup language for creating Web pages
HTML defines the structure of a Web page and tells a web browser how to display content
HTML consists of a set of tags and attributes used to define the webpage
Example: text, images, links, forms, frames, and more
Easy to understand, Easy to code, and simple structures to create webpages
This Tutorial follows the latest version of HTML5 to keep you updated

HISTORY

Created by Tim Berners-Lee in 1989
The first version of HTML i.e., HTML 1.0 was released in 1991
A subsequent version was released in 1995 HTML 2.0, 1997 HTML 3.2 and 4.0, 1999 HTML 4.01, and many more
The latest version of HTML5 was released in 2014
It's constantly growing and adapting to meet the demands of the ever-changing web
Check the table below for how HTML has evolved

S.No

Year

Version

Description

1991

HTML 1.0

Basic markup for linking documents on the web

1995

HTML 2.0

Introduced tables, forms, and basic scripting

1997

HTML 3.2

Added applet support and improved tables

1997

HTML 4.0

Introduced CSS, frames, and advanced scripting

1999

HTML 4.01

Bug fixes and clarifications to HTML 4.0

2000

XHTML

HTML reformulated with XML syntax

2014

HTML5

Major revision with multimedia support, canvas, and more

HTML Structure

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>Paragraph text</p>
  </body>
</html>

Run

<!DOCTYPE html> - It is a declaration that defines a document as an HTML5 document.
<html> - It is the root of an HTML Page.
<head> - Under the element it contains the meta-information about the HTML page, stylesheets, and scripts.
<title> - It specifies the title of the page.
<body> - The main content of the page where we include text, links, images, forms, and more. And many tags are used in html some of them are <h1>, <p>, <a>, <img>. Get to know about the Basic tags

Refer: Learn more about HTML Structure

HTML Elements

HTML Elements define the characteristics of Content to perform on an HTML page. They are mainly used in the body section of the html page.
For Example:

<h1> - Defines the content as heading
<p> - Defines the content as Paragraph
<i> - Defines the content as Italic
<span> - Defines the content as normal without any line break

Similarly, there are many elements.
Each element has a tag name with a start tag and an end tag. But for some tags, there is no end tag.

Start Tag

Example

End Tag

<h1>

Heading h1

</h1>

<p>

Paragraph p

</p>

<i>

Italic i

</i>

<br>

Hi I am
Breaked

<hr>

Hi I am Breaked with a line

Note: HTML Elements can be represented in small or large case letters like <h1> and <H1>. They are not case-sensitive. Don't Skip the End tag. If so the content may get changed as the characteristics of the unclosed tag will get applied to all elements next to it.

The <!DOCTYPE> Declaration

It is a declaration that defines a document as an HTML5 document
It must only appear once in a document and at the top of the page i.e., before any HTML tags
The <!DOCTYPE> declaration is not case-sensitive which means even if you don't keep the browser will automatically detect and keeps the declaration.

Example

<!DOCTYPE html> <!--DOCTYPE HTML Declaration-->
<html>
  <head>
    <title>DOCTYPE html</title>
  </head>
  <body>
    <h1>Doctype Declaration is not case sensitive</h1>
    <p>It defines a document as a HTML5 document.</p>
  </body>
</html>

Run

HTML Editors

Text editors: Text editors are basic programs that allow you to edit and save HTML code using plain text. Some popular text editors for HTML include Notepad (Windows), TextEdit (Mac), and Sublime Text.

IDEs: Integrated Development Environments (IDEs) are comprehensive software applications that provide advanced editing and debugging tools for web development. These programs often include code editors, project management tools, and debugging and testing features. Popular HTML IDEs include Visual Studio Code, NetBeans, and Eclipse.

Online editors: Online HTML editors allow you to create and edit HTML documents directly in your web browser, without having to install any software on your computer. Try out your HTML code here with our online compiler.

Web Browsers

Web Browsers are used to read HTML Documents.
They display the HTML Documents correctly either from local files or by website. Some Web Browsers are Chrome, Safari, Firefox, Edge, etc
They do not show the code of the HTML Documents, It compiles and displays in a visual format(output)
You can view the code, inspect it, modify the code locally, and see the changes
HTML Editors use Web Browsers to show the Output

Quick Recap - Topics Covered

Introduction and history of HTML

Structure of HTML

The <!DOCTYPE html> declaration

HTML Editors

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

HTML Introduction

HISTORY

HTML Structure

Example

HTML Elements

Heading h1

The <!DOCTYPE> Declaration

Example

HTML Editors

Web Browsers

Quick Recap - Topics Covered

Practice With Examples in Compilers

Example JS

Quiz