# Elements, attributes, and conventions

Article discussing the elements, attributes, and conventions of HTML.

We write HTML elements to build websites, but before we cover elements in more detail, let’s look at the basic HTML structure that needs to be written every time we want to create an HTML document.

The following is an example of the global structure of an HTML document.

<!DOCTYPE html><html> <head> <title>Title here</title> </head> <body> ...content goes here... </body></html>

Try running this code in JSFiddle. Then try to do the following:

• Add your own title and content (for example, use your favourite poem). Can you get them to appear correctly?
• Remove or shuffle around pieces of the code – try to break it. Take note of what error messages come up.

Notice the structure of the document you just saw and played with – how each element in it is hierarchically organised.

## HTML elements/tags

The above code shows the global structure of a HTML web page, as well as HTML elements (also known as ‘tags’). The following table contains some examples of common HTML elements:

HTML element Description/purpose
<html> This simply defines the root element of an HTML document or page. (Developers use this tag to mark the beginning and end of an HTML document, much like writers use ‘FADE IN’ and ‘FADE OUT’ in screenplays.)
<title> Assigns a specific title for an HTML page (which is what appears in the browser’s title bar or page tab).
<body> This element identifies/defines the body of the document and contains all the visible contents (e.g. headings, paragraphs, tables, etc.)

## HTML attributes

Not to be confused with elements, HTML attributes are used for giving more information to specific HTML elements/tags. The attributes give settings to control how the element displays and behaves. Let’s start by looking at attributes for text elements.

### Text and paragraphs

When it comes to text, we have quite a few element and attribute choices. You’ll discover more as you progress; for now, let’s just look at two.

This is how we change the colour of text inside a paragraph:

<p style="color:red;">This is a red paragraph.</p>

<h1 style="color:red;text-align:center">This is a red header</h1>

This attribute can be used on any sort of textual content. You can use ‘text-align’ to change the position of a header or paragraph.

Copy this example into JSFiddle and try altering the text colour to green or brown. Can you make the alignment left, centred, and justified?

Standard HTML elements and attributes follow American English spelling. For example, remember to use center and color when writing text attributes, otherwise the browser won’t display your web page correctly.

We’ll explore text attributes in more detail in Week 2.

## HTML coding styles and conventions

It’s important to note that, in addition to the HTML’s global structure, HTML elements, and their attributes, there is also the important question of coding style.

No developer is an island, and writing consistent and tidy (or ‘clean’) code makes it easier for other developers to use. Furthermore, certain formatting conventions and guidelines for best practice have emerged to ensure the language remains accessible, scalable, and sustainable. These can be broken up into general styling, formatting, and meta rules.

Here are four simple, easy-to-remember guidelines from Google’s HTML/CSS Style Guide: [1]

• Don’t use tabs to indent text; use spaces only. Different text editors interpret tabs differently, and some Markdown features expect spaces and not tabs.
• Indent by two spaces per indentation level.
• Use all-lowercase for elements and attributes.
• Don’t leave trailing spaces at the end of a line (except as needed for markdown).

## What do you think?

Can you think of your own example to help you understand the relationship between an element and an attribute? How would you explain it to someone who’s not familiar with HTML? Also, how would you explain the value of following HTML (and other programming language) conventions while writing code? What’s your strategy for keeping these conventions in mind as you write?)

## References

2. Google HTML/CSS Style Guide [Internet]. GitHub; [date unknown]. Available from: https://google.github.io/styleguide/htmlcssguide.html#General_Meta_Rules
3. WHATWG Standards. [Internet]. The Web Hypertext Application Technology Working Group (WHATWG); 2021 Jul 30. Available from: https://html.spec.whatwg.org/multipage/introduction.html#introduction