INTRODUCTION

Markup language
Defines content for the browser to display
Separates "content" and "presentation"
Pre-defined set of elements (tags)

WHAT IS HTML?

HISTORY

In the late 1980s, Tim Berners-Lee was working as a physicist at CERN (the European Organization for Nuclear Research). He devised a way for scientists to share documents over the internet.

World Wide Web Consortium

The main international standards organization for the World Wide Web (abbreviated WWW or W3)

Specification Maturation

Working Draft (WD)
Candidate Recommendation (CR)
Proposed Recommendation (PR)
W3C Recommendation (REC)

W3C

HTML 0.9
RFC 1966 — HTML 2.0
HTML 3.2 — 14 jan. 1997 year;
HTML 4.0 — 18 dec. 1997 year;
HTML 4.01 — 24 dec. 1999 year;
HTML5 — 28 oct. 2014 year
HTML 5.1 — from 17 dec. 2012 year.

HTML VERSIONS

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

DOCTYPE: HTML 4

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

DOCTYPE: XHTML 1.0

HTML 5

<!DOCTYPE html>

DOCTYPE: HTML 5

<!DOCTYPE html>
<html>

  <head>
    <title>My first page</title>
  </head>
  
  <body>
    <p>Hello <b>world!</b></p>
  </body>

</html>

Text containing markup tags
Markup tags tell the browser how to display the page

HTML STRUCTURE

All HTML documents must start with the type declaration of HTML: <!doctype HTML>
The HTML document itself begins with <html> and ends with </html>
The visible part of the HTML document is between <body> & </body>
The information about the page like title of the page, scripts, styles and meta data is between <head> & </head>

<!doctype html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Heading</h1>
    <p>This is a paragraph</p>        
</body>
</html>

BASIC HTML

According to the HTML standard, only a few tags are legal inside the head section

<head>

Defines information about the document

<title>

<link>

<meta>

<!DOCTYPE>

Defines the document type. This tag goes before the <html> start tag.

Defines a resource reference

Defines meta information

Defines the document title

HTML HEAD

HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends with the greater-than sign (">"). Such markup is called a tag.

Make sure to close the tag, as some tags are closed by default, whereas others might produce unexpected errors if you forget the end tag.
Proper nesting is one rule that must be obeyed in order to write valid code.

Tags gotchas

Correct

Wrong

<p>This <b>is</p> incorrect</b>

<p>This <b>is</b> correct</p>

ATTRIBUTES

HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser .

This is useful for explaining a section of markup, or leaving notes for other people who might work on the page, or for leaving reminders for yourself.

HTML comments are enclosed in symbols as follows:

<!doctype html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <!-- The page content -->
    <h1>Heading</h1>
    <p>This is a paragraph</p>        
</body>
</html>

COMMENTS

HTML consists of a set of elements
Elements define the semantic meaning of their content
Include everything between two matching element tags , including the tags themselves

Some elements have very precise meaning, as in "this is an image", or "this is a heading". Others are less specific, such as "this is a section on the page" or "this is part of the text."

<html>
  <body>
    <p>You are in your beginning stage of</p>
    <p>HTML</p>
  </body>
</html>

This structure is often thought of as a tree with branches (in this case, the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is called the DOM : the Document Object Model

ELEMENTS

Nesting is the act of placing an HTML element inside another HTML element. You can nest tags infinitely -- as your project requires it.
In this example, <p> tags were inside our <body> tag. Our <body> tag was also inside our <html> tag. Accordingly, this will be how the resulting web page is structured.

<html>
  <body>
    <p>You are in your beginning stage of</p>
    <p>HTML</p>
  </body>
</html>

NESTING

Unknown element tags are ignored
Unknown attributes are ignored
Unknown values are ignored
Browser tries to close tags itself if they are not closed

Operator	Description	Example
+	Addition	var x = 10 + 2;
-	Subtraction	var x = 5 - 3;
*	Multiplication	var x = 2 * 2;
/	Division	var x = 20 / 5;
%	Modulus	var x = 10 % 4;
++	Increment	x++;
--	Decrement	x--;