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!
- A more detailed article, like enumerate the toys
- Add an image
- Add a title to the page
It could be nice if we make a list of toys 🐑
How this translate to HTML?
As seen before, HTML elements carry a semantic value:
ulstands for unorganized list (unorganized because it’s bullet points and not a numeric value)
listands for list item
So because we wanted a list of elements, the obvious choice was to use those elements 😎
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:
apple are not proper HTML elements ⛔ 🗑 + 🍎
Don’t use them in your HTML code.
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
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.
The browser won’t understand it:
<li> starts inside the
it ends outside his parent
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 🌈)
Let’s move on and make our HTML more fun:
Add an illustration (illustrations are good)
This one is easy:
imgstands for image
Want an image? use
Some HTML elements don’t need content.
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 />
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:
- 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
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.
src attribute is simply that: where we can find the file containing the data of my image!
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 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
My long Image name.jpg is better written
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:
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.
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> 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> we will keep everything that’s visible.
Our content 📘
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