HTML Articles

HTML Tutorials, articles, and guides for the ultimate resource for web developers.

Latest updates:
Web Development Menu
Jonathan Griffin. Editor @ The Webmaster

. Hosting Expert & Editor @ The Webmaster:

Our goal is to help you #MasterTheWeb by producing high quality tutorials and guides. Our initial HTML guides will focus on aspects relating to SEO, or minor aspects of web development. In particular, we will focus on issues that may be revealed by a user's SEO site audit.

All HTML Articles

  • HTML <title> Tag

    The title tag is one of the most important on-page SEO elements. Get up-to-date SEO best practices for title tags.

HTML Glossary

Jonathan Griffin. Editor @ The Webmaster

. Hosting Expert & Editor @ The Webmaster:

Trying to learn, or complete a task relating to a domain can be daunting. This is especially so, when you may not know the meaning of some of the terminology used in the tutorials and guides you read.

You will find below some of the most frequently used terminology. It is not intended to be an all encompassing glossary, just a primer on the most important terms or concepts used throughout our tutorials and guides.

What is HTML?

HTML, or HyperText Markup Language, is comprised of the following:

  • Text content - What the user sees.
  • Markup - How the user sees the text content.
  • References to other files - HTML can reference other documents or dfiles, such as /images, videos, stylesheets, and javascript.
  • Links - Links to other pages.
<!DOCTYPE html>
<html>
<head>
  <title>Page Title - Shows in the Browser bar</title>
</head>
<body>

  <h1>Main Heading</h1>
  <p>Paragraph.</p>

</body>
</html>

Let’s go through the example:

  • <!DOCTYPE html> - This declares that the document is to be interpreted as using HTML5.
  • <html> - This denotes the HTML document.
  • <head> - This provides information about the HTML document.
  • <title> - This is the browser title for the HTML document.
  • <body> - This is the visible part of the HTML that displays in the browser.
  • <h1> - This is the main visible heading.
  • <p> - This is a paragraph.

Now we have looked at the basic structure of a HTML page, we must now look at “Elements”,“Tags” and “Attributes” in more detail.

An element is enclosed by tags, which are “Angle Brackets”, with the closing “Angle Bracket” beginning with a forward slash. These tags may contain attributes, which is essentially additional information that can be added to an element that can affect its behaviour.

We have dealt with Elements, Tags and Attributes in more detail below.

What is an element?

A HTML element usually, contains a start tag and an end tag. The element is the content contained within these tags. Some HTML elements are classed as empty, and as such has no end tag.

You can see a table showing the start and end tags of a few popular elements below:

Start TagContentEnd Tag
<p>Paragraph content.</p>
<h1>Heading content.</h1>
<div>Division content.</div>
<br />This is an empty element.

Elements can be nested within each other. So, for example a div element might contain headings and paragraph elements.

Let us take a look at some of the most common HTML elements:

  • <h1>Heading 1</h1> - H1 headings should be used for the main heading of the page. It good SEO practice to only use one H1 tag per page.
  • <p>Paragraph</p> - Paragraphs should be used to seperate blocks of text into ideas or points. This makes the text easier to read by inserting natural pauses on the page.
  • <em>Italic</em> - Italics should be used for emphasis. It also provides a signal to search engines that the words in italics are more significant, so if used carefully may influence search engine rankings, but only by a very small amount.
  • <strong>Bold</strong> - You can highlight key words or phrases by making them “bold”. Historically, the <b> tags were used to bolden text, but modern standards use <strong>. Search Engines understand the latter tag, and it can when used correctly provide a small SEO benefit.
  • <a>Anchor</a> - The Anchor tag defines a hyperlink that can be used to link from one page to another. This relies on the use of attributes which we shall comment on later in the article.
  • <ul>Unordered List</ul> - This denotes an unordered list. It works in combination with a list item to create a bullet list.
  • <ol>Ordered List</ol> - This denotes an ordered list. It works in combination with a list item to create a numbered list.
  • <li>List Item</li> - This is a list item that works with either an ordered list or unordered list.