Most Common HTML Elements

Contents

Headings

Headings are used as titles / subtitles for content on the page. They are inserted with the <h1> through <h6> tags.

Note: These tags are used by search engines to detect the structure of your pages.

Show Code

Largest Heading
Sample Heading
Sample Heading
Sample Heading
Sample Heading
Smalest Heading


Paragraphs

These are added in a similar way to the headdings. The <p> tags are used before and after the text.

Defaults:

font-size: 16px
display: block
margin-top: 1em
margin-bottom: 1em
margin-left: 0
margin-right: 0

Show Code

A sample paragpaph


Images

Images are added by using the <img> tag. Unlike other tags, these do not have closing tags, they close with a forward slash. The image tag takes multiple parameters

Parameters: src This is the file location on the server of the image.
width Sets the width of the image.
height Sets the height of the image.
alt Sets alternaive text for the image (displayed if image fails to load)
title The title of the image. This is used by screen readers.
 
Defaults: font-size: 16px
display: block
margin-top: 1em
margin-bottom: 1em
margin-left: 0
margin-right: 0

Show Code

My photo


Lists > Unordered lists

Unordered lists are used to make bullet pointed lists. Theses are created by surroundnig the list elements with <ul> and </ul> tags.

Bullets: The bullet point (leading circle) can be changed with the css property list-style-type to:

  • disc (defult)
  • circle
  • square

To see more about unordered lists and how to nest them, visit Mozilla's web docs here.

Show Code

  • List item 1
  • List item 2
  • List item 3

Lists > Ordered lists

Ordered lists are used to make numbered (or lettered) lists. Theses are created by surroundnig the list elements with <ol> and </ol> tags.

Numbers: The counting system can be changed with the css property list-style-type. The most common are:

  1. decimal (default)
  1. decimal-leading-zero (decimal numbers starting at 01)
  1. lower-alpha (letters starting at a)
  1. upper-alpha (letters starting at A)
  1. lower-roman (decimal numbers starting at i)
  1. upper-roman (decimal numbers starting at I)
  1. none (no character)

Show Code

  1. List item 1
  2. List item 2
  3. List item 3

Breaks

This tag inserts a single line break. Breaks are added with the following HTML code, <br>.

Note: These tags do not have an end tag but if you use it XHTML, you must remember the ending forward slash, <br />.

Show Code

Some text


Some text


Article HTML5

The <article> tag is used as a container for independnt content. They are used to contain information that is distinguishable from the rest of the page. For example, an article tag would be used around a blog post or a comment.

Show Code

Article title

Lorem ipsum dolor sit amet…


Address HTML5

The <address> tag is used to define the contct information of the author of the webpage / website.

Depending where this element resides choses the part of the document that the author correlates to:

  • <body> contact details apply for the entire document.
  • <article> contact details apply for the article only.

Show Code

Author: Chester Lloyd
Vist me at:
chester-lloyd.co.uk