HTML Handbook

Introduction

HTML is the standard markup language for creating Web pages.

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.

Helloworld:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

In the above example:

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

HTML Tag Reference:

Tag	Description
`<html>`	Defines the root of an HTML document
`<body>`	Defines the document's body
`<h1>` to `<h6>`	Defines HTML headings
`<p>`	Defines a paragrap
`<hr>`	Defines a thematic change in the content
`<br>`	Inserts a single line break
`<pre>`	Defines pre-formatted text

HTML Elements:

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>

Start tag	Element content	End tag
`<h1>`	My First Heading	`</h1>`
`<p>`	My first paragraph	`</p>`
`<br>`	none	none

HTML Links:

HTML links are defined with the <a> tag.

The link's destination is specified in the href attribute.

<a href="https://www.w3schools.com">This is a link</a>

HTML Images:

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Empty HTML Elements:

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

<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>.

HTML Attributes:

HTML attributes provide additional information about HTML elements.

Summary

The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element

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"

The href Attribute:

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

<a href="https://www.w3schools.com">Visit W3Schools</a>

The src Attribute:

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

<img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:

Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".
Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

The width and height Attributes:

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute:

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed.

This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

<img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute:

The style attribute is used to add styles to an element, such as color, font, size, and more.

<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country. The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute:

The title attribute defines some extra information about an element.

HTML Headings:

HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are defined with the <h1> to <h6> tags.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

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:

<h1 style="font-size:60px;">Heading 1</h1>

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.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser 
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page.

The <hr> tag is an empty tag, which means that it has no end tag.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks

The HTML
element defines a line break.

Use
if you want a line break (a new line) without starting a new paragraph.

The
tag is an empty tag, which means that it has no end tag.

<p>This is<br>a paragraph<br>with line breaks.</p>

The Poem Problem

In HTML, spaces and new lines are ignored. This poem will display on a single line:

<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</p>

<p>

  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.
  
  Oh, bring back my Bonnie to me.

</p>

</body>
</html>

Solution - The HTML <pre> Element The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.
</pre>

</body>
</html>

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Summary

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment

The HTML Style Attribute

The HTML style attribute has the following syntax:

<tagname style="property:value;">

Example:

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

The property is a CSS property. The value is a CSS value.

Background Color

The CSS background-color property defines the background color for an HTML element.

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color

The CSS color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Text Formatting

Formatting elements were designed to display special types of text.

<b>This text is bold</b>
<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>

Preview

HTML Text Formatting Elements

Tag	Description
`<b>`	Defines bold text
`<em>`	Defines emphasized text
`<i>`	Italic text
`<small>`	Defines smaller text
`<strong>`	Defines important text
`<sub>`	Defines subscripted text
`<sup>`	Defines superscripted text
`<ins>`	Defines inserted text
`<del>`	Defines deleted text
`<mark>`	Defines marked/highlighted text

HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.

Tag	Description
`<abbr>`	Defines an abbreviation or acronym
`<address>`	Defines contact information for the author/owner of a document
`<bdo>`	Defines the text direction
`<blockquote>`	Defines a section that is quoted from another source
`<cite>`	Defines the title of a work
`<q>`	Defines a short inline quotation

The <blockquote> for Quotations
Browsers usually indent <blockquote> elements.
The <q> for Short Quotations
Browsers normally insert quotation marks around the quotation.
The <abbr> for Abbreviations
Marking abbreviations can give useful information to browsers, translation systems and search-engines.
The <address> for Contact Information
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.
The <cite> for Work Title
The <bdo> for Bi-Directional Override

HTML Comments

You can add comments to your HTML source by using the following syntax: 

You can also hide more than one line.

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

Hide Inline Content. <p>This  is a paragraph.</p>

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray

Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

HTML RGB and RGBA Colors

HTML HEX Colors

HTML HSL and HSLA Colors

HTML Styles - CSS

CSS stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Summary

Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

The most common way to add CSS, is to keep the styles in external CSS files.

However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red.

In addition, the page will be displayed with a "powderblue" background color:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page.

The file must not contain any HTML code, and must be saved with a .css extension.

With an external style sheet, you can change the look of an entire web site, by changing one file.

index.html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

styles.css:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

p {
  border: 2px solid powderblue;
}

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS Margin

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

This example links to a style sheet located in the html folder on the current web site:

<link rel="stylesheet" href="/html/styles.css">

This example links to a style sheet located in the same folder as the current page:

<link rel="stylesheet" href="styles.css">

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

Summary

Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's email program

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Use CSS to remove the underline from the link.

<a href="html_images.asp" style="text-decoration:none;">HTML Images</a>

Example:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window.

To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Tag	Description
`<table>`	Defines a table
`<th>`	Defines a header cell in a table
`<tr>`	Defines a row in a table
`<td>`	Defines a cell in a table
`<caption>`	Defines a table caption
`<colgroup>`	Specifies a group of one or more columns in a table for formatting
`<col>`	Specifies column properties for each column within a `<colgroup>` element
`<thead>`	Groups the header content in a table
`<tbody>`	Groups the body content in a table
`<tfoot>`	Groups the footer content in a table

Tag	Description
`<ul>`	Defines an unordered list
`<ol>`	Defines an ordered list
`<li>`	Defines a list item
`<dl>`	Defines a description list
`<dt>`	Defines a term in a description list
`<dd>`	Describes the term in a description list

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form