Link Search Menu Expand Document
HTML and CSS

HTML Basics

Doctype, headings, paragraphs, lists

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 basics

  • 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>.
  • HTML headings are defined with the <h1> to <h6> tags.
  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
  • HTML paragraphs are defined with the <p> tag: <p>This is a paragraph</p>.

Examples

This is h1, the biggest HTML heading

This is h2, smaller than h1

This is h3, as you've guessed

This is how the h4 looks like

This is h5, quite small
This is h6, the smallest one

This is a paragraph. Browsers do not display the HTML tags, but use them to render the content of the page. It's important to use the right HTML tags for each content element. Semantics are important: a well structured HTML document will be rendered correctly by all browsers and properly scanned and stored by the search engines.

Quick exercise

Take the HTML file that you code before (the one with h1 and p) and add h2, h3, h4, h5 and h6.

IMPORTANT: Remember to always close the tags; if you open with <h3>, you close with </h3>.

Unordered and ordered lists

Lists are one of the most used HTML tags. There are two kinds of lists:

Unordered Lists

  • This is the first item
  • This is the second item
  • This is the third item
  • This is the fourth item

Ordered Lists

  1. This is the first item
  2. This is the second item
  3. This is the third item
  4. This is the fourth item

Another Quick Exercise

Now add two lists to the HTML file: ol and ul.

IMPORTANT: Remember that each item on a list should open with <li> and closed with </li>.

Exercise on paper

Let’s recognize headings, paragraphs, and lists on our paper websites

  1. Using a colored marker, write on your website which elements you are using:
  2. Mark the different headings as h1, h2, h3…
  3. Mark all the paragraphs
  4. Do you have lists?
  5. Mark the navigation as a list

Learn more: