Let us now pierce a bit more deeply into the anatomy of HTML elements and the basic structure of a web page.
Attributes, attributes everywhere!
As we have already seen, HTML elements are composed by an opening and closing tag and have content between those (text or further child elements), but we previously skipped other key constituents, called attributes.
Attributes are used to give browsers extra info about the element, they should always be declared inside the opening tag (since some elements don’t have a closing tag) and separated from each other by a single space.
Let’s check an example of an anchor, the HTML element that is used to generate hyperlinks…
As you can see, the
href attribute takes the URL of our link between double-quotes, in this case, another document in the same folder as the hypothetical document we are on.
Just so you know, the hypertext reference attribute can actually do more than link documents, it can be used to open an email client with our desired address on the recipient (i.e.
href="mailto:email@example.com"), or even open ftp connections.
Also, while I have said that attribute values should be declared inside double quotes (
"), it is fine to use single quotes (
There are plenty of other attributes available for anchors and even more for other HTML elements.
There are common ones like
class which are related to CSS (we will clarify this relation on the next episode). Boolean attributes like
disabled (buttons) and
checked (checkboxes), which are called such because they are either true or false, and as such do not require a value. You can even create custom
data- attributes that are the best way to add JS connected information.
Before you start worrying about memorizing dozens of attributes and their values, I will let you in on a secret… no one actually knows any of this by heart, we just look them up from time to time on documentation sites like the Mozilla Developer Network. 👨💻
Page anatomy 101
Just like elements have anatomy, pages also have their own structural rules, albeit not as strict or predictable.
Take the following example…
This is what all of this should look like on your browser…
Breaking it down, we have our
body elements (notice how things inside the
head are meant for the browser only and the content of the
body is visible, just like the HTML element attributes and content) and inside the
body we will typically find the following elements:
Normally a big title of the page or a strip on top that is always shown in all the site pages (it can also stick to the top when scrolling).
Kinda self-descriptive, this element takes the main navigation links of the site.
Where the, you guessed it, main contents of your page go into.
In our example, it contains an
article (it could have been several articles like in the case of blogs) with the text content of the page and an
aside, which usually is used as a sidebar with secondary links and information related to the
The bottom part of your site, like the header it normally appears in all pages and takes information like the copyright.
Nothing is true, (almost) everything is permitted
While I have place the
main, it could also be placed before or after to the
main, and hold the primary
nav (i.e. your hamburger with side of hidden menu).
This is the beauty of HTML, while it’s good practice to format your documents in certain standard configurations, doing something different (if you have reason to do so) will still get you a valid page, that renders as it should on the browser 😎
And that is that for this episode! Next time I will take your for a CSS space walk and show you how it dances the perfect sideral tango with HTML.
So long, and thanks for all the claps 👏
Buy me an oat milk latte!
Tiago Almeida is sharing Product Design knowledge and goodies
My name is Tiago Almeida. I'm a Product Designer and Illustrator born in Portugal 🇵🇹, and living the lagom life in…
The Designer’s Guide to the Galaxy… (of Code) E01
This is where our story begins, learn about the humble beginnings of the web, the creation of HTML and the basics of writing it.
The Designer’s Guide to the Galaxy… (of Code) E04
How CSS was born and a brief introduction to how it works and relates to HTML…
Getting started with HTML
You've reached the end of the article - we hope you enjoyed your tour of the very basics of HTML! At this point you…