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.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
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 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 Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
HTML Code
<html>
<head>
<title>HTML Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space
(a margin) before and after a paragraph.
HTML Code
<html>
<head>
<title>HTML Paragraph</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Output
This is a paragraph.
This is a paragraph.
This is a paragraph.
HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML
source code.
<!-- Write your comments here -->
HTML Text Formatting
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> Bold text The HTML <b> element defines bold text, without any extra
importance.
<strong Important The HTML <strong> element defines text with strong importance. The
> text content inside is typically displayed in bold.
<i> <Italic text The HTML <i> element defines a part of text in an alternate voice or
mood. The content inside is typically displayed in italic.
<em> Emphasized The HTML <em> element defines emphasized text. The content
text inside is typically displayed in italic.
<mark> Marked text The HTML <mark> element defines text that should be marked or
highlighted
<small> Smaller text The HTML <small> element defines smaller text
<del> Deleted text The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text
<ins> Inserted text The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text
<sub> Subscript The HTML <sub> element defines subscript text. Subscript text
text appears half a character below the normal line, and is sometimes
rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O
<sup> Superscript The HTML <sup> element defines superscript text. Superscript text
text appears half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]
HTML Code
<html>
<head>
<title>HTML Formatting Text</title>
</head>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<strong>This text is important!</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
Output
This text is normal.
This text is bold.
This text is important! This text is italic This text is emphasized This is some smaller text.
Do not forget to buy milk today.
My favorite color is blue red.
My favorite color is blue red.
This is subscripted text.
This is superscripted text.
HTML Attributes
HTML attributes provide additional information about HTML elements.
HTML Attributes
•All HTML elements can have attributes
•Attributes provide additional information about elements
•Attributes are always specified in the start tag
•Attributes usually come in name/value pairs like: name="value"
HTML Images
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
•src - Specifies the path to the image
•alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web
server and inserts it into the page. Therefore, make sure that the image actually stays in the
same spot in relation to the web page, otherwise your visitors will get a broken link icon. The
broken link icon and the alt text are shown if the browser cannot find the image.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
Image Size - Width and Height Attributes
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Images in Another Folder
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Example
<html>
<body>
<h2>Image Size</h2>
<p>Here we specify the width and height of an image with the width and height attributes:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
