Elements, attributes, and conventions
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>
Next, we can add another attribute and create a heading:
<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 usecenterandcolorwhen 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).
For more information about HTML coding style and conventions, review (and then bookmark) the following resources:
Read: Google HTML/CSS Style Guide [2] Read: The Web Hypertext Application Technology Working Group (WHATWG) [3]
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?)
Share your example and answers in the comments.
References
- Google. Google developer documentation style guide: HTML formatting [Internet]. 2. Google; 2021 Mar 24. Available from: https://developers.google.com/style/html-formatting
- Google HTML/CSS Style Guide [Internet]. GitHub; [date unknown]. Available from: https://google.github.io/styleguide/htmlcssguide.html#General_Meta_Rules
- 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
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
