Tag: tutorial

An HTML Primer for 2024

HTML is a markup language that defines the structure of every webpage you’ve been to. It is a markup language where tags are used to designate the type of content they contain, thus telling your browser how to display it.

And it is not just the web, but our ebooks as well are formatted using HTML.

This is to be a quick tutorial on the basics of HTML. After this, you’ll have the tools you need to make very, very basic sites, but that is the first step into making some not so basic sites later. 

So to start, this is just HTML, no CSS (Cascading Style Sheets) or JavaScript. 

Think of the three, generally as this: 

  • HTML is how the page is structured
  • CSS is how the page is formatted
  • Javascript is how the page functions

To Start

To start, think of HTML tags as labeled parentheses. You put them around text to tell the browser what that text is. So for example, the p tag means “paragraph”, so to show that a bunch of text is a paragraph, you wrap them in p tags, like this:

<p>This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.</p>

Notice how the end, or closing, tag contains a / (backslash). 

Those p tags tell the browser that the text inside is a paragraph and it should render it (display it to the viewer) that way. 

This differentiates the text from headers, or links, or even things that aren’t meant to be shown to the viewer, like metadata or JavaScript. 

White Space and HTML

Something to note here is that HTML ignores white space. What does that mean? It means if you push the space bar three or fifty times between words, HTML will ignore it, and render it with a single space. 

<p>Here is a new paragraph. Here       Are some     Words
Even a few line breaks. Some.          Space
Here.</p>

which renders like this:

Here is a new paragraph. Here Are some Words Even a few line breaks. Some. Space Here.

Let’s make a page!

Ok, so rather than talk generalities, let’s start by making a page. Open up a text editor, like Notepad.exe, and let’s start. If you don’t already have a favorite text editor, your operating system should come with one already:

  • Windows, notepad.exe
  • MacOS, TextEdit
  • Linux, too many options, look for Kate or GEdit to start.

macOS and TextEdit

TextEdit really wants to save things as formatted files, like MS Word, so you have to tell it what you want to do. 

  • Open up TextEdit, make a new document.
  • Go to FORMAT -> Make Plain Text

Now, when you save your file the first time it will pop up a message about your file extension, saying:

You have used the extension “.html” at the end of the name. The standard extension is “.txt”. 

Click “Use .html”

From here it should work just fine.

From the Top!

First let’s add the doctype at the top, just like this:

<!DOCTYPE html>

This tells the browser what kind of file this is. This specifically tells your browser that it is an HTML document and it should treat everything in the file as HTML stuff.

Now let’s add in our first tags, the HTML tag

<!DOCTYPE html>
<html>

</html>

This encompasses everything else we are going to write. It is the root tag, and everything on the page needs to be between those two HTML tags to get rendered to your browser. 

Now we have two major sections to our HTML document, the HEAD and the BODY. 

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

The HEAD is the meta data for the document. Most of the things you would add to the HEAD are more advanced than this tutorial, as this is the place you would add your CSS or JavaScript. 

But there is something we are going to add—the TITLE

<!DOCTYPE html>
<html>

<head>
    <title>My Webpage</title>
</head>

<body>
</body>

</html>

If you save this as mypage.html and open that in your browser, you’ll see a blank page… BUT at the top, it will say “My Webpage.”

The easiest way to open in the browser for most will be to simply double click the file and it will open up in your default browser. 

You can also go to FILE and OPEN in most browsers and open just like you would a file in Word. 

So, let’s add something to the body!

<!DOCTYPE html>
<html>

<head>
    <title>My Webpage</title>
</head>

<body>
    <p>Hello World</p>
</body>

</html>

Now if you refresh your browser, it will proudly display “Hello World!”

Now, remember what I said about whitespace? one thing we do when when write HTML is indent nested tags to make it easier to read—not for the computer, but for the person. You don’t have to indent, but it helps find things as the page gets longer. 

Congrats on your first web page! 

Adding More

Let’s add some more paragraphs to our site, including the one with all that whitespace from above so you can see what we meant by that:

<p>Hello World!</p>

<p>This is my first webpage, there are many like it but this one is mine.</p>

<p>This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.</p>

<p>Here is a new paragraph. Here       Are some     Words
Even a few line breaks. Some.          Space
Here.</p>

Which should render as such:

Hello World!

This is my first webpage, there are many like it but this one is mine.

This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.

Here is a new paragraph. Here Are some Words Even a few line breaks. Some. Space Here.

MOAR

The purpose of HTML is to add context to the content you are writing up so that it can be displayed and read. 

We’ve seen paragraph (p tags), so let’s now add headers. Headers have levels, 1 – 6, and should be used as hierarchy—that is you should only use level 2 under a level 1, etc., like an outline would require. 

This keeps things organized, and makes it easier for software such as screen readers to parse. 

The levels are just numbers on the h tag, so h1 is header level 1, h2, header level 2, etc etc. 

Let’s add some now. 

<h1>Hello World!</h1>

<p>This is my first webpage, there are many like it but this one is mine.</p>

<p>This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.</p>

<p>Here is a new paragraph. Here       Are some     Words
Even a few line breaks. Some.          Space
Here.</p>

<h2>Furthermore</h2>

<p>Some pages have many headings</p>
<p>Some headings have many subheadings</p>

<h2>However</h2>

<p>Not all do.</p>

Now refresh your page and you should see something like this: 

Hello World!

This is my first webpage, there are many like it but this one is mine.

This is a paragraph, full of words. The paragraph will continue until the p tag closes it, like this.

Here is a new paragraph. Here Are some Words Even a few line breaks. Some. Space Here.

Furthermore

Some pages have many headings

Some headings have many subheadings

However

Not all do.

Your page now has structure. The words aren’t just words, but titles, headers and paragraphs. 

You’ll notice that the H1 and H2 tags render differently. The H2 tags are smaller, though still bigger than the p tag. It may be tempting to pick which level you want based on its presentation, but do not do this. HTML should be used for organization not for presentation. The presentation of these will be covered by CSS. 

So for now, even if you wish H1 was smaller, or H4 was larger, keep with the tag that fits the structure of your document. 

Lists!

Sometimes you have to just list things. A list is two elements. First you have to say what kind of list it is. There are two:

  • Ordered list, marked with an OL tag, these are numbered in order they are listed
  • Unordered list, like this one, marked with an UL tag

Then the elements of the list are marked with a LI, list item, tag. Let’s see how that works: 

<h1>The Plan</h1>

<ol>
    <li>Learn how to make HTML lists
    <li>Make a list of my favorite animals
    <li>Save my webpage and show it to everyone
</ol>

<h1>My Favorite Animals</h1>

<ul>
    <li>Elephants
    <li>Corgis
    <li>Alpaca
</ul>

But don’t use my list of animals make sure you put down yours! And if you need more, just start a new like with an LI tag. 

When you save and refresh your document, boom! You have LISTS, take a look: 

The Plan

  1. Learn how to make HTML lists
  2. Make a list of my favorite animals
  3. Save my webpage and show it to everyone

My Favorite Animals

  • Elephants
  • Corgis
  • Alpaca

Now, you may have noticed something about the LI tags—I didn’t close them. You can. That is

<li>list thing!</li>

Is perfectly acceptable HTML. it is just for this tag, the LI, a closing tag is not required. 

Link me!

What would a webpage be without a link? The idea of a link is at the very heart of the web itself, not just HTML. This small part of HTML is a powerful, important tool to how the whole web works. 

Links are an anchor tag, A, and are slightly more complicated than anything we’ve done before. Here’s why. For a link I need to have two bits of information: 

  1. Where is the link going?
  2. What words are in the link?

So if I wanted to have the words “Click Here!” Link to Wikipedia, it will get set up like this:

<a href=“https://wikipedia.org”>Click Here!</a>

The link still has a closing tag, </a>, but we have added additional information into the opening a tag. 

The HREF=“” (the quotes are important!) tells the browser where to redirect someone if they click on the words found in the A tag, which are “Click Here!” in this case. 

So, let’s get to linking! 

Let’s add a link at the end of our list to the Wikipedia page for our favorite. Don’t forget the P tags around your new link! 

<h1>My Favorite Animals</h1>

<ul>
    <li>Elephants
    <li>Corgis
    <li>Alpaca
</ul>

<p>Learn more about <a href="https://en.wikipedia.org/wiki/Elephant">Elephants on Wikipedia!</a></p>

Which results in this: 

My Favorite Animals

  • Elephants
  • Corgis
  • Alpaca

Learn more about Elephants on Wikipedia!

If you click that link, you’ll be learning about how awesome your favorite animal is. 

Link Types

There are two kinds of links. 

  • Absolute
  • Relative

Absolute links are links that start with an HTTP and give the full web address of your link, like the one we just did. 

Relative links are links that just contain the address of the file relative to the file that the link is on. So, if made a link to just href="about.html", then your browser would expect that in the same folder as mypage.html there is another file named about.html

So, let’s do that! At the bottom of our page before the body tag, let’s add a link:

<p><a href="about.html">About My Webpage</a></p>

If you refresh your mypage.html, you’ll now see the link to About My Webpage, but it doesn’t go anywhere yet, so let’s fix that! Open up a new blank file, and add this:

(macOS folks using TextEdit, don’t forget to do the steps above again for the new file)

<!DOCTYPE html>
<html>

<head>
    <title>About My Webpage</title>
</head>

<body>

    <h1>About My Webpage</h1>
    <p>This is my first weppage!</p>
    <p>see it <a href="mypage.html">here!</a><p>

</body>

</html>

Save it as about.html in the same folder as your mypage.html. Now the links will work back and forth between the files, so long as they live in the same folder together. 

Relative links are for linking pages on the same website together. 

Absolute links can be used for pages on the same website, AND are also used for external links (to other websites all together)

DIV me up!

There is another tag that becomes more useful later that we should talk about, the DIV tag. 

The DIV, for division, is something you use to group things together for organization. Something that with pure HTML may or may not be helpful, but when you start adding in CSS or JavaScript becomes VERY helpful. 

So let’s add some DIV tags to your webpage. We are going to group the top part together and add a bottom part that will be a footer. 

<!DOCTYPE html>
<html>

<head>
    <title>My Webpage</title>
</head>

<body>
<div>
    <h1>Hello World!</h1>

    <p>This is my first webpage, there are many like it but this one is mine.</p>

    <h2>Furthermore</h2>

    <p>Some pages have many headings.</p>
    <p>Some headings have many subheadings.</p>

    <h2>However</h2>

    <p>Not all do.</p>
</div>

<div>
    <h1>The Plan</h1>

    <ol>
        <li>Learn how to make HTML lists
        <li>Make a list of my favorite animals
        <li>Save my webpage and show it to everyone
    </ol>

    <h1>My Favorite Animals</h1>

    <ul>
        <li>Elephants
        <li>Corgis
        <li>Alpaca
    </ul>
    <p>Learn more about <a href="https://en.wikipedia.org/wiki/Elephant">Elephants on Wikipedia!</a></p>
</div>

<div>
    <p><a href="about.html">About My Webpage</a></p>
</div>

</body>
</html>

When you save and hit refresh, nothing will change. So you may think “why did I do that?” And that will be more apparent when we get to CSS. But, anytime you are on a webpage and you see parts that are separated from each other, that was accomplished via DIV tags. 

That’s it?

No!

There are a lot more tags in HTML, especially if you want to make a form or any kind of user input. This is just a primer. 

A lot of the tags are functionally similar to the DIV tag, but semantic, meaning they have a specific role. This, again, is to help organization. 

So you can use a FOOTER tag to put some info at the bottom of your page. It will, however, work no different than the DIV tags that is already there. 

Let’s change the DIV tag we put around our about link to a FOOTER tag. 

<footer>
    <p><a href="about.html">About My Webpage</a></p>
</footer>

There are many of these tags you can use as you get into making your site like this. Tags like the MENU, HEADER (different from HEAD), SECTION, ARTICLE, are all available so you can organize your page by its content, as well as its function. 

But those are not things to worry about yet. Start with your basic tools for now.

A Good Start

These tags are a good start to your website making skills. They may feel basic—maybe because they are—but don’t mistake ‘basic’ for ‘useless.’ These are the very building blocks every site you’ve ever been to are built on. And even though there are other layers of complication between that site and your first html page, in the end, it is these simple tags that will define the pages you make.

And as you learn, you’ll start to use more complicated tools, you’ll learn new features and programs. You’ll probably not be spending your time in notepad.exe writing your website. 

But. Never forget. You can always open HTML in notepad.exe. That is its superpower, and what makes it so accessible as a file format. 

The MDN, a site for web developers maintained by Mozilla, is your reference book. It has all the info you could want on each of these tags, and more. If you want to start a deep dive, take a look at the links we just learned, or jump into the who thing:

The MDN https://developer.mozilla.org/en-US/docs/Web/HTML

I hope this helps get a few people started. Next time on the agenda will be some CSS! 

Bonus

While I was writing this, a fantastic tutorial called HTML for People came out, which gives a much more in-depth look at HTML for people who do not have experience with it. 

Check it out as a great next step from here!