Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML Introduction

HTML stands for HyperText Markup Language.

It's a markup language that is designed to build web pages.

The HTML language consists of roughly 100 HTML elements.

Elements are represented by tags. They look like this: <tagname>.

Examples

#

This is an image created with an <img> tag.

Below is the complete tag.

<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 music, sound effects, etc
<br> Creates a line break
<button> Creates a clickable button
<div> Creates a division or section on a page
<form> Defines a data entry area with input elements
<h1>-<h6> Defines text headings in 6 different sizes
<input> Creates an input field for data entry
<label> Creates a brief description before input elements
<ol> Creates a numerically or alphabetically ordered list
<p> Creates a paragraph
<script> Adds JavaScript to a page
<section> Defines and area for stand-alone content
<select> Creates a dropdown control
<span> A container for inline text elements
<textarea> Creates a multi-line text input control
<title> Specifies the title of the page
<video> Creates a video player for movies, etc.

For a complete list of tags, see our HTML Tag List.


What is a Markup Language?

A markup language describes the structure of a document.

Markup are annotations, for example <p> and <img>.

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

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>

The <form> tag defines an area with input elements

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 reference of all HTML tags, see our HTML Tags list.


HTML Tag Syntax

Tags are element names inside 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 annotations, and then display the resulting page.

Popular browsers include Chrome, Edge, Firefox, Safari, and Opera.

browsers

Page Structure

All HTML pages have a nested structure.

In the example below, the <head> and <body> tags are nested inside the <html> tag.  Also, 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


Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides