HTML Basics Part 5: HTML Syntax

In this part of the HTML Basics series, I will continue with talking about the HTML syntax and the document structure.

Thumbnail Blaster - Video Thumbnail Creation Software

In this part I will briefly talk about the important points of HTML syntax. The sooner you get used to the rules of the language the faster you will be writing valid HTML code.

HTML Document Structure

An HTML document (web page) has the following structure:

DOCTYPE
HTML
- Head
-- Title
- Body

The above document structure is described by HTML elements in the following format:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <p>Some text...</p>
</body>
</html>

HTML doctype

Doctype (document type) is a special instruction to web browsers that tells them how to display the web page. Different doctypes are used for different versions of HTML and XHTML. The one we used in the above example is the doctype for HTML 5 documents. Doctype should be declared before the opening html tag (<html>) so that the browser will know the version of HTML the page is written.

HTML Elements and Tags

Notice in the above example how each element is delimited with a pair of tags such as <html>...</html> and <p>...</p>. In HTML, markup tags are used for marking the start and end of the elements. Each element has a start (opening) and end (closing) tag and in between the tags there is the content of the element. There are also self-closing tags such as <img />.

Unlike XHTML, closing tags for some HTML elements (like <p>) may be omitted and technically it will be valid code. However, our recommendation will be to use closing tags where applicable so that things will not get complicated and your code will be easier to read and edit.

HTML tags are not case sensitive like they are in XHTML. What this means is that you could use the following opening and closing tag combinations and they will be all valid markup:

<P>This is a paragraph.</P>
<P>This is another paragraph.</p>
<p>This is also a paragraph.</P>

Which letter case you will use is totally up to you but we will be using lowercase letters in our tutorials since we believe that lowercase HTML code looks nicer and it is more readable.

Spaces in HTML

HTML ignores spaces in the markup. For example the following paragraphs will have the same output:

<p>A paragraph about web design.</p>
<p>A       paragraph about web design.</p>

To display space on a web page, you need to either style it with CSS or use the entity name or number for space character.

HTML Attributes and Values

HTML elements may have attributes for describing certain parts of that element. For example in the following code for creating a hyperlink, anchor element (<a></a>) gets href attribute and its value is the website address:

<a href="http://www.example.com/">My Website</a>

Note that attribute values are given in quotes. You can use double or single quotes depending on your page setup. Using quotes around attribute values is not a requirement in HTML as it is in XHTML; however, for better readability we recommend that you use quotes for attribute values.

Comments in HTML

You can add comments to your HTML code where necessary. Here is how to do it:

<body>
  <!-- This is a comment. -->
  <p>This is a paragraph.</p>
</body>

You can find detailed information about HTML syntax on the following page:

This is all about HTML syntax, we will continue with HTML tags in the next part.

Was this post helpful?

Please consider sharing it, and supporting us with a small tip. Thank you :)

f t g+ in