Learn About HTML in 5 Easy Steps

1. Why We Build Things

Last week in class, one of my students wantonly guffawed when I compared building a website with baking a cake. Later, however, they nodded and said – „okay, yeah, I get it! You’re right.“ You’re probably expecting me now to go off on my well-ridden pony about cake and how it relates to project management, websites, social media, investment strategies – but this time I’m not going to. I’ve eaten far too much cake this weekend.

You can build anything if you understand how and most importantly why it should work. I love that scene in the matrix (2?) where the French guy swills his wine and smiles at Neo and the crew „Why is the onIy reaI source of power. Without it, you are powerless. And this is how you come to me, without why, without power.“

The desire to build anything stems from our need to solve a problem. Building a puzzle? You’re bored. Baking a cake? You’re hungry or there’s a party. Building a house? You’re getting wet living outside. Building a website or a simple web page? You have some information you want to share. Behind every good website, there is a why.

2. How to Build a Website

If you were going to build a website, you would use HTML (hyper text markup language) to put up the structure, CSS (cascading style sheets) to paint and wallpaper, and finally, PHP (Hypertext Processor), Javascript, or JQuery, to open and close the windows and doors. Structure, design, functionality. Much like building a house.

You could also ask an AI tool to build a website for you. But, it’s more fun if you do build a website yourself.

Within the „house“ you build, we have rooms, like a kitchen, bedroom, living room, den – and within these rooms we have closets, stairs, ceilings, doors. Now, why do we have all these different terms? We know intrinsically what these containers are, and yet we have names for their functions. If we didn’t we would say – „please go into that space in the wall of that larger space where the bed is.“ We might even need to explain that the bed is „a rectangular object covered in soft things on which we lie down“.

When you are building your website, don’t forget the search engines

Now, imagine you are a search engine. Search engines are blind. They don’t see our images, colours, sliders, news tickers, popups – nothing except the source code of your website. For a search machine to understand what you are trying to do on your website it must read through your code and decide which room is the kitchen, the den, the closet, or the bathroom. It does that to prioritise the information on your website. If you don’t help the search machine, it will piddle in the space where your laying down object is placed – by giving you a low SEO score.

3. Basic HTML

Most of us can recognize the basic HTML tags – table, p, br, div, strong etc. HTML tags are split into two types – tags that tell you what something does, and tags that tell you what something looks like. A paragraph displays text, a paragraph with a strong inside it displays bold text – a table sorts content into columns and rows, a table with a width or height definition tells you how wide or tall the table will be etcetera.

<!DOCTYPE html>
<html>
<head> This is Basic HTML. In the head we find things like the page title and links to our style sheet. the head is the "brains" of the outfit.
</head>

<body>

<h1>This is a Heading - let's call it Rooms</h1>
<p style="strong">This paragraph contains information about the area in which I sleep. It is in a bold, or strong, font face.</p>

</body>
</html>

Basic HTML is fine, was fine, for basic pages and sites. We were, in the past, very interested in displaying information for human readers more than worrying about what machines thought about it. Then along came the machines – and they need to know where the bathroom is.

It’s going to be to our advantage to make clear in which „room“ in our website you can find the navigation, the news, the footer, the image gallery, the important sections, the unimportant sections. We can do this, help the search engines, and help ourselves in the process, by building our HTML in a semantic way.

4. Semantic HTML

In 2013, Google’s hummingbird algorithm update implemented a big change in how the search engine search for and catalogued our websites. No longer interesting were keywords and content. Much more interesting was how those keywords people where searching for related to your website’s structure and content.

Think about our house again. We wanted to build a house – but why? It’s cold and wet outside. Google thinks like this. Looking for a new pair of yellow shoes? Perhaps you would also like a scarf to go with that – why? You don’t really want new yellow shoes – you want to look nice in a new outfit. And so goes the thinking. There are connections between everything. Nothing happens by chance.

Semantic HTML allows us to define the meaning, logic, and importance of information found in our websites. Is our paragraph actually an article? Is it a section, header, footer, aside? In addition it allows us, when we are building our website, to organise our information more clearly.

<!DOCTYPE html>
<html>
<head> In our Semantic HTML we find things like the page title and links to our style sheet. The head is still the "brains" of the outfit.
</head>

<body>
<article>
  <header>
   <h1>My Rooms Title</h1>
   <p>Sleeping room information and other things.</p>
  </header>
  <p>This is a paragraph about what furniture I will put in the room where my sleeping object is located</p>
</article>
<footer> here we find things like the copyright, social media links perhaps, or contact information.
</footer>

</body>
</html>

5. The Icing on the Cake

You knew I wouldn’t be able to resist some sort of cakey reference, didn’t you? The icing on the cake is somewhat salty, actually. We are more and more using tools, building websites, relying on CMS (content management systems), which we could rarely build or repair if push came to shove. Probably we’ll never need to worry about it. Can anyone repair their car anymore? Unlikely, but we all still drive and manage to do so without major hiccups. The same is probably true about websites – until the website that agency built in divi-bakery-beaver-builder v 3.0 fails and the agency is not available to take your call. Perhaps having an understanding of how the website was built might let you sleep better.

How can we expect the advanced, state-driven stuff to be built robustly if we’re all failing HTML 101?
Eric Bailey

That quote comes from a March 2019 article, but I think it is still particularly relevant.

Building things, allows us to think about them. Thinking about things, allows us to understand them. It can save us money, give us a sense of gratification and value, and it can also give us another perspective on what others do.

Interested in Learning HTML or CSS? Adults, Kids, and Small Business Owners Welcome

There are literally hundreds of online sources where you can learn HTML and CSS. If you would like some immediate help though, please drop me a line. If you’re not in the immediate vicinity, we can chat on zoom, skype, webex, tynker, teams …

HAVE A QUESTION? Click to contact me and LEARN MORE ABOUT HTML