As seen in basic web understanding the HTML file is the backbone of a web-page.
The purpose of this post is to have a better understanding of those, and how you can write a simple one!
Like on the basic understanding, I will omit some stuff to keep it simple.
As more posts will be published, we will clarify those 🤓
Every device (computer, mobile phone, TV…) has a web-browser. So it’s the most universal language you can learn!
With it you can make:
- sales sites
- video games
- and a lot more!
And it also can be read by people with disabilities!
It’s a text file.
So we can just write some text on it and it will do the thing!
But for the browser to understand it’s reading an HTML file we need two things:
- the right file extension: .html
- a small text at the top of the file to indicate the content is really HTML.
This will be
In short: you can’t use Microsoft Word
Microsoft Word (let’s call it Word for now on) produces docx files not HTML files.
And your browser can’t understand Docx files.
Even if, when looking at word document it looks like only text, it isn’t.
Word in its files stores a lots of other information! the text in itself but also the font styles you use (which font, the size, if it’s bold or not), the images you use, etc.
So we need another solution.
Luckily there is a lot of alternative, and some are already on your computer!
- don’t forget to have the
format > Make Plain Textoption checked
- don’t forget to set
save as typeto
All Files (*.*)
So you can download and use one of them 👍
Make a new file named
my-first-webpage.html and save it somewhere.
You can now type:
And open it with your web browser! (or click on the
view raw to have the final result)
You wanted to have a formatted article, right?
It means for a better reading experience having some:
Where in Word you can click a button to this, in HTML you have to write it for the web browser to understand.
Because right now, you only wrote two lines of text, and for him it’s just some text: he merges multiple spaces and ignore carriage return 😇 (and believe me, he’s doing this for your own good)
We need to update our example like this:
After saving, reload your browser aaand… It’s done! 🥇
It’s still kind of ugly but we will address that on another post talking about CSS.
We just told the browser which type of content we want 😊
An HTML Element is a group having a semantic value (like heading, paragraph, list…)
It’s composed most of the time by:
- a starting tag (
<p>in our example) always written by the tag’s name of the surrounded by angle brackets
- the content (your different texts)
- a closing tag (
</p>in our example) like the starting tag but:
⚠️ add an additional
/after the first angle bracket!
you can see more on this wikipedia article
That’s how you tell the browser where an HTML element begin and stop.
Without it, as clever as the browser is, he can’t guess what you have in your mind when writing your HTML page.
Writing properly an HTML element is the most important thing to understand about HTML!
As told previously, any HTML carry a semantic value, so:
h1stands for heading of 1st level
pstands for paragraph
You can view an extensive list of HTML elements here
Writing an HTML page is easy!
Now you know how to:
- use a proper text editor to create and edit a HTML document
- what is a HTML element
But we have more to see on the second part to make it a little bit more complex ⚙️