HTML basic (part 2)

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

An amazing cast

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

• a bunch of sheep
• a shepherd
• a dinosaur
• a wolf

How this translate to HTML?

Semantic of ul & li

As seen before, HTML elements carry a semantic value:

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

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

HTML element content

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:

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

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:

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:

Why the spaces before <li>?

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

Hey, I need U ❤️

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

Semantic of img

This one is easy:

img stands for image

Want an image? use img 🌆

Self-closing HTML elements

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 />

I’m a self-closed HTML element!

The anatomy of attributes

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:

How to write an attributes

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

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

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:

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

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!

Originally published at hiswe.github.io.