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
<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.
HTML Project
Practice your HTML skills with this project.
Sample Projects
- Sample home page: Here is a sample home page for an imaginary business written only in HTML. You can view the source code here.
- Sample blog post: Here is a sample blog post written only in HTML. You can view the source code here.
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!