HTML, part 1. Basics
What is HTML?
HTML stands for “HyperText Markup Language.” It’s used to structure a webpage and its content — all webpages are made up of HTML.
The "HT" in HTML stands for HyperText, or links. Links are the oxygen of the web. By default rendered blue and underlined, links connect to you to other webpages, within the same site or elsewhere.
The hyperlink that exists above will send you to the world's first website!
(Btw, in this class we'll also be learning CSS and some JS. Learn more about them in this overview.)
Materials
To write HTML, I'd equip yourself with a 1) text editor and 2) modern web browser.
-
For text editors, I recommend Atom, VS Code, Sublime Text, or Brackets. They're all free and good.
-
For modern web browsers, Firefox or Chrome are good.
Introduction
To start, read through this web zine by Zach Mandeville.
After you do that, watch this video I made about HTML for a more general overview.
Below are some key parts of the video in text, just for reference...
Elements
You know you’re looking at HTML when you see elements, such as <head>, <body>, <h1>, <h2>, <h3>, <p>, <a>, <div>, <span>, and so on.
You can identify elements usually because they are enclosed in angle brackets, like < this >.
But note you can't make up your own HTML elements!
Here is MDN's list of every HTML element that exists. You might also like to explore htmlreference.io that clearly lists all 113 elements out.
You use elements to enclose, or wrap, different parts of the content to assign it meaning, making it act a certain way.
For example, you can create a paragraph by wrapping some text in the <p> (or “paragraph”) element:
Most elements are made up of two parts:
- Opening tag — This begins the HTML element. It’s composed of the element in angle brackets.
- Closing tag — This closes the HTML element. It’s exactly like the opening tag but it has a slash before the element.
However, not all elements have both an opening and a closing tag. These are called “empty” or “void” elements. Some examples include: <img>, <br>, <hr>, <meta>, <input>. Here is a list of all the empty element edge cases.
Attributes
Elements can also have attributes. Attributes contain extra information about the element which don’t appear in the actual content.
In the below case, the class attribute allows you to give the element an identifying name that can be later used to target the element with style information and other things…
Attributes can appear on other elements, too. Here is an <a> element (a link, or hypertext) that almost always comes with the attribute of href. The URL inside the attribute (http://literature.works) is where the link will go when clicked.
Nesting
It’s super natural to nest elements, or put them inside of each other. For example, here we’re bolding the word very:
<p>My pebble is <strong>very</strong> smooth.</p>
It’s important to properly nest elements. The elements have to open and close correctly so that they are clearly inside or outside one another.
Therefore, this below is incorrect:
<p>My pebble is <strong>very smooth.</p></strong>
In HTML, everything is a box. And things can easily nest. It's common for things to be inside other things.
HTML Skeleton
The "HTML skeleton" (the standard structure of most HTML pages) is an example of nesting.
Here's an HTML skeleton at its most essential:
<html>
<head>
<title>My wonderful website</title>
</head>
<body>
Hello worlds
</body>
</html>
This code creates something that looks like this...
You can see that the <head> and <body> are inside of the <html>. Like so:
head
All of the “invisible” or metadata stuff goes in the <head>.
Inside the <head> is the <title>, which is what shows up at the top of your browser tab, when you bookmark the site, or when the site appears in Google search results.
body
All of the visible stuff, or anything that actually appears on your page, goes in the <body>. For instance, visible elements like <h1> and <p> can go inside the body (although they are not in this example).
html
Both the <head> and <body> are inside the <html>. Here, the <head> generally comes before the <body> section.
Some extra lines that are nice to put inside your HTML skeleton
Typically, I actually start with an HTML skeleton that looks more like this:
<!DOCTYPE html>
<html>
<head>
<title>My wonderful website</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
Hello worlds
</body>
</html>
There are three extra lines you're probably noticing.
( 1 )
<!DOCTYPE html>
This line goes before <html> and essentially means, “Hey, this is an HTML5 document!” It's good to put this line at the very beginning. If you don't put it there, HTML elements that are newer (from version HTML5) won't show up. You can read about these HTML5 "semantic" elements here.
( 2 )
<meta name="viewport" content="width=device-width,initial-scale=1.0">
This line goes inside the <head> section and makes your page generally good for mobile devices. Specifically ... whenever a mobile device views the page, this line of code inside the makes sure the device doesn’t automatically resize the page but lets it appear the size it automatically is. (If you don't have this line, you might notice that your website is automatically scaling down when you view it on a mobile device.)
( 3 )
<meta charset="utf-8">
This line also goes inside the <head> section and specifies the document’s character encoding, or the character set the document can use. Having it ensures that you can use almost any character from any human language. (If you don't have this line, sometimes you might notice a weird series of characters appearing on your screen where you meant an emoji or a special diacritical mark.)
Links in HTML
As mentioned previously, the link, or the <a> element in HTML is the oxygen of the web. It’s what makes writing in hypertext special or unique from other text or writing tools, since hyperlinks connect pages together.
A few things to know about links...
Relative versus global links
You can link to something global (like a webpage) or something relative (a folder or file on your own site)…
<a href="https://wikipedia.org">global link</a>
<a href="images/seed.jpg">relative link</a>
<a href="../../">another relative link, going back by two folders</a>
Attributes on links
You’ll always need an href attribute on a link, as that tells the computer what URL or URL fragment to go once it’s pressed. The text inside the link — after the <a href="..."> and before the </a> — is what becomes blue and underlined.
<a href="http://newyork.craigslist.org">Craigslist 1</a>
<!-- The below link will open in a new window -->
<a href="http://newyork.craigslist.org" target="_blank">Craigslist 2</a>
<!-- When you hover on the link below, the title will appear -->
<a href="http://newyork.craigslist.org" title="New York's Craigslist">Craigslist 3</a>
<!-- You can combine both attributes if you want -->
<a href="http://newyork.craigslist.org" target="_blank" title="New York's Craigslist">Craigslist 4</a>
Linking to a different part of the same page
You can use the # hash symbol to jump to a specific part of the same page that has the same-named id attribute.
<h1 id="top">HTML Basics</h1>
<a href="#top">
Back to top
</a>
This is how individual articles on Wikipedia allow you to jump to specific sections from its "Contents" box. Notice how the URL changes to include the # hash permalink. Next time you type in this URL, it will automatically jump you to this part of the page.
https://en.wikipedia.org/wiki/Melon
https://en.wikipedia.org/wiki/Melon#History
https://en.wikipedia.org/wiki/Melon#Production
You can learn more about links on MDN's page on links
Comments
You may have noticed some "comments" in the above examples. HTML comments are not displayed in the browser, but they can help document your HTML source code. Sometimes it's nice to leave notes for future self this way, or another person you're coding with.
<!-- Hi, I'm an HTML comment -->
<!---
I'm a comment
that spans
multiple lines...
--->
Semantics
On many HTML reference page, you might see the word "semantics" mentioned often. What does it mean?
Quoting from the semantics page on Zach Mandeville's web zine...
Not everyone experiences the web in the same way. Some people may have low or no sight, for example, and will use a screen reader to help navigate the web. (Maybe that’s you, right now!) In this case, the visuals of a page are meaningless, the structure is what’s important. A confusingly structured webpage may look good in the browser, but will be a mess when read by a screen reader. This could make the site annoying to navigate, and make some people unable, or unwilling, to visit it and losing that possible friendship.
Semantics essentially means "meaning". With HTML, we are only assigning meaning of each piece of content. Such as, "hey, this is the page's title" when we use <title> and "hey, this is a paragraph" when we use <p>.
We'll cover CSS next, which applies visual style (for sighted people) of our HTML. But it's important to remember that HTML is just the structure... the wooden beams of our house. Try to be ok with your sites being raw and maybe even a little ugly looking for now.
View Source
The ability to "view source" and inspect the code of any website is extremely useful, and ideally it will be empowering to you. If you don't already know how, teach yourself how to 1) view the source code and 2) inspect elements using your chosen web browser.
Example
In case it's useful, in the HTML video, I show an example site I created. You can view it here:
https://laurel.world/pages/literature.works
It should look like this:
Next...
Now onto the "Exercise" which is part 2 of this HTML tutorial...