Hi, welcome to our HTML guide. This is the first of a handful of guides we will link you to throughout the class.
Note that our weekly guides aim to provide a general landscape ... an overall survey of what’s most essential about the technology at hand and the basics of how to use it. From a technical or skill perspective, our guides are not exhaustive or thorough because there are already many other resources on the internet that are just that. We encourage you to check them out -- we’ve linked some in the "Further Resources" section.
In this class, there are many different skill levels, so we recognize some of this may be review. However, we believe there is always something to be learned from revisiting the fundamentals (which is one reason we like teaching!). And for those of you who have more skills, feel free to dive into an area of HTML you don’t know that much about. Have fun with HTML :)
Part 0.
What is a website?
With all the available options today, it's easy to forget that a website can actually be very simple.
A website is ... a file or bundle of files, one of which contains HTML or is a of the filetype .html. Sometimes this website is uploaded to the internet so others can experience it!
Minimum viable website
To make the most simple version of a website, you could type the below text into your text editor (such as VS Code, Atom, Sublime Text) and save it with the file extension .html.
hello worlds. my favorite fruit is mango!
I'll call this file worlds.html.
If I drag this file into my web browser, it looks like this:
We'll notice the URL bar shows something that starts with file:///. This means this website is a "local" file on our computer. It's not on the internet. In other words, this website (with the extension .html) is just another file on your computer... similar to other files (images, videos, writing, etc.) on your computer. And like other files on your computer, only you can see it.
Even though this website is very simple and not uploaded to the internet, it's still a website. There is something very exciting about that! You could make a whole website just on your computer.
I got into coding websites because I wanted to make a fan site for this manga series I was really into. None of it ever went live, but I learned how to write everything in a text file and just save it with the .html extension and open it in my local browser. So I would mock up websites that way. I would read source code from other people’s sites to learn how to do things. ... For me, just building little websites in my little folders felt like the same thing as making a website online. I didn’t really care about anyone seeing it. It was all for me.
However, just for the purposes of this experiment, I uploaded our very simple, mango-loving website to the internet. Now it's here.
Of course, one might say this is a very boring website. Maybe you'd like to add some emphasis, hierarchy, images, video, or links. That's where the wide world of HTML comes in!
For example, you could edit the above like so...
hello worlds. my <em>favorite</em> fruit is <a href="https://www.mango.org">mango</a>!
For a very friendly introduction to making a simple website, check out Web Zine 01 by Zach Mandeville (coolguy).
Languages of the web: HTML, CSS, and JavaScript
The guide you're reading just focuses on HTML, which is essentially the foundational skeleton of any webpage.
In future guides, we'll talk about other foundational web languages ... CSS and JS. You might be wondering how they all work together.
Let's zoom out and apply a metaphor...
HTML — HyperText Markup Language
CSS — Cascading Style Sheets
JS — JavaScript
If we think about a metaphor of building, decorating, and living in a house...
HTML is like the house skeleton. It asks, "What are the things? What is their structure?" HTML gives semantic meaning and order to things.
CSS is like the interior design of the house... applying colors, textiles, and other stylistic choices to the default skeleton. It asks, "How do the things look?"
Finally, JS (JavaScript) gives life to the house... maybe it's like the home's devices like lamps, thermostats, and other smart devices. These devices have internal instructions, operating according to changing conditions. JS asks, "How do the things behave?"
But in this guide, we're just focusing on HTML. That said, the websites you make this week might look raw ... like houses that don't have colors on their walls, or maybe there aren't even walls yet but simply beams. And that's okay — let's let our pages be raw as we first understand and appreciate this foundational structural layer, HTML.
Part 1.
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.
A very brief history of HTML
HTML is the foundational technology of the world wide web.
If you click on the blue underlined "HyperText" word above, you'll go to the world's first website, which went live in 1991. It was made by Tim Berners-Lee at CERN. You can learn more about it here.
For what it's worth, HTML is considered a markup language, not a programming language. (Since programming is about giving a computer instructions while HTML is about annotating or formatting a document.) This is important, because it clues us into the fact that the world wide web was originally made to share linked documents.
Some of the first users of the web were academics. They used the web to share their research and connect with other academics. The net artist Olia Lialina has studied professors' websites from the early web days.
There have been different versions of HTML. The most recent, HTML5, encourages semantic markup. (Semantic markup means markup which has meaning, rather than markup which simply looks a certain way, so that it can be understood by many different devices, in many different contexts, and by many different types of people.) You can read more on HTML5 at W3C.
"HT" in HTML
HyperText is the foundational technology of the web. Usually you see hypertext as "links" (rendered default blue and underlined).
I would consider links the "oxygen" of the web. Before search engines, links were needed to connect individual websites to other websites, making the web a decentralized place. Today, not all websites have links. But all links connect to other webpages, within the same site or elsewhere.
Viewing Source & Inspecting Elements (Dev Tools)
Before we get into details, let's learn the most important tool: browsers' built-in "dev tools": viewing source and inspecting elements in your web browser. Learning these are absolutely essential.
Below are the ways to find these tools in Chrome (top navigation and shortcut).
⛲ View source
View / Developer / View Source
⌥ ⌘ U
When I think of HTML Energy, I think about “view source.” In the old days, and maybe even now, on your handcrafted website you can actually see the raw HTML and see that behind these web pages, or these works of design or art … there's not really any magic. It's all human readable. Everything is there for people to look at and to learn from. That’s the spirit of the early web and now the “indie web.” It’s a very open energy.
🔍 Inspect element
View / Developer / Inspect element
⌥ ⌘ I
I feel like knowing CSS, HTML, and the browser dev tools is way more useful than it should be.
Like, I use it all the time in mundane ways -- to edit personal details out of screenshots, or to restyle a blog post so I can print it nicely, or to save an embedded image, or whatever.
<!DOCTYPE html>
<html>
<head>
<title>Literature Works</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="images/pebble.png">
</head>
<body>
<img src="images/pebble.png">
<h1>The Pebble</h1>
<p>
(An excerpt)
</p>
<p>
How would I define pebble? It’s a bit tricky, but if I were to start by the way of description, I should say that pebble is something somewhere between rock and stone. The obvious defect of my definition is that I can’t stop there: I have to continue defining stones and rocks all the way back to the flood and perhaps even further than that, for all these rocks and stones come from one enormous ancestor; and of that fabulous body and its limbs only one judgement can be made that apparently they did not hold up. Analysis can only produce amorphous, viscous, interconnected agony, a terrible mess of its death bed and cannot awake a hero size of the world. Let us stop here for a moment to contemplate the scale and veracity of this observation, unobscured by funeral mood. The expulsion of life so ardent and glorious cannot happen without dramatic internal upheaval. This sacrifice is at the origin and serves as the main cause of the gray chaos of the earth. After convulsions and torsions of a sleeping body agitated under covers, our hero, tamed by his own consciousness, which subdues like a monstrous straitjacket, knew only a few minor outbreaks, more intimate eruptions that declined in frequency as the covering envelope became heavier and colder. And now his death and her chaos make one.
</p>
<p>
— Francis Ponge
<a href="https://francispongeonlineanthology.wordpress.com/2017/08/10/pebble-a-fragment-of-a-text-of-francis-ponge-translated-by-vadim-bystritski/">
(Source)
</a>
</p>
</body>
</html>
In this example, we begin to see many elements...
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 >.
Note you can't make up your own HTML elements. <pineapple>
You use elements to enclose, or wrap, different parts of the content to assign it meaning, making it act and appear 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.
Here is a video of me showing the above example site ("The Pebble") is actually a series of nested elements:
This code creates something that looks like this...
Speaking of nesting, in the above HTML skeleton, you’ll see the <head> and <body> are inside the <html>.
<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.
Above <html> is the <!DOCTYPE html>, which is a line that means, “Hey, this is an HTML5 document!” You should always put it at the very beginning. If you don't put it there, HTML elements that are newer (from version HTML5) won't show up.
Some extra lines that are nice to put inside the <head>
This line makes your page generally good for mobile devices. Specifically ... whenever a mobile device views the page, this line of code inside the <head> 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.)
<meta charset="utf-8">
This line 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.)
Boxify
You might begin to notice that HTML is essentially about putting elements inside other elements, or nesting boxes in boxes.
Here's an experimental bookmarklet for you. Drag Boxify
to your bookmarks bar and try using this bookmarklet on a few websites to see all their boxes.
Common HTML elements
Here are some common HTML elements. View the ⛲ source or 🔍 inspect element to see how it was made...
And try checking out the newer HTML5 semantic elements such as <header>, <footer>, <nav>,
<section>, and <article>. More on the HTML5 semantic elements.
Links in HTML
As mentioned previously, the link, or the <a> element in HTML. The link 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 content together.
In default HTML, a link appears as blue underlined text. You can click it to go to another webpage, within the same site or elsewhere. Many early sites on the web played with links to create maze-like structures, like in www.superbad.com.
The <a> element feels so fundamental to the way the web works. The world wide web is based off this element. When I introduce the anchor element in my classes, it helps you talk about links where the attribute is really important. A lot of elements stand alone and can be without attributes. The <a> feels really unique in that sense… to be able to understand the whole infrastructure of the web and how the parts connect with the <a> element.
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="http://fruitful.school">global link</a>
<a href="images/seed.jpg">relative link</a>
<a href="../../">another relative link, going back by two folders</a>
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>
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.
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 -->
You can also put nice hidden ASCII art in your source code if you want...
You might hear the word "semantic" used when talking about HTML. What does it mean? Why should you care?
Not everyone experiences the web in the same way. Some people are blind and use a screen reader to navigate the web, for example. That said, visuals mean nothing to them... it's the structure and meaning that counts. In other words, a website might look good in the browser to sighted people... but if it's structured confusingly in HTML, it may make little sense to someone experiencing the web with a screen reader.
"Semantic" essentially means meaning. And HTML is about ascribing meaning onto things. You'll learn that certain elements are more semantic than others, or that they communicate the meaning of their enclosed content to the web browser, whereas others do not. Here are some details of using semantic HTML. And here is a good overview of web accessibility. In other words, semantic HTML is the foundation of web accessibility.
Something small we all can do (when we make websites but also when we post images to social media) is provide alt-text or image descriptions to go along with so that blind people can read them using a screen reader. To learn more about alt-text and poetic uses of it, check out Alt-Text as Poetry. (And here is a behind-the-scenes tour of the website.) Here is how to enable image descriptions on Twitter.
<img src="images/seed.jpg" alt="A single dandelion seed miraculously sits atop another dandelion seed in an abstract, laboratory-like setting">
The world of web accessibility is vast, but a few other favorite links:
Note: Web accessibility is an ongoing and incremental commitment. That said, these guides have some image descriptions (alt-text), but not all are here yet. We hope to be incrementally improving these guides over time and writing more of them.
No Style
Some people access the web on low bandwidth connections, meaning their devices often can't load webpages that have heavy files. Sometimes CSS and JS can weigh websites down. It's often a good test to make sure your website functions fine without them and just as pure HTML.
So here's another experimental bookmarklet for you...
Try dragging this bookmarklet to your bookmarks bar Kill Styles. Then use it on a few websites to remove their CSS, revealing their underlying HTML. Feel free to screenshot any interesting results and add to Kill Styles Are.na channel.
Here is a collection of websites that intentionally have little or no style: No Style Just Some Text, relying mostly on the browser defaults.
HTML Today
Lately, many people are excited about making simple websites again. Here are some good portals to explore new handmade websites:
Like we said before, a website is simply a file or folder of files. How you organize these files is mostly up to you, but here are some beginning possibilities:
Example 1
Example 2
Example 3
Home — index.html
One thing the above examples have in common is an index.html file. This is the homepage. If I upload this folder called demo1 to the internet, when someone goes to that folder, they'll automatically get directed to the index.html. Like this: http://veryinteractive.net/tutorials/fruitful-guides/demos/laurel/demo1.
File paths
It's common to organize one's "assets" into their own folder. You can call this whatever you want. You can also have subfolders (say if you want to divide your assets further ... into images, sounds, etc.). However you organize, though, is reflected in the file paths in your HTML.
For example, let's say I want to display the image laurel-berries.png on my index.html with file structure from Example 1. I would do it like this:
<img src="assets/laurel-berries.png">
But if I change the file structure to Example 2, I would have to present the image with a new file path, adding the folder images:
<img src="assets/images/laurel-berries.png">
Another possibility... let's say I have some links on each "question" page, the q1.html, q2.html, q3.html. These links go back to the home, the index.html. Here's what this would look like with file structure in Example 1 or 2:
<a href="index.html">back to profile</a>
Now let's say I move to file structure 3, but I still want to link from q1.html, q2.html, q3.html back to the home, the index.html. I will have to tell each page to "go back a folder" which is expressed as ../ in the file path:
<a href="../index.html">back to profile</a>
If for some reason I had these question pages nested even further, I could add more:
<a href="../../../index.html">back to profile</a>
And If I just use / at the start of the path, with no dots... it means "go to the root/beginning of the whole website."
Create a simple "profile" website. It should have four total HTML pages: an index.html (home or index page) and three other .html pages. They should all link together in some way through use of the <a> element. Focus on using the most specific and semantically-correct HTML elements as possible and organizing your folder structure so that your website can link together properly … but also feel free to experiment with HTML elements in a new way. Don’t worry about color, fonts, or styling in general (CSS) … try focusing only on HTML.
Your index.html will be your profile home. Include your name, a profile image, and a link to one or all of your questions.
For the other three .html pages, answer one of these questions on each page using text, audio, video or image:
What’s your favorite fruit?
What’s your favorite color?
What’s your favorite music to work to?
What’s your favorite room in your house?
What’s your ideal learning environment like?
What is on your grocery list of interests?
How do you think a person is their best self on the internet?
What do you believe the web should have more of and less of?
Which topics would you like to see better covered on Wikipedia?
On these pages, try using some of the following elements:
view the source code of any webpage using your browser
inspect elements using your browser
create multiple .html pages and link them together with <a> tag
add a <title> to your page and other important metadata in the <head>
upload files (images, audio, video) and include them in your .html files
create folders and paths to assets in those folders
write alt-text for images and why “semantic HTML” matters
