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
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph. </p>
</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
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>
The href Attribute
The <a>
tag defines a hyperlink.
Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
HTML Headings
HTML 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>
HTML Paragraphs
The HTML <p>
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.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b>
- Bold text
<strong>
- Important text
<i>
- Italic text
<em>
- Emphasized text
<mark>
- Marked text
<small>
- Smaller text
<del>
- Deleted text
<ins>
- Inserted text
<sub>
- Subscript text
<sup>
- Superscript text
HTML <blockquote>
for Quotations
The HTML <blockquote>
element defines a section that is quoted from another source.
HTML <q>
for Short Quotations
The HTML <q>
tag defines a short quotation.
HTML <abbr>
for Abbreviations
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address>
for Contact Information
HTML <cite>
for Work Title
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo>
for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo>
tag is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
The following two
elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-c
Top comments (0)