HTML Essentials

Best practices for writing markup

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.

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

The anatomy of an HTML element or “Tag” that opens and closes

The anatomy of a self-closing HTML element

“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

Web Page with Core Essential HTML File & Head (e.g. meta) Elements

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>

	</body>
	</html>

view raw blankpage-withlinkedcss.css hosted with ❤ by GitHub

List of Core Essential HTML File & Head Elements:

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.

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>

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

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.