As I talked about elements briefly in the last part of this series, they are the building blocks of what an HTML document is.
Though not a programming language (since there's no logic that you can implement with it, just an output layer), HTML still is a high level language.
What does that mean?
Simply put, the people behind it made sure to give us a lot of options to make sure we wouldn't struggle while working with it.
And elements are those ready-made stuff available for us to use however we'd like.
The combinations are endless (every website you've ever visited uses the same set of HTML elements to build it!)
Broadly speaking, elements can be divided in two types.
1. Elements that can bear children
We've seen them before!
Just to jog your memory a bit
<html>
<body>
Hello World!
</body>
</html>
Do you see it yet?
We have two elements in this piece of code above. An "html" element and one "body" element.
They both seem to have a start tag that looks like <element-name> and ends with </element-name>.
And whatever resides inside or between those tags is called it's content of child or children (if there are more than one of them).
To explain it further, the element body is a child element of "html" element.
The text "Hello World!" is not an element, but it's still a child of "body" element!
So what is it if it's not an element?
It's that element's content! or to be more precise, it's a text node.
Wait ... what's a node?
Aaah, let's get back to compare it with some real life example.
In english we call them figure of speech right? And this example would be a "Simile" (correct me if I'm wrong).
The entire HTML element can be considered a tree (a real life tree, like a big one).
Everything in that tree can be considered a "node".
So whether it's leaves, the trunk (the huge body of the tree) or the branches, they're all nodes.
So ... an element is necessarily a node as well!
WAIT! What?
Yes, an element is a node. And the content that we write inside it could be another node (whether an element node or a text node).
So coming back to the example
<html>
<body>
Hello World!
</body>
</html>
We start with an element node that's "html". It has a start and end tag.
It "contains" content. Content is whatever is inside those starting and ending tags.
And in this case, it's an element node "body".
Now comes the tricky part you see.
Body does have some content and it's a text node!
Did I explain that right?
Now the people who made HTML made tons of different kinds of elements for us to combine in whatever way we'd like.
And to be honest, most of them are replacable with each other. So why create so many of them?
To put it simply, it's for the sake of structuring our code to make it more readable.
To explain it better, consider an entire page of a newspaper in same font size, same color, nothing's bold, everything looks the same.
It'd work right? I mean you can still read it and get to know the news but it'd just confuse you.
You wouldn't be able to find when a paragraph ends, and a title begins easily.
And for that purpose, they made lots of these elements.
So let's see a few of these elements.
Open up JSBin, this online tool helps us write HTML code in the left panel and see the output on the right.
You may delete whatever's already there on the left, we'll write everything ourselves.
Let's start with this
<html>
<body>
<h1>
This is very big heading
</h1>
<h2>
Not as big
</h2>
<h3>
This looks small
</h3>
<h4>
This looks smaller
</h4>
<h5>
This looks even smaller
</h5>
<h6>
This is unreadable
</h6>
</body>
</html>
What are these elements?
These are what we call heading elements.
There are 6 of them that we can use. And as you might have noticed, "h1" has the largest text size while "h6" the least.
Now, spoiler alert!
You could make each and any of these heading elements to look like the other one or way different that they already look and that's all possible with CSS! That we'll soon get to.
But for now just understand that the HTML renderer (browser in this case) sometimes associates some basic styling with different kind of elements (like here it did, different font sizes for all 6 heading elements).
Take a look at this code now.
<html>
<body>
<p>
Take a look at this
</p>
<div>
This looks exactly the same as above right?
</div>
</body>
</html>
There's no visible font size difference here right!
Also what does "p" and "div" even mean?
"p" stands for a paragraph element while "div" for a division (there is one that's pretty similar to div, that's "section").
But why have two elements that look exactly the same?
Shouldn't we just use "p" to show some text?
Yes. We should. And if it's all so confusing right now, just know that we'll get there!
But there are two reasons as to why use multiple kinds of elements.
- It helps with SEO. That's search engines.
- It helps you structure your code better. "p" should contain text while "div" should be more like a wrapper or container that might contain other elements, for example tons of paragraphs!?
But what if what I'm trying to write is not a paragraph?
What if it's just a name that I'd like to show, technically in english it's not a paragraph right?
Should I still use the "p" element?
I mean you can, but then you should instead use a "div" element.
Take a look at this code below (write it out in the JSBin tool and see the output as well)
<html>
<body>
<h1>
About me
</h1>
<div>
Saurabh Sharma
</div>
<p>
Saurabh Sharma writes code, makes applications, is struggling to learn piano and guitar. Also he likes to watch movies day and night.
</p>
</body>
</html>
Now, would it hurt if you used "p" instead of "div" or vice-versa?
No! But it just helps you organize your code in a better way!
Okay, okay, enough about it. We'll dive further some other time. Next.
2. Void elements, that can't have anything inside them
Unlike "h1", "p" or "body", these elements aren't supposed to have any child node (whether another element node or a text node).
For example, to show an image, HTML has a dedicated element that's called "img".
The syntaxt (the way it should be written) looks like
<img src="url-of-the-image" />
🤯 It hurts my brain! What is that? (You probably, or probably not, I don't know).
But this looks nothing alike the other elements we saw!
So let's go through that line of code bit by bit! (not actual computer bits :p)
We can see that the element does have a start tag but no end tag (that's the whole point of calling it a void or empty element).
But that start tag looks a bit off!
That's because unlike <img> it's <img/>.
But does it make any difference? Visually no, they'd both render the same thing (browsers are smart enough to recognize these void elements). Some might even not prefer to use that forward slash but I do! And since this is my guide, I'll ask you to use them as well!
Okay, next. What's that src="url-of-the-image" bit?
That's called an attribute! And we'll discuss and deep very dive into them in the next part of this series but for now just assume that you know what those are (fake it till you make it, right?).
There's this website picsum.photos that lets us use random images however we'd like. So in your JSBin code editor, put this in the left panel
<img src="https://picsum.photos/200/200" />
If you're wondering why didn't we use the entire
<html>
<body>
<img src="https://picsum.photos/200/200" />
</body>
</html>
Well for two reasons, one, it's tiresome for me and second, since we don't really have a lot of code, it works the same.
Let's see the output! You should be seeing an image! Awesome!
But I wonder what would happen if I add an end tag to "img" element and put some content inside of it.
Okay, to feed your curiosity
<img src="https://picsum.photos/200/200">
Is this text visible?
</img>
If you see a different image that mine, that's alright, that's the whole purpose of this picsum.photos server. It provides a random picture each time you request for one.
Now back to the point. It did show the text node inside the "img" element. But it wasn't how it was supposed to go!
And for that I have two explanations:
- HTML is pretty loose about it's rules (it's not strict) and let's you make mistakes and the renderer or browser tries to do the best it can with whatever input you have given it.
- Computers are dumb. So make sure to tell it precisely what you want it to do!
It worked right!?
An element that was supposed to be a void or empty element, that wasn't supposed to have any content or ending tag works the same way a container element would.
And you're right, but that does not mean that you should do it.
There are rules that we should follow, a structure we should maintain. I mean rules are what makes us different from animals right? You could go hunt a deer and eat it bare handed but should you do it?
Absolutely no. Don't do it.
And that's the same here. Void elements can work the same as a container element but you should avoid doing that.
That's it for this piece of writing. Next we'll talk about attributes (the fake it till you make it thingy I talked a bit earlier).
Top comments (0)