Now we’re going to play with that and expand our HTML document.
This will help us to learn more about HTML and how we can easily make it more accessible for people with disabilities.
Why not showing who wrote this amazing piece of art? (short answer: me)
If we look which HTML element seems the most appropriate, we can see that
<address> seems the right one.
The HTML <address> element indicates that the enclosed HTML provides contact information for a person or people, or for an organization
So we can add it right after our title:
Which seems to be good enough…
…but we can do more!
The web is all about links and getting from one place to another!
So why not include a link to the author website where all his glorious contents live?
As seen in part 2 the
<address> here) can have many
And you can mix in any order text child with HTML element child
<a> stands for anchor
href attribute refers to
hyperlink reference (hyperlink is the technical way of saying link… 99% of the times, we just say link)
Even if we wrote the “by” and “Hiswe” on two lines with white-spaces before, the output will be rendered on a single line.
We have seen in part one that the browser merges multiple spaces and ignore carriage return.
This comes in handy here! This allow us to have a proper indentation in our code without worrying about the browser rendering 😇
But for a better understanding, we can write our code in that way:
In the end whatever way you’re choosing this is only a matter of personal appreciation, the browser will output the content in the same way.
Semantic is important, because:
- It will make your HTML code more readable for you
- It will allow a better screen reading experience for disabled people.
In short: the computer will read the text and describe the context of this text.
As an example if you have an heading of first level
<h1>, the screen reader will say:
heading of first leveland then read the content
We wrote a link, but what we really want to achieve, is describing an author.
We already have the
<address> element but we can add more on the link.
If we take a deeper look at this HTML element documentation, we can see that there is a
Specifies the relationship of the target object to the link object.
This documentation provides us a link of the possible values of this rel attribute and it says that we can have an author value!.
Here’s a lookup of our update:
Like a lazy cow 🐮, I will just give you the updated document and walk you through each modification.
All those elements help you achieving some basic text formating:
<br />stands for break. Just a regular carriage return ⏎
<img />element, it’s a self-closing HTML elements.
Y’know a break is just a break…
<em />stands for emphasis – rendered by default in italic
<strong />obvious strong is strong 💪 – rendered by default in bold
And after knowing that, it’s just a matter of updating your HTML file and “voila!”.
HTML is easy ✌️ It’s applying the same recipe again and again:
- writing the content
- choosing the most fitting HTML elements if needed
- nest and indent everything in a good way
Your eyesight is as accurate as an eagle’s 🦅
We do have a problem but the good news is that it can be fixed very easily.
We just have to modify our document like this:
- Because it’s not really part of the content of our document content, this element’s place is in the
<meta>stands for metadata
- just always add <meta charset=”utf-8” /> in every HTML document <head> you create.
Metadata is everything that isn’t the content but that provide context upon it.
If we take a photo as an example, metadata would be:
- where the picture have been taken
- at what time
- by whom
- with which camera
As example, this can be used by softwares to:
- group all the photos taken at the same place,
- group them by date or time range (every photos taken in the last month)
The root problem, is character encoding.
In a short, computers have evolved from supporting only a subset of english characters to all characters in the world (including emoji 💩).
But the web is an open platform and tries to maintain compatibility with old documents.
So you have to tell your browser that you use the most modern encoding.
If you want to have a better understanding of this subject, I recommend you this short video on the subject
This is to indicate in which language the HTML document is written.
It’s good for accessibility (so it can know in which language he should read the document)
As a rule of thumb: always provide it.
Your eagle accurate sight 🦅 have spotted this strange HTML element in my previous example:
This is a comment, a very important thing in the developer’s toolbox.
It’s just this:
- text that will not appear in the browser…
- …but that stays in the code for helping us
You can see that as post-it note for you.
You can write everything inside it, just make sure that the content is properly enclosed in
We have seen:
- how to choose semantic HTML elements to fill our needs from a documentation
- how to make links to other webpages:
- some vital information for the web-page to display properly with
<meta charset="utf-8" />
- what is a comment in a dev perspective
Getting better at writing HTML is only knowing which HTML element should be used & with which attribute.
And this is all for the basic of HTML.
Next we will see how to make our story nicer with CSS
Again thanks to xpac27 for the corrections