To view all of the 300+ tutorials on Simple Dev, sign up for a 10-day free trial below.

HTML Basics

Summary

Below you will find a collection of tutorials on the basics of HTML, the markup language for the web.

Before You Start

These tutorials assume you have a basic understanding of using a text editor, like VS Code or Atom (we recommend VS Code).

Exercises

You can download exercises to go along with these tutorials on our HTML exercises repository on GitHub. You don’t have to know how to use GitHub to download them. Just click the green Code button in the corner and click the Download ZIP option. Then unzip the folder and open it in your text editor.

Tutorials

Introduction

Why should I use HTML?

Learn why you should use HTML.

Creating and saving an HTML file

The file extension for HTML files is .html.

HTML workflow

Learn how to work with HTML files.


Syntax

Opening and closing tags

<p>Text in HTML gets wrapped in opening and closing tags.</p>

Comments

<!-- This is a comment in HTML -->

Self-closing tags

<hr>

Nested elements

In HTML, you can nest elements inside of other elements.

Attributes

<p attribute-name="attribute-value"> </p>

Whitespace

Extra whitespace in your HTML file is ignored by the browser.

Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Common syntax problems

Learn some common mistakes made when writing HTML.


Head elements

Title

<title>Title element - HTML | Simple Dev</title>

Body elements

Heading

There are six tags available for headings: h1, h2, h3, h4, h5, and h6.

<h1>Heading</h1>

Paragraph

<p>Paragraph text.</p>

Ordered list

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Unordered list

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Image

<img src="my-picture.jpg" alt="Dog running on grass">

nav

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</nav>

main

<main>
  <!-- main content of web page goes here -->
  <h1>Your Business</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</main>

section

<section>
  <h2>About Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<footer>
  <small>© 2020 Your Business.</small>
</footer>

Linking to another page in your project

<a href="page.html">Link text</a>

Linking to an external web page

<a href="http://example.com/">External link</a>
<a href="#last-section">Link text</a>

<!-- Other HTML code might be here -->

<h2 id="last-section">Header</h2>
<a href="mailto:john@example.com">john@example.com</a>

<a href="tel:+15555551234">(555) 555-1234</a>

Building projects

How to structure an HTML file

Learn how to structure an HTML file.

HTML project structure

Learn how to structure an HTML project.

HTML Project

Practice your HTML skills with this project.


Sample Projects

Next Steps

After learning HTML, you can move on to our Markdown section, which will allow you to add README files to your projects, or our CSS section, which will allow you to style your HTML documents.

* work in progress

** coming soon!