What is HTML? A Simple Introduction for Absolute Beginners
Note:
This page is part of the
Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.
HTML?
What is HTML?
Now let's start getting our hands dirty with a bit of theory. The first acronym everyone mentions when talking about creating websites is HTML. I confess that before starting, I had no idea what it was exactly, but then, little by little, I began to understand, and now I'll try to explain it to you in the simplest way possible.
HTML Explained Simply
The very first fundamental thing I learned is this: HTML is not used to make a web page beautiful. No colors, cool fonts, animations (that's done by another 'language' called CSS, but let's ignore it for now). HTML only deals with the STRUCTURE, the raw content.
How Can We Imagine HTML?
I like to think of HTML as the skeleton of a web page. Imagine a house: HTML defines the rooms, the load-bearing walls, the doors, the windows. It says 'a title goes here', 'a paragraph of text starts here', 'this is an image', 'this text is a link that goes there'. HTML puts things in their place and gives them a role, a basic meaning.
What is "Markup" in HTML?
It's called a "markup" language because it uses "labels" (called "tags", which we'll look at more closely) to mark, precisely, the different pieces of content and tell the browser what they are.
How to Recognize an HTML File?
This whole "skeleton" is written in simple text files. You recognize them
because they end with the .html extension (or sometimes
.htm). Inside these files is the code with all our "markings".
How the Browser Transforms HTML into Web Pages
And the browser (Chrome, Firefox, Edge, Safari...)? It's the interpreter. When
you feed it an .html file, the browser reads the instructions
(the tags) and builds the visual page. If it reads a tag that says "this is a
main heading", it will display that text larger than the others. If it reads
"paragraph", it will put some space above and below it. It doesn't show you
the raw code, but the final result based on those structural instructions.
Practical Example:
The cool thing is we can try it right away, without installing anything strange!
Let's do an experiment together:- Open Notepad (on Windows) or TextEdit (on Mac). [Note for Mac: If using TextEdit, make sure it's in "Plain Text" mode, not "Rich Text". Go to Format > Make Plain Text].
- Copy and paste this exact code into the empty file:
-
Now SAVE THE FILE. This is a crucial step:
- Click on
File > Save As... - Choose a folder that's easy to find (e.g., the Desktop).
-
As File name, type
hello.html(make sure it ends exactly with.html!). - As "Save as type", select "All Files" (very important, otherwise it saves as .txt).
- As Encoding (if it asks), choose UTF-8.
- Click Save.
- Click on
- Now go to where you saved the file; you should see an icon named hello.html (probably with your browser's symbol). Double-click that file!
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page!</title>
</head>
<body>
<h1>Hello Everyone, I Am a Mega Title!</h1>
<p>This is my first HTML experiment! I'm a nice paragraph where you can write whatever comes to your mind.</p>
<p>This is the second paragraph.. And you could go on for much longer!</p>
</body>
</html>
(Don't worry NOW about what each line means, we'll look at that later!)
It will open in your browser and... voilà! You should see a very simple page
that says:
"Hello Everyone, I Am a Mega Title!" larger and "This is my
first HTML experiment!.." below.
It's not a design masterpiece, but HEY,
you just created your first working web page! You told the browser, using
HTML, to put a heading with the <h1> tag and paragraphs
with the <p> tag.
In Conclusion
So, this is HTML in its most basic essence, seen through the eyes of someone who just started. From the next post, we'll start taking apart that code we copied to better understand what those strange "tags" do. See you next time!
Comments
Post a Comment