HTML Tutorial

HTML is a markup language for building web pages.

Once you've mastered HTML you can build your own websites.

This tutorial gets you up to speed quickly with many HTML examples.

It's designed for you and it's free. We hope you enjoy!

HTML5

HTML Examples

#

This tutorial includes many HTML examples.

Each example shows the rendered output, followed by the code that created it.
After that a 'Try It live' button allows you to try the code.

Customer Information





<form action="/tutorial/action.html">
  <fieldset style="border:3px solid #a4b4fc;background:#f6f8ff;">
    <legend>Customer Information</legend>

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="Email" name="email"><br /><br />

    <button type="submit">Submit</button>
  </fieldset>
</form>

Code explanation

Code examples come with explanations, like so:

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

An <input> tag of type text defines a text field.

An <input> tag of type submit defines a button that submits form data to the server.

The <br /> tag creates a line break so that the next element appears on a new line.


HTML and CSS

HTML and CSS are 2 web technologies that every web developer needs to know.

To create web pages, HTML provides the basic structure to these pages.

And CSS enhances the look-and-feel by making these pages visually attractive.


HTML Editor

Clicking any of the  Try It live  buttons will open the HTML Editor.
In it, you interact with the code on the left, and the results appear instantly to the right.

Html Editor

Tip:  The rendered HTML in the editor looks different from that in the tutorial pages.
The reason is that the tutorial pages use Bootstrap CSS libraries, and the editor does not.


HTML for Beginners

If you're a beginner, then this tutorial is for you.

It covers the basics in a simple and easy-to-understand manner.

The HTML editor lets you try the code with instant results -- a great learning experience.


HTML for Experienced Developers

If you are an experienced developer, then this tutorial is also for you.

Our Reference Guide covers all HTML elements and their attributes.

If you forget some HTML detail or syntax, then this Guide is the place to go.


HTML Reference Guide

As mentioned, this tutorial comes with a comprehensive HTML Reference.

It has details on all HTML elements and their attributes, with many examples.

It's designed for fast access. Front-end developers of all levels love it.


Tips and Notes

Tip: Throughout the tutorial, Tips and Notes are highlighted in a light blue callout box like this one.


Did you know?

Did you know?

Stay informed with interesting and unusual HTML

This tutorial includes 'Did you know' sections that are marked with the above icon.

These sections present interesting and unusual HTML. And, they are always valuable.

It keeps you informed and interested. And you may learn a few things you did not know before.


You may also like

Each page ends with a 'You may also like' section with links to related topics:



Guides