It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Basic HTML Example: Learn Basic Code and Get HTML Help

Reading time 4 min
Published Mar 22, 2019
Updated Sep 30, 2019

TL;DR – HTML examples are basic code snippets that demonstrate the usage of a certain functionality.

A Basic Code Example

To get started, let's see what a simple HTML document could look like:

Example
<!DOCTYPE html>
<html>
<body>
  <h1>Heading</h1>
</body>
</html>

Note: this is a very simple document with a few basic HTML tags. While it is fully functional, it does not have any decorations or additional information to it.

Analyzing HTML examples makes a great beginner exercise. However, even the simplest ones won't make much sense if you don't have a basic understanding of tags that are used to define elements. In the following sections, we will analyze the basic code elements seen in this example, plus a few more that are relatively common.

<!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps a browser to understand and display your document correctly. We need it because there is more than one possible web document type to use. Doctype declaration is not case-sensitive:

Example
<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

Describing HTML: Example

The <html> element defines an HTML document. Basically, while <!DOCTYPE> defines the whole page, <html> brings functionality to it:

Example
<!DOCTYPE html>
<html>
<head>
  <title>Name of the website</title>
</head>

<body>
  <h1>Heading for the content below</h1>
  <p>Text text text</p>
</body>

</html>

HTML Head and Body: What's the Difference?

The <head> element is used to contain metadata which is not visible to the user. It's the most important information of a particular document. Metadata might be the title, scripts, or similar information:

Example
<head>
  <title>Document title</title>
</head>

The <title> element you see in the example above is used to provide a title for your document which helps search engines to find your website:
Html Example

Example
<title>Page Title</title>

The <body> element describes all visible page content: text, videos, buttons, etc.:

Example
<body>
  <h1>Heading</h1>
  <p>Paragraph</p>
</body>

Using HTML Headings

Headings make it easier to make your way through all the content. It gives the reader the primary information about the content of that particular part of the document.

To declare a heading, put its title inside of <h1>-<h6> tags. The lower the number of a heading, the bigger and more important it is:

Example
<h1>Heading text - Level 1. Most Important Heading</h1>
<h2>Heading text - Level 2</h2>
<h3>Heading text - Level 3</h3>
<h4>Heading text - Level 4</h4>
<h5>Heading text - Level 5</h5>
<h6>Heading text - Level 6. Least Important Heading</h6>

Defining HTML Paragraphs

To set space for a paragraph, you will need to use the <p> element. This element is created specifically for text and not anything else. See a simple HTML code example below:

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

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

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

Links redirect you from current page to another one. To create one, you will need to use an <a> element and attach a href attribute to it:

Example
<a href="https://www.bitdegree.org/">This is a link to external website</a>

Adding HTML Images

To add an image, you will need the <img> tag (img stands for image). You will also need to include a src attribute so your browser can figure out where to get the picture from. Take a look at the HTML code example below:

Example
<img src="image.png" alt="JumpyDoggy" width="470" height="317">

You can also use width and height attributes to define the dimensions of the image. Using alt, you may provide an alternative text to display if an image cannot be loaded. Screen readers that make the content available to blind or visually impaired users can also use it to represent the idea of an image.

HTML Example: Useful Tips

  • You can try writing basic code in BitDegree's code editor which allows you to save your HTML code examples, providing it a shareable URL. Make HTML say 'Hello World' or think of something more unique!
  • If you keep running into issues when writing basic code in Windows, you can try the HTML Help system developed by Microsoft.