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


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>

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 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>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:


Example

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

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

HTML Links

HTML links are defined with the <a> tag:


Example

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

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


Attributes are used to provide additional information about HTML elements.


You will learn more about attributes in a later chapter.


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" width="104" height="142">

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"


View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.


Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.


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"

The href Attribute

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


Example

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


Example

<img src="img_girl.jpg">

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


1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".


Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.


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


Tip: It is almost always best to use relative URLs. They will not break if you change domain.


The width and height Attributes

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


Example

<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 slow connection, or an error in the src attribute, or if the user uses a screen reader.


Example

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

Example

See what happens if we try to display an image that does not exist:


<img src="img_typo.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.


Example

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

You can see all the language codes in our HTML Language Code Reference.


The title Attribute

The title attribute defines some extra information about an element.


The value of the title attribute will be displayed as a tooltip when you mouse over the element:


Example

<p title="I'm a tooltip">This is a paragraph.</p>

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.


The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.


However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.


At W3Schools we always use lowercase attribute names.


We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.


However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.


Good:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:


Example

<p title=About W3Schools>

 At W3Schools we always use quotes around attribute values.


Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.


In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:


<p title='John "ShotGun" Nelson'>

Or vice versa:


<p title="John 'ShotGun' Nelson">

Chapter Summary

All HTML elements can have attributes

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

HTML Quotation and Citation Elements

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

Example

Here is a quote from WWF's website:

For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.


Browsers usually indent <blockquote> elements.


Example

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.


Browsers normally insert quotation marks around the quotation.


Example

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".


Marking abbreviations can give useful information to browsers, translation systems and search-engines.


Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element. 


Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an article.


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.


Example

<address>

Written by John Doe.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).


Note: A person's name is not the title of a work.


The text in the <cite> element usually renders in italic.


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 Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.


HTML Comment Tag

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


<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.


Note: Comments are not displayed by the browser, but they can help document your HTML source code.


Add Comments

With comments you can place notifications and reminders in your HTML code:


Example

<!-- This is a comment -->


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


<!-- Remember to add more information here -->

Hide Content

Comments can be used to hide content.


Which can be helpful if you hide content temporarily:


Example

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


<!-- <p>This is another paragraph </p> -->


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

You can also hide more than one line, everything between the <!-- and the --> will be hidden from the display.


Example

Hide a section of HTML code:


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


Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Hide Inline Content
Comments can be used to hide parts in the middle of the HTML code.

Example
Hide a part of a paragaph:

<p>This <!-- great text --> is a paragraph.</p>

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.


CSS = Styles and Colors

Manipulate Text
Colors,  Boxes



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!

Tip: 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:

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

Example
<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: 

Example
<!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:

Example
<!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>
The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

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.

Example
Use of CSS color, font-family and font-size properties:

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

Example
Use of CSS border property: 

p {
  border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.

Example
Use of CSS border and padding properties:

p {
  border: 2px solid powderblue;
  padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

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.

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

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Example
This example links to a style sheet located in the html folder on the current web site: 

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

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

<link rel="stylesheet" href="styles.css">
You can read more about file paths in the chapter HTML File Paths.

Chapter 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

HTML Links

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


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.


Example

This example shows how to create a link to W3Schools.com:


<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

Example

Use target="_blank" to open the linked document in a new browser window or tab:


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

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.


A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):


Example

<h2>Absolute URLs</h2>

<p><a href="https://www.w3.org/">W3C</a></p>

<p><a href="https://www.google.com/">Google</a></p>


<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:


Example

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):


Example

<a href="mailto:someone@example.com">Send email</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.


JavaScript allows you to specify what happens at certain events, such as a click of a button:


Example

<button onclick="document.location='default.asp'">HTML Tutorial</button>

Tip: Learn more about JavaScript in our JavaScript Tutorial.


Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.


Example

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

More on Absolute URLs and Relative URLs

Example

Use a full URL to link to a web page: 


<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Example

Link to a page located in the html folder on the current web site: 


<a href="/html/default.asp">HTML tutorial</a>

Example

Link to a page located in the same folder as the current page: 


<a href="default.asp">HTML tutorial</a>

You can read more about file paths in the chapter HTML File Paths.


Chapter 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 Link Tags

Tag Description

<a> Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.



HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.


Multiple HTML elements can share the same class.


Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.


In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:


Example

<!DOCTYPE html>

<html>

<head>

<style>

.city {

  background-color: tomato;

  color: white;

  border: 2px solid black;

  margin: 20px;

  padding: 20px;

}

</style>

</head>

<body>


<div class="city">

  <h2>London</h2>

  <p>London is the capital of England.</p>

</div>


<div class="city">

  <h2>Paris</h2>

  <p>Paris is the capital of France.</p>

</div>


<div class="city">

  <h2>Tokyo</h2>

  <p>Tokyo is the capital of Japan.</p>

</div>


</body>

</html>

In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:


Example

<!DOCTYPE html>

<html>

<head>

<style>

.note {

  font-size: 120%;

  color: red;

}

</style>

</head>

<body>


<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>


</body>

</html>

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:


Example

Create a class named "city":


<!DOCTYPE html>

<html>

<head>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

</style>

</head>

<body>


<h2 class="city">London</h2>

<p>London is the capital of England.</p>


<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>


<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>


</body>

</html>

Multiple Classes
HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes: 

Example
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> points to the "city" class and will share the same style:

Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Use of The class Attribute in JavaScript
The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example
Click on a button to hide all elements with the class name "city":

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
Chapter Summary
The HTML class attribute specifies one or more class names for an element
Classes are used by CSS and JavaScript to select and access specific elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with the getElementsByClassName() method

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