Because HTML is often people’s first experience with coding, there can be apprehension about learning it. Thankfully, HTML syntax is relatively simple and easy to learn. Most people can learn the basics of HTML and begin coding within the same day.

A Markup Language

HTML is a markup language. That means content on the page is “marked up” by tags identifying it. A paragraph, for example: 

<p>This is a paragraph.</p>

Tags consist of a left-angle bracket (<) followed by the tag name and a closing right-angle bracket (>). Closing tags are the same but with a forward slash (/). Most elements that contain content require both opening and closing tags.

Basic Document Structure

All HTML documents revolve around three basic tags: <html>, <head>, and <body>. The head contains metadata, the title, and external resources, while the body contains visible page content. At its most basic: 


<html>     
  <head>
  </head>
  <body>
  </body>
</html>

DOCTYPES

A doctype declaration appears before <html> and tells browsers which HTML version to expect. It usually just triggers standards mode vs. quirks mode. Examples:

HTML 4.0 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5

<!DOCTYPE HTML>

For more details, see Mark Pilgrim’s Dive Into HTML5.

Element Attributes

Attributes provide extra information or functionality. They are placed inside the opening tag and written as name="value". 

<h1 class="headline">Article’s main headline</h1>

Replaced Elements

Some elements display external resources instead of their own content, like images, video, or form controls. 

<img src="photo.jpg" alt="my awesome photo">

Code Structure

HTML documents use nesting. Child elements must close before their parent. Incorrect: 

<p>You must close all nested tags <strong>first!</p></strong>

Correct:

<p>You must close all nested tags <strong>first!</strong></p>

HTML 4 content types were block and inline. HTML5 expands to seven categories, with stricter nesting rules. Use the W3C Validator to ensure correctness.

Commenting Code

Comments are notes in code for developers. They don’t appear on the page. Syntax: 

<!-- This is a comment -->

Using Special Characters

Some characters (like <, >, and &) are reserved in HTML. Use named character entities to display them safely. Example: use &amp; to display an ampersand (&).

See HTML Reference for a list of common entities, or check Wikipedia for a full list.