Hypertext Markup Language is the language of the world wide web. Every single webpage in existence eventually boils down to some kind of HTML. This is because it plays a fundamental role in building webpages.
Purpose
HTML defines the structure of a webpage. It does this by making use of different elements which are defined by tags. These elements can describe any number of things including paragraphs, headings, images, lists, tables and more.
For example, the following would define some truly basic content.
<h1>I like cheese</h1>
<p>Oh, how I yearn for the enticing, creamy flavour of dairy's finest.</p>
<p>Just one more bite of that savoury goodness, then I shall be complete.</p>
<p>These are my reasons for my love of cheese:</p>
<ul>
<li>It's creamy.</li>
<li>I like yellow food.</li>
<li>It's fun to look at.</li>
</ul>
<img src="https://source.unsplash.com/gMW2NZ7JGrE/800x400" alt="Some maaaaddd cheese bro.">
That don’t look pretty.
True. If you were to type out the above into a code editor and view it on your browser, you’d probably get some old school Times New Roman abomination and a picture of some maaaaddd cheese. HTML only has one very specific purpose, which as we found out earlier is to define the structure of content on a web page. Making it look like something a little less basic? That task belongs to CSS. But that’s outside our scope here.
Attributes
Taking another look at our example above, you may notice an extra bit of code on that <img> tag. It has a src attribute. In this case, the src attribute defines where the browser should look to source the image from. This could be anywhere — so an image located somewhere on our server, or from another website. Unsplash is a particularly great source for free images.
Attributes can define a wide array of extra bits needed to ensure an element functions correctly. But not all attributes work across all elements. For example: an <img> is commonly coupled with the src and alt attributes. But these would be useless for an <a> (link) element which at its most basic level only needs href to tell the browser where to link to. class is one of the most well known attributes and can be used with the majority of HTML elements. Its purpose is to provide names of ‘classes’ which can then be used for styling and other purposes.
The <head>
You might be thinking:
“Okay, that’s great. I understand HTML defines the structure and presentation of a webpage. Tell me then good sir, where does the title of a page come from?”
To understand this, we need to back up a little bit. The structure of a complete HTML webpage usually looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOUR TITLE HERE!</title>
</head>
<body>
<!-- Page content -->
</body>
</html>
(Try saving this code in a HTML file and then opening it with your browser to see what the above will look like as a proper webpage.)
Let’s break down each part:
-
<!DOCTYPE html>— this is the declaration which lives at the top of our file. It tells the browser that this is a HTML file, and the page should be handled as such. It’s mandatory. -
<html lang=“en”>— this is the HTML element. Inside here is where we can write the rest of our HTML code. Thelangattribute is recommended so the browser knows what language the content is written in. -
<body>— here is where we can define the things that will actually render out on our page. Our mad cheese example will live in here.
And so what about the <head>?
In a way, the <head> is special, because it doesn’t actually render any viewable content, but instead describes some things about our webpage. For example:
-
<meta charset="UTF-8">— defines the character encoding our webpage is written in. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">— tells the browser how to handle the page’s size and any scaling that's needed. -
<title>YOUR TITLE HERE!</title>— where we define our page’s title. This will appear on the tabs section of your browser (depending on which one you use) and your browser's history.
That’s really just a subset of what the <head> gets used for though. From here, we can also link to external stylesheets, set the description for our page, set up social media sharing content (i.e. the stuff that appears on Facebook when someone shares a link on their platform), and even inject some Javascript!
This is quite a big subject. If you want to know more, this article from MDN is a great starting point!
Nesting
You’ll notice nesting has been in all of the code examples so far, but let’s talk more about it. Here is where the structure part of HTML becomes important. Although basic, the language does require you to follow some practices when you’re using it.
<ul>
<li>It’s creamy</li>
<li>I like things that are yellow</li>
<li>It’s fun to look at</li>
</ul>
Coming back to our cheesy example, this provides a great demonstration of nesting in action. The <ul> tag denotes an “unordered list”. This will basically render a list of bullet points. However, in order for this to work, we need to add list items <li> within the unordered list. This is syntactically correct and browsers will know how to render this code properly.
Is this really a big deal?
Of course, you might not even notice the effects of a syntax error with HTML. You might even be able to get around most visual bugs with some clever CSS. But these days web browsers are getting smarter and accessibility is increasingly important. Many browsers have the feature of displaying a “reader view” for articles and long form text. If the syntax of the page isn’t correct, this view might appear incorrect. More importantly, tabbing through web pages could be the primary way a user interacts with your site. To ensure they have the best experience possible, it’s important the page makes sense semantically (the elements chosen to structure the webpage) and syntactically (the order those elements are arranged).
Caveats
Even though HTML is one of the most basic languages used in web development, it still comes with a few gotchas! Most elements require an opening and closing tag, but there are some which don’t. These are the elements that don’t necessarily render any text. So <img> for images and <br> for line breaks. In these scenarios, it’s common to leave the element unclosed, like this:
<img src=“https://yourimagesource.jpg”>
If you’re working with React, you have no choice but to close those elements. But that’s something else altogether.
Wrap up
We’ve only just scratched the surface of HTML! There’s a lot more we can go into, but hopefully that’s given you an insight into what it is, what it does and how to use it. For more reading, I’d recommend this other article from MDN.
Until next time.
✌🏾
Top comments (0)