HTML Examples

Learn to code, learn web development basics, start a career in tech.

HTML Examples

Last edited: Jul 3 2019

Explore HTML Examples

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

What you are looking at above is pure HTML code, seven lines of code used to print out a header and a paragraph, can you see an example of HTML Element above?

HTML Element open and close tags

<h1></h1>
<p></p>
<body></body>
<html></html>
<head></head>

The above code lines are all examples of HTML Elements, they typically have an opening and closing tag, e.g when you look closely you notice <> for opening and </> for closing the element.

So now when you look at any HTML code you should be able to immediately spot the opening of an element and the closing of an element, well done! You are well on your way to coding basic HTML.

There are some gotchas not every element has a closing like you might think, for example, let's have a look at the following example:

HTML self closing tags

<br>
<img src="smiley.jpg">

The above code is referred to as “self-closing” tags the first one will break any paragraph of text and force it to start from a new line, as you can see it doesn't have opening and closing, it has it is all in one.

The second line will display an image called smiley.jpg on the screen, again this is also another form of “self-closing” tag, there are not too many of these, so we will learn them as we come across them.

Now that we have learnt what an element is, we have also seen some examples of HTML Elements in action, let us have a step by step walk through what each of the elements means.

HTML Template code

<!DOCTYPE html>
 <html>
   </head></head>
   <body>
   </body>
 </html>

Every time we write HTML code, the above is the basic template we always use, now I want to walk you through that code one line at a time, and explain what each HTML element means.

Walking through HTML code

A good exercise is to have a look at the HTML code above and memorise the following points:

  • There is always a declaration on the first line

  • Then we have our HTML opening tag

  • Within HTML we have two elements head and body

<!DOCTYPE html>

The first line is not an HTML Element, it is an instruction to the web browser about the version of HTML the page is written in, in this case, it says it is written in HTML5

Every time we write HTML we always start with this declaration, don’t worry if you forget this, just search the web for HTML skeleton and you will find it.

<html>

</html>

The above basically says we are about to start writing HTML code, you will notice that every HTML Element is nested within it, the tag <html> is closed with </html>

<html>
  <head></head>
 </html>

Now it is time for us to explore the <head> element, it is a container for metadata, this is where we put data about our HTML document.

Some examples of metadata you will find within the <head> element are:

<title>,<style>,<meta>,<link>,<script> and <base>

<html>
   <head>
     <title> This shows up in the browser title bar </title>
   </head>
 </html>

The code above is an example of <title> metadata, this data will not show on the web page, it will instead be displayed on the browser’s title bar, we will get the chance to learn more about metadata in HTML

<html>

<body></body>
</html>

The <body> element is the container for parts of the document you want to display on the browser, anything entered here will be rendered in the browser, this is where we spend most of our time when coding HTML.