Fundamentals of HTML Syntax

The purpose of this article is under­standing the funda­mental syntax of HTML. Before you get into this, you should under­stand the difference between HTML and CSS, as well as the basic parts that an HTML file needs to work. If you don’t know that stuff, go back and read this article.

Basic Syntax

Diving right in, let’s take a look at how to write the code for a link. As illus­trated in the example below, this link has three main parts: the opening tag, the content and the closing tag. These three parts constitute an HTML element.

With only a few excep­tions, these are the three funda­mental parts needed to define any element in HTML. This same prin­cipal applies to not just links, but a bunch of other HTML elements. Here are some examples:

<p>Any paragraph text goes here</p>
<h1>A large header</h1>
<div class="my_class">This is a div, think of it as a box with text in it.</div>
<b>This text will be bold</b>
<i>This text will be italic</i>
<a href="web-page.html">Link to a web page</a>

You’ll notice again that each example has a pair of tags—an opening and a closing. Whatever is written between these tags is the content. You’ll also notice that some of the opening tags have just HTML element names (p, h1, div, b, i, a) in them, while others have addi­tional code. This addi­tional code is called an attribute. See the example below for the breakdown:

So in the above example, this HTML element has a name (div), as well as an attribute (class). All attributes have “name/value” pairs, and in this example the attribute name is class and the attribute value is my_class.

Under­standing Attributes

Attributes are simply a way to describe or assign addi­tional char­ac­ter­istics to an element. In the code examples above, you see just two examples of attributes: “class” and “href”. There’s a really long list of HTML attributes here, if you’re inter­ested in learning all of the possi­bil­ities out there. But that list probably isn’t worth memo­rizing. You’re quickly going to recognize which attributes you’ll use frequently, and if you’re using a program like Dreamweaver to write your code, it’ll suggest these attributes for you anyways.

Here’s a basic rundown of common attributes

• href → creates a link to another web page
• class → allows you to assign CSS classes to the element
• id → allows you to assign CSS IDs to the element
• title → adds more infor­mation about the element, this is the “tooltip” info you’ll see on some elements on mouse over
• target → spec­ifies whether or not a link will open a new browser window or tab

Creating Links

The HTML element for a link is simply a. The attribute of a which makes it a link to another web page is href. The value of the href attribute defines what page our link takes us to. So this code:

<a href="http://www.google.com" target="_blank">Link to Google</a>

Would result in this link: Link to Google.

Because the href attribute contains the entire URL for Google’s home page, our link takes us there. And because the target attribute has a special value of “_blank”, our link will open in a new browser window or tab.

Absolute links

The link above is an example of an absolute link. An absolute link has an href value that spec­ifies the entire URL (absolute URL) for any given web page. Because it’s the entire URL, it must always begin with “http://”. Absolute links are generally used when you want to link to a web page that existis outside of your own website.

Relative links

Relative links, by contrast, link to pages within your own website and do not begin with “http://”. These links are relative to the files and folders in your own site. A relative link will look some­thing like this:

<a href="about.html">Link to my About Page</a>

To under­stand the correct syntax for links, you first need to under­stand your file structure, that is, how files are placed within folders on your website.

Work-in-progress. More to come soon…