WebDev Basics: Chapter 2, HTML basics.

Back to Series Navigation

Formalities.

Welcome back! Last post, we talked about the different parts of a website. Today, we’re not talking about (much) theory, we’re going to get our hands dirty and deep in the code. Open up your editor of choice and get ready to write some copied code.

And yes, you should always write the code yourself, not copy paste!

This is the main advice I can give to new programmers. Write it yourself! It will get you used to the subtleties of writing code. Humans learn by writing, that’s a fact, and as far as I’m concerned, you’re a human. So, when I give you code snippets, re-write them manually. If there’s errors, try to find them yourself. This will make you learn far, far faster.
… And if you’re not a human, hello, welcome to my blog!”); DROP TABLE USERS; SELECT * FROM “

How to HTML 101.

Let’s discuss how HTML works. I’ve shown you some code before, let’s write some more.

<html>
    <head>
        <title>My first web page!</title>
    </head>
    <body>
        <h1>Hello, welcome to my site!</h1>
        <p>This is a cool little site that I'll trow away in a few seconds!</p>
    </body>
</html>
Code language: HTML, XML (xml)

Come on, rewrite it yourself and open it on your own! You should notice that your browser tab title for this code is different now.

HTML works with what we call tags. Tags are of the form <tagname>. Specifically, this is an opening tag. A tag represents the start of an element, anything inside of this tag is a child of the element. Each tag also needs a corresponding end/closing, which is written as </tagname>. Some tags do not need a closing tag. While you could just write them as <tagname>, it’s good practice to make it explicit, by writing it as <tagname/>, putting the slash at the end. The newline tag that you’ll see later is a good example, written as <br/>.

For example, look in the code above. There is a <body> tag that contains two other elements, an <h1> and a <p>. You don’t have to know what those are yet, though they’re a title and a paragraph respectively. Focus on the structure that we’re encoding here.

Note that I’ve used indentation and formatted my code in order for the structure to be more obvious. I strongly suggest that you do the same, but HTML itself doesn’t care. The entire code could be on a single line and it would be just the same. Don’t believe me? Do it yourself, write the entire thing without spaces or new line returns, and open it again! In general, try to do one new line per element, and another indent block (whether it’s a tab or spaces) for the children. Basically, if that’s word soup to you, replicate the style I’ve used in the snippet.

This code could be seen as the following structured list:

HTML
- Head
  - Title
    - “My First Web Page!”
- Body
  - H1
    - “Hello, welcome to my site!”
  - P
    - “This is a cool little site that I’ll trow away in a few seconds!”

Or, in other words, there’s one big box called “HTML” that contains everything. It has two children, “Head” and “Body”. Head contains a Title that itself contains some text. Body contains “H1” and “P”. H1 contains some title text, and P contains some paragraph text. Hopefully that made the way that HTML structures elements clear.

The Conventional HTML Structure.

HTML can be anything you want (it is an extension of XML, which has the same tag system and is used for much more than web pages!), but web pages follow a specific structure. Let me explain.

Also, get comfortable with me using “tag” and “element” interchangeably…

They’re not the same, even though I might make it sound that way. The tag is the actual bit of code representing the element, while the element is the thing represented and encoded by the tag. Hopefully that makes sense to you…

First, the entire page must be within an <html> tag. This is also commonly called the “root” element. You might also want to have a <!DOCTYPE HTML> tag at the very start of your page, before the first <html> tag. Tags that start with an exclamation mark are special tags and don’t need a matching closing one. This tag is special, and tells whatever you’re using to open your code file that it is indeed HTML code.

The <html> element contains everything, of course, but it should ideally have two children, and two children only. Those are called <head> and <body>. The body is the simplest to understand, it contains the actual page contents. Whatever you want to display in your page should be a part of the body element. The body itself can contain whatever you want, anything inside of the body is yours to structure, go nuts.

The head is a bit more complex. It should contain metadata about the page. “Metadata” is a bit hard to explain. Literally, it’s any data that defines the data itself. In more human terms, for a web page, metadata is data about the page itself, not it’s contents. Confused? Let me elaborate with a table:

An image	Data, it’s part of your content
A paragraph	Data, it’s something that you want people to read, it’s content
The page’s browser tab title	Metadata, it isn’t on the page itself, it just tells your browser how to name the page.
Some CSS display rules	Metadata, it isn’t content, it’s just how to display the content
This very table	Data, it’s a part of the page in itself
JavaScript code	Metadata, it encodes how the page should behave, not what it contains

Hopefully that made it all clearer…

And that’s it, that’s all the structure that your HTML absolutely needs to have. The rest is very malleable and is mostly up to you. Though, your tags can’t just be anything. There are a set of elements that your browser will “know about”, and those are the only elements that you can use in your HTML code. Any unknown tags will at best be ignored, at worst make the page not work at all.

Weeeeeell…

You CAN create custom HTML elements and give them a matching tag. But that’s very advanced and requires a lot of JavaScript knowledge. You should assume that you can’t for now. Though, if your curiosity is what guides you, know that it’s possible. In fact, the common web framework React is nearly completely based around the idea of creating custom elements.

Your First Few Elements.

Let’s learn about some HTML elements that are fairly straight forward. Those are easy to just plop into your page and should be fairly self-explanatory. In a later chapter, I’ll tell you all about more advanced elements. I’ll also have a chapter dedicated to documenting most of the common element out there. And if you’re hungry for more, there’s always the wonderful W3Schools documentation. For now though, let’s start with the basics.

Also, I’ll be omitting the boilerplate structure and just show you the element itself. Put it wherever you want in a <body> or <head> tag!

First, the content (`<body>`) elements.

The paragraph `<p>`

The first element you should know about is the simplest of them all, the paragraph. It’s tag is <p>. Paragraphs are sections of text, that’s about it. They should be used when you want your text to be in its own section, or, well, paragraph! Paragraphs are considered one big block in our HTML structure. Later we’ll look at how they interact with CSS, but an entire paragraph element will be styled together and stay together as one cohesive block. I suggest indenting your paragraph to make your code more readable if it’s long enough to help:

<p>
    This is a very long paragraph!
    It might be better to indent it and to put the tags
    on the outside. Also, notice
    how
    white space doesn't matter?
</p>
Code language: HTML, XML (xml)

The header `<hX>`

Headers are used for titles, and in general, larger text. You should use headers as titles and subtitles. There’s multiple types, denoted by a number. HTML standards define headers 1 through 6. The lower the number, the larger. This might seem confusing at first, but consider it not as a number for size, but for layer. A layer 1 title is the largest, a layer 2 title is a subtitle, etc.

<h1>H1 Header!</h1>
<h2>H2 Header!</h2>
<h3>H3 Header!</h3>
<h4>H4 Header!</h4>
<h5>H5 Header!</h5>
<h6>H6 Header!</h6>
<p>And a paragraph for size comparaison!</p>

Code language: HTML, XML (xml)

Note: scroll me!

The division `<div>`

Now, this one is a bit more advanced, but I’d like to talk about it now. It’s good practice to put things that belong in a single group in divs. You’ll understand why it’s so useful later, especially once we get into CSS and JavaScript. But get used to doing this now. Divs are, by themselves, invisible. That is to say, they are purely structural. Another box in your hierarchy of boxes.

<div>
    <p>I love chocolate</p>
</div>

<div>
    <p>
        My thoughts on the current state of geopolitics
        and an analysis of the global market
    </p>
</div>
Code language: HTML, XML (xml)

Notice how you can’t notice the <div>s!

The lists `<ul>` and `<ol>`, and the list element `<li>`

This one is a bit tricky because it’s multiple elements working together as one cohesive group. To create a list, you use either <ul>, the unordered list, or <ol>, the ordered list. Then, you put several <li> list elements as children of the list. Those list elements themselves may contain anything that you want, of course, not just text! I tend to prefer theory over practice, but I feel like lists are a thing done better through practice, so here’s a hefty example.

<h1>Lists!</h1>
<ul>
    <li>
        <h2>This is an unordered list</h2>
    </li>

    <li>
        <p>It contains no added ordering.<p>
    </li>

    <li>
        <h4>It just contains the elements one after the other</h4>
    </li>
</ul>

<ol>
    <li>
        <h1>Now this one has ordering to it!</h1>
    </li>

    <li>
        <p>Lists can even contain other lists, look:</p>
    </li>

    <li>
        <ul>
            <li><p>Sub-element 1</p></li>
            <li><p>Sub-element 2</p></li>
            <li><p>...</p></li>
        </ul>
    </li>
</ol>
Code language: HTML, XML (xml)

Again, remember to scroll!

The thematic break / separator / Horizontal Rule <hr/>

This one is fairly straight forward. It just adds a separator. By default, that separator is a large line covering the entire page. Use it to separate themes, or just to add a large visual separator.

<h1>A well-formatted post.</h1>
<hr/>
<p>My post's contents...</p>Code language: HTML, XML (xml)

Second, the in-text (`<hX>`, `<p>`) elements.

Those elements are meant to be used inside of a text element. Think about them as a way to format text. It’s hard to explain, so let’s just get into examples.

The font formatting elements <b> <u> <s> <i>

These tags add special text decorations, I’ll let you look at the example, it’s easier than listing them.

<p>
    This paragraph has multiple formatting tags.
    <b>Bold!</b>
    <u>Underlined !</u>
    <s>Striked through!</s>
    <i>Italicized!</i>
    <b><u><s><i>ALL OF THE ABOVE!!!</i></s></u></b>
</p>

<p>
    Note that you may <b>Start at any point,
    <u>Add another right after,</b> and continue
    the other,</u> only ending it later. Neat!
</p>
Code language: HTML, XML (xml)

The new line / break `<br/>`

This one is very straight forward. It just adds a new line to your paragraph.

<p>
    bruh
    <br/>
    Come on you know what a new line is.
    <br>
    The above is valid too, but avoid it, okay?
</p>Code language: HTML, XML (xml)

One-and-done tags should be written as <tagname/>, remember?

The text division/span `<span>`

A span is exactly like a <div>, except it should be used inside of text. Divisions, semantically, create a new block of content. Spans are used to represent parts of an existing block.

<div>
    <p>
        Divs represent blocks, while
        using <span> spans should be reserved for text.</span>
        They're both just as invisible without CSS or JavaScript though.
    </p>
</div>
Code language: HTML, XML (xml)

Some (a) Metadata Elements (`<head>`)

Metadata go in the head of the page, remember? They’re fairly advanced, so I’ll cover them briefly.

The tab title `<title>`

You’ve seen this one before. I can’t render it as you need to open it in your own tab to see it. This is your reminder to re-type all of the examples to help you learn!

<html>
    <head>
        <title>My first web page!</title>
    </head>
    <body>
        <h1>Hello, welcome to my site!</h1>
        <p>This is a cool little site that I'll trow away in a few seconds!</p>
    </body>
</html>
Code language: HTML, XML (xml)

The “inline” CSS <style> and “inline” JavaScript `<script>`

We’ll study CSS and JS at a later point. For now, know that CSS is sometimes written in the head as a part of the <style> element. Same with JavaScript inside of <script>.

That’s it for now!

Look, it was a lot to take in, I know. You should take a small break after this lesson I think. Even better, before you do, keep it open and go write your own basic web page using all of the elements we’ve talked about. Trust me, this is the best way to learn. And that’s why I’m not giving you a large, all-encompassing example! It’s to encourage you to make your own big example. So mess around for a bit with what you’ve seen.

Just in case, here’s a summary of all of the elements we’ve seen:

Head Elements

`<title>`	The page’s title in your browser tabs
`<script>`	JavaScript code (try pasting in the JS snippet from last post!)
`<style>`	CSS rules

Body Elements

`<p>`	A paragraph
`<h1>, <h2>... <h6>`	Headers and titles
`<div>`	A group of elements
`<ul>`	An unordered list
`<ol>`	An ordered list
`<li>`	An element of a list
`<hr>`	A horizontal line
`<b>`	Bold text
`<u>`	Underlined text
`<i>`	Italicized text
`<s>`	Stroke-through text
`<br>`	Line break / New line
`<span>`	A group of text

Next time, we’ll look at more advanced elements. We’ll go over how to make tables, links, add images and audio and other useful stuff!

Back to Series Navigation

Formalities.

How to HTML 101.

The Conventional HTML Structure.

Your First Few Elements.

First, the content (<body>) elements.

The paragraph <p>

The header <hX>

The division <div>

The lists <ul> and <ol>, and the list element <li>