updated on

html basic (part 2)

Introduction

With html basic (part 1) we’ve seen how to:

  • use a proper text editor to create and edit a HTML document
  • what is a HTML element

Now we will see how to build more upon that!

What can we improve?

  • A more detailed article, like enumerate the toys
  • Add an image
  • Add a title to the page

Enumerating toys: nesting HTML elements

a sheppard, a sheep, a wolf and an dinosaur
An amazing cast

It could be nice if we make a list of toys 🐑
Something like: 

1
2
3
4
- a bunch of sheep
- a shepherd
- a dinosaur
- a wolf

How this translate to HTML?

01-list.htmlview raw
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>

<h1>The Boy Who Cried Wolf</h1>

<p>He just cried wolf while playing with his toys:</p>

<ul>
  <li>a bunch of sheep</li>
  <li>a shepherd</li>
  <li>a dinosaur</li>
  <li>a wolf</li>
</ul>

Semantic of ul & li

As seen before, HTML elements carry a semantic value:

  • ul stands for __u__norganized __l__ist (unorganized because it’s bullet points and not a numeric value)
  • li stands for __l__ist item

So because we wanted a list of elements, the obvious choice was to use those elements 😎

HTML element content

a basket with 3 apples
Yummy child apples inside daddy basket

In the first part I said that the content contains your text.
That was partially true: It can also contain other HTML elements!

As example, if we want to describe in HTML a basket with 3 apples we can do something like:

1
2
3
4
5
<basket>
  <apple></apple>
  <apple></apple>
  <apple></apple>
</basket>

Of course basket and apple are not proper HTML elements ⛔ 🗑 + 🍎
Don’t use them in your HTML code.

Parent & Children

This is developer’s poetry 🌈
We often refer to the HTML elements containing the other as the parent of his children

In the example above:

  • the parent will be the basket
  • the children of the basket will be the apples

A common mistake: not nesting properly

an apple stuck in the border of a basket
Browser doesn't like HTML elements in a quantum state

What is very important to understand, is that the browser need to know where to start and where to stop.
So if we mess with the order of starting and closing tags it can lead to some problems:

Your browser is an amazing thing. He will try to fix it for you, but maybe not in the way you intended.

So this HTML code is bad:

1
2
3
4
<ul>
  <li>a dinosaur
</ul>
  </li>

The browser won’t understand it:
the <li> starts inside the <ul>
BUT
it ends outside his parent

This is the right way to write it:

1
2
3
<ul>
  <li>a dinosaur</li>
</ul>

Why the spaces before <li>?

a nested kitchen, table, basket & apples separated by spaces
Spaces are helping you to read, always

In order to prevent this problem, we use a convention:

  • just indent the content
  • so we can see better what’s inside what

It’s really important to indent well: It will prevent you to do a lot of mistakes.
…and it looks nicer (developer’s poetry 🌈)

Indenting is made easy with a a proper text editor like Visual Studio Code.
It will also highlight HTML errors for you. Good guy 🤩

Adding an image: self-closing HTML element & attributes

a browser taking a picture with his tiny hands
Hey, I need U ❤️

Let’s move on and make our HTML more fun:
Add an illustration (illustrations are good)

02-image.htmlview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>

<h1>The Boy Who Cried Wolf</h1>

<img src="wolf-cover.png" />

<p>He just cried wolf while playing with his toys:</p>

<ul>
  <li>a bunch of sheep</li>
  <li>a shepherd</li>
  <li>a dinosaur</li>
  <li>a wolf</li>
</ul>

Semantic of img

This one is easy:

  • img stands for __im__age

Want an image? use img 🌆

Self-closing HTML elements

a picture looking perplexedly at a text
What is it?

Some HTML elements don’t need content.
In the img element example, well… an image is an image, what else do you want to add?

to write them:

  • just make only 1 tag
  • have to finish with />
a HTML element with a self-closed tag
I'm a self-closed HTML element!

The anatomy of attributes

a basket with 3 apples of different kind
Yummy apples can come in all sort of kind

If we go on a deeper view, HTML elements can also have some properties that describe it.
Following our basket/apple example, we might want to know more about the apples:

1
2
3
4
5
<basket>
  <apple skin="pink" taste="sugary" />
  <apple skin="blue" taste="sour" />
  <apple skin="soft-pink" taste="not so much" />
</basket>

How to write an attributes

a description of a tag
XRay the tag
  • those properties are named attributes
  • those attributes are always on the starting tag
  • those attributes come more often in two parts:
    • an attribute name: a text without space
    • an attribute value: a text that can contain space
  • we always write it that way: attribute-name="the content on my property"
    • Notice the equal sign right after the attribute name
    • The equal sign shouldn’t be separate by space (attribute-name = "the content on my property" is wrong)
    • The content always come surrounded by double quotes

The image src attribute

The src attribute stands for source

Some information like the one for an image, can’t be included in the HTML document.
We need to tell the browser where to find them.

The src attribute is simply that: where we can find the file containing the data of my image!

Beware of spaces and letter case

picture, which are written one in lowercase & the other in uppercase
Don't mess with the wolves

The browser takes a deep care of respecting what you write.
He will even make a difference between lowercase and uppercase so a file named WOLF.jpg and wolf.jpg are not similar to him.
In the same ways, spaces can be a tricky thing so as a rule of thumb:

  • always name your files in lowercase
  • replace spaces by - in the name

example:

My long Image name.jpg is better written my-long-image-name.jpg

The page title

The browser tab is named “wolf story”
There is a title here

The browser let’s us specify the text that appear in the tab.
We call it the page title.

In order to do this we need some adjustments:

03-page-title.htmlview raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <title>Wolf Story</title>
  </head>
  <body>
    <h1>The Boy Who Cried Wolf</h1>
    <img src="wolf-cover.png" />
    <p>He just cried wolf while playing with his toys:</p>
    <ul>
      <li>a bunch of sheep</li>
      <li>a shepherd</li>
      <li>a dinosaur</li>
      <li>a wolf</li>
    </ul>
  </body>
</html>

Why <html>, <head> & <body>?

a HTML file with a brain, having a “wolf story” book open in front of him
You can't see no brain… But read my story!

Developers are poet 🌈 But like poetry there is some conventions: like keeping things simple & stupid 👷‍♀
If something is organized with parent ➡️ children relations, then we should apply it everywhere, no exceptions allowed.

<html>

Before, we used to just put our content, floating inside the HTML file.

Now we put a single parent for everything: the <html> element, just to make sure that nobody’s left without a parent.
And we called it <html> because it’s what we’re writing right?

<head>

In the <head> we will keep everything that’s invisible inside the webpage.

Look at it as your thought & identity.
Important but less obvious than the rest.

<body>

In the <body> we will keep everything that’s visible.
Our content 📘

wrapping up

We have seen:

  • More HTML elements and their associated semantic
  • That we can nest HTML elements inside each other
  • That HTML elements can have attributes
  • How to write everything in a clean way
  • A more pertinent organization of the HTML page

It’s still ugly, but before digging into that (CSS), we will make some short improvements in the story… in the part 3!