What is HTML?
HTML is the standard markup language for creating Web pages.
•HTML stands for Hyper Text Markup Language
•HTML describes the structure of Web pages using markup
•HTML elements are the building blocks of HTML pages
•HTML elements are represented by tags
•HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
•Browsers do not display the HTML tags, but use them to render
the content of the page
You can create your own website
HTML Document
<!DOCTYPE html> • The <!DOCTYPE html> declaration
<html> defines this document to be HTML5
<head> • The <html> element is the root
<title>Page Title</title> element of an HTML page
</head> • The <head> element contains meta
<body> information about the document
• The <title> element specifies a title
<h1>My First Heading</h1> for the document
<p>My first paragraph.</p> • The <body> element contains the
visible page content
</body> • The <h1> element defines a large
heading
</html>
• The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is
the end tag
• The end tag is written like the start tag, but with a forward
slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the end tag
the closing tag.
Web Browsers
The purpose of a web
browser (Chrome, IE,
Firefox, Safari) is to read
HTML documents and
display them.
The browser does not
display the HTML tags, but
uses them to determine
how to display the
document:
HTML Page Structure
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the red text above) is
displayed in a browser.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and
helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML
tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
How to write HTML?
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML
editors.
However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the four steps below to create your first web page with
Notepad or TextEdit.
Step 1: Open Notepad (PC)
• Windows 8 or later:
• 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
Step 2: Write Some HTML
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the
HTML Page
Save the file on your
computer. Select File >
Save as in the Notepad
menu.
Name the
file "index.htm" and
set the encoding
to UTF-8 (which is the
preferred encoding for
HTML files).
You can use either .htm or .html as file extension. There is no difference, it is
up to you.
Step 4: View the
HTML Page in Your
Browser
Open the saved
HTML file in your
favorite browser
(double click on
the file, or right-
click - and choose
"Open with").
HTML Basic Examples
HTML Documents
• All HTML documents must start with a
document type declaration: <!DOCTYPE
html>.
• The HTML document itself begins
with <html> and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with
the <h1> to <h6> tags.
<h1> defines the most important
heading. <h6> defines the least
important heading:
Sample
<h1>This is heading 1</h1> This is heading 1
<h2>This is heading 2</h2> This is heading 2
<h3>This is heading 3</h3>
This is heading 3
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
This is a paragraph.
This is another paragraph.
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This
is a link</a>
HTML Links
HTML links are defined with the a tag:
This is a link
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are provided as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com" wi
dth="104" height="142">
How to insert image using HTML Code
Code Result
<!DOCTYPE html> HTML Images
<html>
<body> HTML images are defined with
the img tag:
<h2>HTML Images</h2>
<p>HTML images are defined with the
img tag:</p>
<img src="w3schools.jpg"
alt="W3Schools.com" width="104"
height="142">
</body>
</html>
HTML Buttons
HTML buttons are defined with the <button> tag:
Example
<button>Click me</button>
Example
HTML Code Result
• <!DOCTYPE html> HTML Buttons
• <html>
• <body> HTML buttons are defined
with the button tag:
• <h2>HTML Buttons</h2>
Click me
• <p>HTML buttons are defined
with the button tag:</p>
• <button>Click me</button>
• </body>
• </html>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags
(list items):
• Example
• <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Sample Code
<!DOCTYPE html> An Unordered HTML List
<html>
<body> • Coffee
<h2>An Unordered HTML List</h2>
• Tea
• Milk
<ul>
<li>Coffee</li>
An Ordered HTML List
<li>Tea</li> 1. Coffee
<li>Milk</li>
</ul>
2. Tea
3. Milk
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
HTML Elements
• An HTML element usually consists of
a start tag and end tag, with the content
inserted in between:
• <tagname>Content goes
here...</tagname>
• The HTML element is everything from the
start tag to the end tag:
• <p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
• The <html> element defines the whole
document.
• It has a start tag <html> and an end tag
</html>.
• The element content is another HTML element
(the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• The <body> element defines
the document body.
• It has a start tag <body> and
an end tag </body>.
• The element content is two other
HTML elements (<h1> and <p>).
• <body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
• The <h1> element defines
a heading.
• It has a start tag <h1> and
an end tag </h1>.
• The element content is: My First
Heading.
• <h1>My First Heading</h1>
• The <p> element defines
a paragraph.
• It has a start tag <p> and
an end tag </p>.
• The element content is: My first
paragraph.
• <p>My first paragraph.</p>
Empty HTML Elements
• HTML elements with no content are
called empty elements.
• <br> is an empty element without a
closing tag (the <br> tag defines a
line break).
• Empty elements can be "closed" in
the opening tag like this: <br />.
HTML Attributes
Attributes provide additional information about HTML
elements.
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an
element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
The href Attribute
• HTML links are defined with
the <a> tag. The link address is
specified in the href attribute:
Example
<a href="https://www.w3schools.com"
>This is a link</a>
<!DOCTYPE html> The href Attribute
<html>
<body> HTML links are defined
with the a tag. The link
<h2>The href Attribute</h2> address is specified in the
<p>HTML links are defined with the href attribute:
a tag. The link address is specified in
the href attribute:</p> This is a link
<a
href="https://www.w3schools.com">T
his is a link</a>
</body>
</html>
The src Attribute
• HTML images are defined with
the <img> tag.
• The filename of the image source is
specified in the src attribute:
Example
<img src="img_girl.jpg">
<!DOCTYPE html> The src Attribute
<html> HTML images are defined with
<body> the img tag, and the filename of
the image source is specified in
<h2>The src Attribute</h2> the src attribute:
<p>HTML images are defined
with the img tag, and the
filename of the image source is
specified in the src attribute:</p>
<img src="img_girl.jpg"
width="500" height="600">
</body>
</html>
The width and height Attributes
• Images in HTML have a set
of size attributes, which specifies the
width and height of the image:
Example
<img src="img_girl.jpg" width="500"
height="600">
Size Attributes
<!DOCTYPE html>
Images in HTML have a set of
<html> size attributes, which specifies the
<body> width and height of the image:
<h2>Size Attributes</h2>
<p>Images in HTML have a set of
size attributes, which specifies
the width and height of the
image:</p>
<img src="img_girl.jpg"
width="500" height="600">
</body>
</html>
The alt Attribute
• The alt attribute specifies an alternative
text to be used, when an image cannot
be displayed.
• The value of the attribute can be read
by screen readers. This way, someone
"listening" to the webpage, e.g. a blind
person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with
a jacket">
<!DOCTYPE html> The alt Attribute
<html> The alt attribute should reflect the
image content, so users who cannot
<body> see the image gets an understanding
of what the image contains:
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect
the image content, so users who
cannot see the image gets an
understanding of what the image
contains:</p>
<img src="img_girl.jpg" alt="Girl with
a jacket" width="500" height="600">
</body>
</html>
The style Attribute
• The style attribute is used to specify
the styling of an element, like color,
font, size etc.
Example
<p style="color:red">I am a
paragraph</p>
<!DOCTYPE html> The style Attribute
<html> The style attribute is used to
<body> specify the styling of an
element, like color:
<h2>The style Attribute</h2> I am a paragraph.
<p>The style attribute is used
to specify the styling of an
element, like color:</p>
<p style="color:red">I am a
paragraph.</p>
</body>
</html>
HTML Headings
• Headings are defined with
the <h1> to <h6> tags.
• <h1> defines the most important
heading. <h6> defines the least important
heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
How to adjust headings
Bigger Headings
• Each HTML heading has a default
size. However, you can specify the
size for any heading with
the style attribute, using the
CSS font-size property:
Example
• <h1 style="font-
size:60px;">Heading 1</h1>
<!DOCTYPE html>
<html> Heading 1
<body> You can change the size of a
heading with the style attribute,
using the font-size property.
<h1 style="font-
size:60px;">Heading 1</h1>
<p>You can change the size of
a heading with the style
attribute, using the font-size
property.</p>
</body>
</html>
HTML Paragraphs
The HTML <p> element defines
a paragraph:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<!DOCTYPE html> This is a paragraph.
<html> This is a paragraph.
<body> This is a paragraph.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Don't Forget the End Tag
• Most browsers will display HTML
correctly even if you forget the end
tag:
Example
<p>This is a paragraph.
<p>This is another paragraph.
HTML Line Breaks
• The HTML <br> element defines
a line break.
• Use <br> if you want a line break (a
new line) without starting a new
paragraph:
Example
<p>This is<br>a paragraph<br>with
line breaks.</p>
<!DOCTYPE html> This is
<html> a paragraph
<body> with line breaks
<p>This is<br>a
paragraph<br>with line
breaks</p>
</body>
</html>
Sample HTML
<!doctype html> The Fish Web Site
<html> Welcome to the fish web site.
<head> Everything you want to know
<title> My Web Page </title> about fish is in this site.
</head>
This is a Section on Bass Fish
<body>
<h1> The Fish Web Site </h1> Bass Fish live in lakes.
<p> Welcome to the fish web site.
Everything you want to know about
fish is in this site. </p>
<h2> This is a Section on Bass Fish
</h2>
<p> Bass Fish live in lakes. </p>
</body>
</html>
