Understanding HTML Syntax

Because HTML is often the people’s first experience with coding, there can be a fair amount of 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 it within the same day.

A markup language

HTML is a markup language. That means that content on the page is “marked up” by tags which identify the content inside of them. A paragraph, for example, can be identified by placing the “<p>” opening tag prior to the paragraphs content and the “</p>” closing tag at the end of a paragraph. The full paragraph would look like this:

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

Tags consist of a left-angle bracket (<) followed by a character or characters that identify the tag (the “p” for paragraph) and a closing right-angle bracket (>). The closing tags for an element are exactly the same as an opening tag, except that a forward slash (/) will precede the tags characters.

Although most elements require an opening and a closing tag, the closing tag is optional for some elements and not required at all for others. While there are exceptions to the rule, for the most part any element that contains content inside the opening and closing tags also requires a closing tag.

Basic document structure

The core of all HTML documents revolves around three basic tags. First, an html tag (<html>) is required to identify the document as an HTML file. Directly inside the html tag, you’ll find the head element (<head>). The head of a document is where you’ll find the document’s metadata, the document title, and links to external resources such as style sheets and scripts.


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

DOCTYPES

If you’ve looked at HTML pages before, you’ve probably noticed a long, somewhat intimidating tag just before the opening HTML tag. This is a doctype declaration and it’s a very important but often misunderstood component of HTML pages.

HTML 4.0 transitional

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

HTML5

<!DOCTYPE HTML>

Element attributes

Some elements can be enhanced through the use of attributes. Attributes allow you to provide more information or additional functionality to the content. Attributes are added to the opening tag of an element and consist of two parts, the name and value.

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

Replaced elements

Some HTML elements represent content that is replaced by an outside resource such as an image, form control, or a video file. These elements are referred to as replaced elements and usually have a predetermined width or height.

<img src=“photo.jpg” alt=“my awesome photo”>

Code structure

HTML documents create structure by nesting elements inside of one another. When nesting one tag within another one, you must first close any child elements prior to closing any parent elements.

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

Commenting code

Often it is helpful to leave notes to yourself or other developers within your code. Comments begin with <!-- and end with -->.

<!-- This is a comment -->

Using special characters

Certain characters are reserved in HTML. You can use these characters by using what is known as a named character entity. For example, to display an ampersand, you would type &amp;.