HTML Introduction

HTML stands for ‘HyperText Markup Language‘.  It is a markup language that is designed to build web pages. The HTML language consists of roughly 100 HTML elements. Elements are the building blocks of HTML pages.

HTML Tutorial

Example

Elements are represented by tags which look like this: <tagname>.
This is an <img> tag which creates an image.

<img src="/img/html/poppies.jpg">

Some commonly used tags:

Tag Description
<a> Creates a link (hyperlink) to another page
<aside> Creates an area for content that is related to the primary content on a page
<audio> Creates a player for sound such as music, sound effects, or others
<br> Creates a line break
<button> Creates a clickable button that can contain text or an image
<div> Creates a division or section on a page
<form> Defines a data entry area that contains input elements
<h1>-<h6> Defines text headings in 6 different sizes
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<ol> Creates a numerically or alphabetically ordered list
<p> Creates a paragraph
<script> Adds JavaScript to a page. Either server-side or client-side
<section> Defines and area for content that can stand on its own
<select> Creates a dropdown control
<span> A container for inline text elements
<textarea> Creates a multi-line text input control, for example for messages
<title> Specifies the page title that will display in the browser's tab
<video> Creates a video player on a page

For a complete list of tags, see our HTML Tags list.


What is a Markup Language?

Markup languages, like HTML, describe the structure of a document (i.e. web page).

Markup are annotations, like <p> and <img>, with which you design a document.

The browser uses the markup to format text and other elements on the page.

The markup itself is never shown.

In the text below, the <b> and <b/> are the markup annotations -- <b> stands for 'bold'.

<b>This text</b> will display in bold.

The text between these annotations will display in bold, like so.

This text will display in bold.
Tip:  The bracketed annotations, i.e. <...>, are refered to as tags.

HTML Example

Let's look at a more comprehensive HTML markup example.
First, the rendered results, followed by the HTML that created it.

Your favorite vacation destination




And this is the HTML that created it.

<form action="/tutorial/action.html">
  <fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
    <legend>Your favorite vacation destination</legend>

    <input type="radio" id="italy" name="destination" value="Italy">
    <label for="italy">Italy</label><br>
    <input type="radio" id="greece" name="destination" value="Greece" checked>
    <label for="greece">Greece</label><br>
    <input type="radio" id="spain" name="destination" value="Spain">
    <label for="spain">Spain</label><br>
    <input type="radio" id="other" name="destination" value="Spain">
    <label for="other">Other</label><br> <br>

    <input type="submit" value="Send">
  </fieldset>
</form>

Code Explanation

The <form> tag defines an area with input elements where users enter data

The <input> tag with type="radio" defines a radio button control

The <label> tag defines a text label associated with a radio button

The <input> tag with type="submit" defines a button that submits data to a form-handler.

For a complete reference of all HTML tags, see our HTML Tags list.


HTML Tag Syntax

HTML tags are element names surrounded by angle brackets: ' < ' and ' > '.

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

HTML tags usually come in pairs like <ul> and </ul>.

The first tag is called opening tag (start tag) and the second tag is the closing tag (end tag).

The closing tag has a forward slash (/) before the tag name.


What is a Browser?

A web browser is a software application that is installed on a computing device, such as, phone, tablet, laptop, desktop, etc.

Web browsers receive HTML pages, interpret the HTML annotations, and then display the resulting Web page.

The best known browsers are Chrome, Edge, Firefox, Safari, and Opera.

browsers

HTML Page Structure

All HTML pages have a nested structure.

In the example below, the <head> and <body> tags are nested inside the <html> tag.  Furthermore, the <title> tag is nested inside the <head> tag and the <h1> and <p> tags are nested inside the <body> tag.

HTML Page Structure

All web pages are built in a similar way.


Did you know?

Did you know?

Why is it called "Hypertext"?

Why are HTML pages often referred to as hypertext?   Hypertext is text that is not linear, meaning it has references to other text using links in the markup language.

Any text defined as a link is called a hyperlink because when clicked, the browser immediately takes you to another page, or let you download a file, or any other function. This action is hyperactive, that is, done instantly.


You may also like

Guides