updated on

html basic (part 3)

Introduction

In the first and the second part we’ve seen the basis of how to write an HTML document.

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.

Enhance with more HTML elements

Add the author: <address> element

a writer posing with a pen
A very inspired author

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:

1
2
<h1>The Boy Who Cried Wolf</h1>
<address>by Hiswe</address>

Which seems to be good enough…

Add a link to the author page: <a> element

a backpacker going from a website to another
Exploring the web

…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?

1
2
3
4
<address>
  by    
  <a href="https://github.com/hiswe/">Hiswe</a>
</address>

As seen in part 2 the parent (<address> here) can have many children.
And you can mix in any order text child with HTML element child

Semantic of <a> and href

an anchor going from a website to another
This how we bound!

<a> stands for anchor

the href attribute refers to hyperlink reference (hyperlink is the technical way of saying link… 99% of the times, we just say link)

Why the browser is merging spaces for your own good

the browser merging two white spaces
FUUUUUSION!

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:

1
<address>by <a href="https://github.com/hiswe/">Hiswe</a></address>

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.

A writer in his house surrounded by books
I'm an artist… and this is my humble home

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 level and 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 rel attribute:

rel
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:

1
<address>by <a href="https://github.com/hiswe/" rel="author">Hiswe</a></address>

Add some text formatting: <br/>, <em> & <strong>

A dinosaur firing laser beams with his eyes
PEW! PEW!

Like a lazy cow 🐮, I will just give you the updated document and walk you through each modification.

01-full-story.htmlview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <title>Wolf Story</title>
  </head>
  <body>
    <h1>The Boy Who Cried “Wolf”</h1>
    <address>by <a href="https://github.com/hiswe/" rel="author">Hiswe</a></address>
    <img src="wolf-cover.png" />
    <p>
      He was sitting in his room on a rainy day.<br />
      At one point his mother just heard him cried <strong>“wolf!”</strong>.
    </p>
    <p>
      But he was just playing with his toys:
    </p>
    <ul>
      <li>a bunch of sheep</li>
      <li>a shepherd</li>
      <li>a <em>laser eyed shooting</em> dinosaur</li>
      <li>a wolf</li>
    </ul>
  </body>
</html>

Semantics of…

A web-browser writing bold and italic on a blackboard
I can write in so many ways!

All those elements help you achieving some basic text formating:

  • <br /> stands for break. Just a regular carriage return ⏎
    Like the <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

But Sir! We have à “wolf!” problem!

A worried man standing in front of many strange text
“wolf!”, “wolf!” everywhere!

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:

1
2
3
4
5
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Wolf Story</title>
  <!-- the rest of our content… -->

Character encoding: <meta charset="utf-8" />

A browser speaking the “cute” word in english, french, thai and japanese
So many characters used around the globe!

TL;DR

  • Because it’s not really part of the content of our document content, this element’s place is in the <head>
  • <meta> stands for metadata
  • just always add <meta charset=”utf-8” /> in every HTML document <head> you create.

Understanding metadata

A polaroid with some text written at the bottom: the metadata
Real life metadata

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
  • etc.

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)
  • etc.

More details

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

<html lang=”en”>

A browser speaking an Union Jack flag
How do you do my dear fellow?

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.

A developer 🌈 thing: <!-- comments -->

A computer speaking a post-it note to a person
Please! Don't forget!

Your eagle accurate sight 🦅 have spotted this strange HTML element in my previous example: 

1
<!-- the rest of our content… -->

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 <!-- and -->

The full code example

02-with-meta.htmlview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Wolf Story</title>
  </head>
  <body>
    <h1>The Boy Who Cried “Wolf”</h1>
    <address>by <a href="https://github.com/hiswe/" rel="author">Hiswe</a></address>
    <img src="wolf-cover.png" />
    <!-- INTRODUCTION -->
    <p>
      He was sitting in his room on a rainy day.<br />
      At one point his mother just heard him cried <strong>“wolf!”</strong>.
    </p>
    <p>
      But he was just playing with his toys:
    </p>
    <ul>
      <li>a bunch of sheep</li>
      <li>a shepherd</li>
      <li>a <em>laser eyed shooting</em> dinosaur</li>
      <li>a wolf</li>
    </ul>
    <!-- DEVELOPMENT -->
    <!-- write next about how the dinosaur fire lasers with his eyes and killed a lot sheep -->
  </body>
</html>

Wrapping up

We have seen:

  • how to choose semantic HTML elements to fill our needs from a documentation
  • how to make links to other webpages: <a href="">
  • some vital information for the web-page to display properly with <html lang="en"> & <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

Bonus: a simple HTML template

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<!-- Change lang to your own language -->
<html lang="en">
  <head>
    <!-- Always put this for a good character encoding -->
    <meta charset="utf-8" />
    <!-- This will appear as the text in the browser tab -->
    <title>Webpage's title</title>
  </head>
  <body>
    <!-- Here go the content -->
  </body>
</html>