HTML is old, reliable and does not cost your users half a minute to download. Making it essentially that thing you write when the client doesn’t pay you enough to actually use React. And while it’s not very fun or exciting, it is in fact a thing that you can do for money. So as the world’s best HTML Programmer it is my duty, no, my MISSION; to teach you How to HTML.


Note: This is a parody, please do not try to actually learn how to html from it. If you’re looking for a real tutorial. Codecademy’s one is pretty nice. Also the one on FreeCodeCamp.


Now there are only three things you’ll need when it comes to HTML:

  • Knowing how to use a computer.
  • Having the stuff you’re going to be copying and pasting.
  • And familiarizing yourself with the tags you’re going to be (ab)using.

Now, I trust you can take care of the first thing, so let’s get started with the second one:

The stuff you’ll be copy pasting.

Have a look at this Snippet:

<!doctype html>

<html lang="en">
<head>

  # Meta tags that configure your webpage
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  # Meta tags that describe your website
  <title>Your Webpage's Title</title>
  <meta name="description" content="What your Webpage is about">
  <meta name="author" content="Your name here">

  # Your CSS
  <link rel="stylesheet" href="path/to/your/file.css">

</head>

<body>
 # Start adding stuff in here
  <script src="path/to/your/file.js"></script>
</body>
</html>

Have a good long hard look at it, because you’ll never, and I repeat, never, write this inside a file. Heck not even I wrote this, I took part of it from here, and another from here. Copy and paste it somewhere, keep that file around and prepare to dig it out every time you need to start a webpage.

70% of the time, it works every time. Now, let’s go over what’s inside it.

What is in our Magic Snippet?

  • !Doctype: The Document Type Declaration used to be the main dude at the club telling the bouncer what his crew was all about. Now it’s just happy to be included.
  • Html: Let’s you state to the browser your intentions to use HTML. Because the .html file extension and the !Doctype are totally not enough as indicators. It’s speaking english with lang="en" because it knows better.
  • Head: Put all of your configuration stuff here, and only here. The browser likes reading it first with its morning cereal.
  • Meta Tags: Use these to describe how your website works and what it’s all about.
    • Charset is the set of characters your webpage can understand, it’ll almost always be utf-8.
    • Viewport is there to tell the browser that you want your page to be as big as the browser is. And this is not  a default setting because the browser is insecure about itself and needs to be told to cooperate.
    • Description and Author are explained inside the snippet. Google likes them.
  • Title: This gives your page a name, which makes it feel good about itself. Google likes this too.
  • The CSS Link(s): The gate to your CSS. This is the thing that makes your webpage pop and, you know, have more design. We’ll cover this more on some other time.
  • Body: Here’s where our webpage’s visual stuff goes. It sometimes has weird margins and padding for highly incomprehensible reasons.
  • The JS Script(s): A powerful tool that can transform your webpage into the highly advanced interface that it really shouldn’t be. But we’re making a regular website, so this is basically fairy dust right now.
    • We put it at the end because it is usually far too large and ugly for people to wait for. And we’re kind of ashamed of that.

The HTML Tags you’ll be (ab)using.

The HTML standard may have a few tags that you can make use of. But every seasoned professional will tell you that you’re only ever gonna need two:

  • The Div Tag.
  • And the Span Tag.

Let’s first get started on the div tag.

This beautiful modern invention of man comes with no browser-specific CSS, which makes it, quite literally, your jack of all trades. It’s versatility in soaking CSS with literally no repercussions is the reason that some professionals have even gotten away with making webpages consisting entirely of it.

Let me explain:

  • Paragraphs? Who even uses the <p> tag anymore when you can just have <div class="paragraph"></div>.
  • Why use a button? When you can instead make <div class="button"></div> and work out the rest with JavaScript.
  • Lists? What even is a list? Oh you must mean <div class="list"><div class="list-item></div><div class="list-item></div></div>. My mistake.

Block Quotes? Div. Tables? Many divs inside divs. Anchor tags? Div with JavaScript. Images? Div with the background set to an image. H1 to H6? You guessed it, div.

Are you following me yet reader? The div is the gift that gives you everything and even thanks you for it.

But I hear you, you’re saying div is a block level element and wouldn’t properly make sense when working alongside inline text. And to that I say… You really know your HTML and CSS, what are you doing here? And also, the display property wants a word with you.

But okay, I’ll comply, let’s talk about span.

Everything I’ve said so far about the div applies also to the span, but in an inline way. bi , strong and mark? They are all child’s play, span is where it’s really at.

Who cares if it takes longer to style the divs and spans to do things that native elements already do? So what if screen readers can’t understand your webpage? And what even is SEO? You have your div, and you have your span. Experienced developers do it all the time, so why wouldn’t you?

How to HTML

So now you’re armed with your copy pasta and your tags and you’re thinking “What’s next?”. Well if I didn’t know better I’d suggest learning:

But that would be boring and result in things like making you “Actually employable” and other boring stuff. You’re not into boring stuff are you? And besides, you already know how to HTML thanks to this article. You are welcome.

And HTML, you’re the bread in this sandwich that is web development. And while many people may prefer the filling, you’ll always be number 1 for me.

Because you can’t have a sub without the bun. And you can’t have the web without your good old friend: HTML.


Super Smash Brothers Ultimate came out not too long ago and I’ve been watching way more meme videos than I’m proud to admit. This parody is the result of that. No idea why I’ve been writing these lately.

Feel free to tell me your success stories in the comments.

Author

My name’s Orlando Paredes Hamsho. I’m a 25-year-old Web Developer living (mostly) in Guadalajara, Mexico; albeit I intend to move pretty soon. Apparently, I also run a blog now, and have been doing so for a while.

Write A Comment