HTML Basics: Elements and Syntax

A short intro to the core fundamentals of HTML as a markup language

HTML is relatively easy to learn and use. As a markup “language” it has a small, limited number of elements (tags) that are commonly used by web designers and developers.

Watch Video Lesson

HTML elements are the building blocks of HTML pages.
– Wikipedia

The Anatomy of an HTML Element or “Tag”

<tagname>content goes here</tagname>

<tagname attribute=”value” />

“Well-formed Semantic Markup”

The most important HTML rule to remember

If there is one guiding principle to keep in the back of your mind when writing HTML, it should be to always write well-formed semantic markup.

Be sure to open and close all tags (well-formed)
Be sure to use the correct HTML element for each context (semantic)

A well-formed element is is one that is either a) opened and subsequently closed, or b) an empty element, which in that case must be terminated;
– Wikipedia

Semantic HTML is the use of is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.
– Wikipedia

List of the Most Commonly Used HTML Tags

If you are going to memorize any HTML elements, start with these:

<!doctype>
<html>
<head>
<meta>
<title>
<link>
<body>
<h1> - <h6>
<p>
<a>
<strong>
<em>
<ul>, <ol>, & <li>
<img>
<div>
<span>
<form>, <input>, & <textarea>
<script>

Here’s an even shorter list of HTML5 semantic elements that are commonly used:

<header>
<footer>
<nav>
<main>
<section>
<article>

There are others, along with a full list at W3Schools, but for now the above are more than enough to get started.

Web Page with Commonly Used HTML Elements

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>This is a Title</title>
	<meta name="description" content="A simple HTML web page with commonly used html markup elements.">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<h1>This is a Heading 1</h1>
	<h2>This is a Heading 2</h2>
	<h3>This is a Heading 3</h3>

	<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	<ul>
	<li>This is an Unordered List Item</li>
	<li>This is an Unordered List Item</li>
	<li>This is an Unordered List Item</li>
	</ul>

	<ol>
	<li>This is an Ordered List Item</li>
	<li>This is an Ordered List Item</li>
	<li>This is an Ordered List Item</li>
	</ol>

	<p>This is a <a href="#">link</a>.</p>

	<img src="http://placehold.it/1500x500" alt="This is an image" />

	</body>
	</html>

view raw common-html-page-elements.html hosted with ❤ by GitHub

Note how the document is divided into two main sections: the head and the body.

Core Essential HTML Elements

Below is a short list of the core essential HTML elements that are typically found and used on many websites and specifically within the head section of a typical HTML web page. Over time, new best practice emerge and become standards, such as many of the elements below along with their usage (see below for more info on each):

Doctype
HTML Language Setting
Meta Charset Character Setting
Title
Meta Description
Meta Viewport
Link to External CSS file

<!doctype html>

The doctype tells the browser what type of file to expect and how to render it.

<html lang="en">

The language setting on the HTML tag tells the browser/computer what language the content of the page is written in. This allows for tools like translators to know if and when to prompt users if they would like to translate the page.

<meta charset="utf-8" />

The meta charset tells the browser which character set to render the contents (text) of the HTML page.

<title></title>

The title of the page is displayed at the top of the browser window and in the tab label when multiple tabs are open. This helps to provide helpful information to users. It is also used by search engines and plays an integral role in SEO (Search Engine Optimization).

<meta name="description" content="" />

The meta description of the page is not visually displayed to users. Similar to the title element, it is used by search engines and also plays an integral role in SEO.

<meta name="viewport" content="width=device-width, initial-scale=1" />

The meta viewport settings play an integral role in responsive web design. The settings enable web designers and developers to have full control over how the web page is rendered on all devices. This is especially important when using CSS media queries to target different screen sizes, such as the small screens on mobile devices.

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

The meta http-equiv setting for IE (Internet Explorer) is optional but can help to ensure that your sites will render best in older versions of IE, therefore it is recommended to include this line within the head of your HTML documents.

<link href="css/style.css" rel="stylesheet" type="text/css" />

Link elements are oftentimes found within the head of an HTML document, oftentimes linking to eternal CSS style sheets. A common naming convention is to name a global style sheet “style.css” (or “styles.css” or “stylesheet.css”) and to place it in a “css” folder.

Summary

HTML is easier to learn than most “coding” languages, partly because there are fewer elements and attributes to remember. If there is one rule to remember, it is to always use well-formed semantic markup when writing html.

Go Further

Read about Web Standards and the W3C (World Wide Web Consortium).
Try coding a simple HTML web page.

Author Notes

This was written specifically to help aspiring web designers as they aim to:

Learn the basic elements, syntax, and common uses of HTML Markup