W3school (HTML Notes)
W3school (HTML Notes)
W3school (HTML Notes)
What is HTML?
•HTML stands for Hyper Text Markup Language
•HTML is the standard markup language for creating Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display the content
•HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
</body>
</html>
Example Explained
•The <!DOCTYPE html> declaration defines that this document is an HTML5
document
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the HTML page
•The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
•The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
•The <h1> element defines a large heading
•The <p> element defines a paragraph
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to
display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</html>
Note: The content inside the <body> section (the white area above) will be
displayed in a browser. The content inside the <title> element will be shown in the
browser's title bar or in the page's tab.
HTML History
Since the early days of the World Wide Web, there have been many versions of
HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
HTML Editors
A simple text editor is all you need to learn HTML.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
We believe in that using a simple text editor is a good way to learn HTML.
Follow the steps below to create your first web page with Notepad or TextEdit.
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Then under "Open and Save", check the box that says "Display HTML files as HTML
code instead of formatted text".
Then open a new document to place the code.
< !DOCTYPE html>
<html>
<body>
</html>
It is the perfect tool when you want to test code fast. It also has color coding and
the ability to save and share code with others:
Save the file on your computer. Select File > Save as in the Notepad menu.
Example
< !DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Basic Examples
In this chapter we will show some basic HTML examples.
Don't worry if we use tags you have not learned about yet.
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
example
< !DOCTYPE html>
<html>
<body>
</body>
</html>
It must only appear once, at the top of the page (before any HTML tags).
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
< p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Example
< a href="https://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example
< img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
How to View HTML Source?
Have you ever seen a Web page and wondered "Hey! How did they do that?"
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.
HTML Elements
The HTML element is everything from the start tag to the end tag:
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements).
Example
< !DOCTYPE html>
<html>
<body>
</body>
</html>
Example Explained
The <html> element is the root element and it defines the whole HTML document.
< body>
</body>
Example
< html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
However, never rely on this! Unexpected results and errors may occur if
you forget the end tag!
The <br> tag defines a line break, and is an empty element without a closing tag:
Example
< p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
For a complete list of all available HTML tags, visit our HTML Tag Reference.