2.2 HTML Syntax

HTML stands for HyperText Markup Language:

• HyperText means that it uses the HTTP part of the Internet
• Markup means the code you write is annotated with keywords
• Language means it can be read by both a human and a computer

Like any language, HTML comes with a set of rules. These rules are relatively simple. It comes down to defining boundaries, to know where something starts and where something ends.

Here is a sample paragraph in HTML:

<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>

What you see in angle brackets < and > are HTML tags. They define where something starts and where it ends.

Each of them carry a specific meaning. In this case, p stands for paragraph.

They usually go in pairs:

• the opening tag <p> defines the start of the paragraph
• the closing tag </p> defines its end

The only difference between an opening and closing tag is the slash / that precedes the name of the tag.

When you combine an opening tag, a closing tag, and everything in between, you obtain an HTML element. The whole line is an HTML element that uses the HTML tags <p> and </p>.

If you view this sample in your browser, you’ll notice that HTML tags are not displayed by the browser. They are only read by the browser to know what type of content you’ve written.

Where to write HTML

You’ve probably come across simple text files, those that have a .txt extension.

For such a text file to become an HTML document (instead of a text document), you need to use an .html extension.

Open your text editor, and copy paste the following:

<p>This is my firstwebpage!</p>

Save this file as my-first-webpage.html and just open it with your browser, and you’ll see:

Remember:

• use a text editor like Notepad++ to create HTML documents
• use a browser like Firefox to open HTML documents

Attributes

Attributes act like extra information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

For example, the href attribute is used to define the target of a link (which uses an anchor tag):

<a href="https://www.mozilla.com/firefox">Download Firefox</a>

There are 16 HTML attributes that can be used on any HTML element. All of them are optional.

You’ll mostly use class (which is used for CSS), and title (which is the tooltip that appears when hovering an item like this one).

Some HTML elements have obligatory attributes. For example, when inserting an image, you have to provide the location of the image, using the src (source) attribute:

<img src="#" alt="Description of the image">

Considering that the purpose of the <img> element is to display an image, it makes sense for the path to the image to be required.

Comments

If you write something in your code without disrupting how the browser will display your page, you can write comments. They will be ignored by the browser, and are only useful for us humans who write the code.

A comment starts with <!-- and ends with -->.

<!-- This sentence will be ignored by the browser -->
<p>Hello World!</p>

Self-enclosing elements

Some HTML elements only have an opening tag:

<br> <!-- line-break -->
<img src="https://via.placeholder.com/50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

Because they don’t have a closing tag and consequently can’t contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.