HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Basic Examples

To learn HTML, you will need to study various tags and understand how they behave. Learning HTML is very simple as you have to learn the usage of different tags in order to format the text or images to make a beautiful web page.

Note: Don't worry if these examples use tags you have not learned. You will learn about them in the next chapters.


HTML Tags

HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

  • HTML tags normally come in pairs like <h1> and </h1>
  • The first tag in a pair is the opening tag, the second tag is the closing tag
  • The closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) inserted before the tag name

There are some tags where a closing tag is not required like <br>, <hr> and these tags are called empty elements.


HTML Headings

HTML has six levels of headings, which use <h1> to <h6>tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Run code

Don't forget the closing tag, otherwise you may encounter some unexpected results.



HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Run code

Line break tag

Whenever you use the <br> element, anything following it starts from the next line.

This tag is an example of an empty element, where you do not need closing tag.

Run code

Note: Do not use <br> to increase the gap between lines of text, use the CSS margin property.


Horizontal line Tag

The HTML <hr> tag is used for creating a horizontal line.

This tag is an example of an empty element, where you do not need closing tag.

Run code

You will learn more about empty elements later in this tutorial.


Non-breaking Space

The &nbsp; character entity allows you to create multiple spaces that are visible on a web page.

Run code

With the above examples using &nbsp; would allow you to create multiple spaces in a row, something that cannot be done by only pressing the spacebar.

Note: If you need to indent or add extra spacing to a paragraph, sentence, or other portion of your web page, we suggest using CSS instead of multiple non-breaking spaces.