HTML Basics

Log in or sign up for a free membership to view code/command previews.
To view the full tutorial, log in or sign up for a free trial on our Sign Up page.

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.

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>

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

<footer>
  <small>© 2020 Your Business.</small>
</footer>

Links

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>

Link to a specific section on your web page

<a href="#last-section">Link text</a>

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

<h2 id="last-section">Header</h2>

Email and phone links

<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.

Common syntax problems

Learn some common mistakes made when writing HTML.


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!

Notice any errors? Have other questions or suggestions? Send your comments and questions to contact@simpledev.io.