HTML - The Language of the Web (For Better or For Worse)

facilitating the control the content of web pages

Overview
Separation of Concerns
Bare Minimum Code
Elements & Tags
Attributes
Common Tags
Try It Out
Conclusions

Overview

Hypertext Markup Language (HTML) is used to indicate the contents of a web page.

What images, text, videos, audio, or animations should be placed on the page
What is the semantic meaning of each piece of content, i.e. what is it describing?

Separation of Concerns

The separation of concerns is a philosophy popular in technology that different tasks should be accomplished by different technologis. With regards the Web:

The semantic content should be controlled by Hypertext Markup Language (HTML)
The visual presentation of content should be controlled by Cascading Style Sheets (CSS)
The interactive behavior of content should be controlled by Javascript (JS)

Bare Minimum HTML Code

At the very least, an HTML document contains the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Insert the title of your page here</title>
    <link rel="stylesheet" type="text/css" href="css/some_stylesheet.css" />
  </head>
  <body>
    Insert the contents of your page here.
  </body>
</html>

doctype

Let’s start with the first line, the doctype.

<!DOCTYPE html>

This informs the web browser that this is an HTML version 5 document.
Other versions of HTML have other doctype strings.
The browsers are programamed by their creators to understand these strings.

html

Moving on, we see the html tags the beginning and the end.

<html>
  ...
</html>

All HTML code (except the doctype, which is technically not HTML) is surrounded by these beginning and ending html tags.
Putting tags within other tags is called nesting tags - like Matryoshka dolls.
The browser now knows that what is nested within the html tags will be HTML code.

head and body

Within the html element, indented one level further in, we see two sets of tags: head and body.

<head>
  ...
</head>

<body>
  ...
</body>

The only two elements to be nested directly within the html element are these two: head and body.
All other HTML elements go further nested within one of these two.
The head will contain metadata about the page, and perhaps other invisible instructions to the web browser.
The body willl contain the visible parts of the page - the things the end-user will see.

meta charset

The meta tag resides within the head.

Notice that this is the first tag we have encountered that does not have a corresponding closing tag, such as </meta>.

<meta charset="utf-8" />

This tag is metadata informing the web browser of the character set being used by the code on this page.
Different character sets can support different languages.
UTF-8 is a Unicode-based character set that supports all known written languages.
If the character set is not specified correctly, non-English characters may not render correctly when the page is loaded by the browser.

title

The title element is metadata indicating to the web browser the title of this document.

<title>Insert the title of your page here</title>

The title does not appear within the visible contents of the web page.
The title does appear often in browser tabs and in search engines.

link

The link element informs the web browser of the existence of another file it should load.

<link rel="stylesheet" type="text/css" href="css/some_stylesheet.css" />

In this case, the link informs the browser that it should load a Cascading Style Sheets (CSS) file.

body contents

The contents of the body tag indicate the visible elements of the page.

In this case, we simply specify some text to show on the page.
Much of our remaining discussion will focus on other tags we can nested within the body.

<body>
  Insert the contents of your page here.
</body>

Elements & Tags

Elements

An HTML element is a conceptual piece of content or metadata in the document. E.g.

the title of the document
an instruction to load a CSS document
an image
the main heading
sub-headings
a paragraph

Tag pairs

As a general rule, tags come in pairs - an opening and a closing tag together indicate the start and end of a conceptual element.

For example - an opening paragraph tag.

<p></p>

And its corresponding closing - closing tags use the same tag name as the opening tag, e.g. p, but place a slash / in front of it.

</p>

Self-closing tags

Some opening tags do not have a separate closing tag. These are self-closing tags.

For example - the link opening tag. There is no corresponding </link> closing tag.

This is because there is no need to ever put any other tags nested inside the link element.

<link rel="stylesheet" type="text/css" href="css/some_stylesheet.css" />

Self-closing tags (continued)

<link rel="stylesheet" type="text/css" href="css/some_stylesheet.css" />

Notice that it has a slash / within the opening tag itself at the end - this indicates that it is self-closing.

In HTML 5 (the latest version), this slash is not necessary, but optional.
In XHTML (the previous popular version still in use), it is necessary.
We will write our code in XHTML-compatible HTML 5… so we will include the self-closing slash.

Tabs

Line breaks, multiple spaces, and tabs are ignored by the web browser.

They are all interpreted as a single space character.

So the following code is a valid HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Insert the title of your page here</title>
    <link rel="stylesheet" type="text/css" href="css/some_stylesheet.css" />
  </head>
  <body>
    Insert the contents of your page here.
  </body>
</html>

Tabs (continued)

This is also valid HTML code:

<!-- prettier-ignore -->
<!doctype html>

<html
lang="en"><head                 ><meta          charset="utf-8" />
<title>Insert the title of your page here<
    /title>               <link rel="stylesheet"
            type="text/css"         href="css/some_stylesheet.css" /></head><body>Insert the contents of your page here.</body></html>

Tags (continued again)

Don’t do that! We want to be able to read and understand code easily.

Use line breaks between elements.
If one element is nested within another, indent the nested element within its parent element.

Do this:

<article>
  <a href="somepage.html">
    <img src="images/donkey.jpg" />
  </a>
</article>

Not this:

<!-- prettier-ignore -->
<article><a href="somepage.html"><img src="images/donkey.jpg" /></a></article>

Tabs (continued again)

With elements that contain only text nested within them, it’s okay to write that text on one line with the element’s tags.

<h1>Platypus Endangerment</h1>

But if that text is very long and requires scrolling, break it up onto multiple lines.

<h1>
  Platypus Endangerment ipsum dolor sit amet, consectetur adipiscing elit. Nam
  posuere mauris sit amet nulla egestas blandit. Phasellus gravida dui eget nisi
  dictum
</h1>

Attributes

Concept

You may have noticed that some tags contain attributes. These are extra element settings.

Attributes are only ever present on opening tags.
Some are required, some are optional

For example - the img tag requires the src setting indicating which image file to load.

<img src="images/donkey.jpg" />

Specific values

Some elements require attributes with particular values in order to function properly.

selected - used by some input elements… has only one meaningful value, ‘selected’
checked - used by some input elements… has only one meaningful value, ‘checked’
type - used by the link, script, and input elements… has various values with specific meanings.
rel - used by the link element… usually has the value, stylesheet

Arbitrary values

Other elements can have attributes with arbitrary values that the programmer makes up.

id
class
name
value
for
title
alt
href - any URI
src - any URI
action - any URI

Common Elements

Universal

Elements required to setup every HTML document:

html
head
body

Metadata in the head

Elements used for settings within the head:

title
meta
script
link
style

Body content

Elements used to indicate content within the body:

h1 - h6
a
p
br
strong
ul
ol
li
img
figure
figcaption
video
audio
source

Grouping

Elements used to group content within the body:

header
footer
main
section
article
aside
menu
nav
div
span

Forms

Elements used in forms within the body:

form
input
textarea
label
select
option

Learn more

Obviously you will want to see more information on using these in a practical sense.

Check out the w3schools.com HTML tutorials.

Try It Out

Concept

The best way to learn to make web pages is to try. There are many ways to write code for a web page and open it in a web browser to see what it looks like.

by directly opening an HTML code file in your web browser
by running web server software on your own computer

Directly open an HTML code file in your web browser

This is the simplest way to test out a web page that you have been developing.

Write the HTML and CSS code in a decent code editor. Save the HTML code into a file with the .html extension, the CSS code in a file with the .css extension, and any Javascript code in a file with the .js extension.
Ensure that your HTML code refers to the CSS file and any Javascript code files appropriately.
Open your favorite web browser and use the File->Open menu option to open the HTML file you created.

Run a web server on your own computer using Visual Studio Code’s Live Server extension

Having a web server serve your web pages is a more “realistic” environment within which to test your pages, and it is easy to set up on your own machine.

Install the Live Server extension by Ritwick Dey into Visual Studio Code
Open any HTML file into the editor.
Click the Go Live button in the status bar at the bottom of the editor to start a web server and open the HTML document in a web browser automatically.
You can also right-click (or Control-click on Mac) on any file and select Open with Live Server.

Run a web server on your own computer using Node.js’ http-server module

Having a web server serve your web pages is a more “realistic” environment within which to test your pages, and it is easy to set up on your own machine.

download and install Node.js
from the command line, run the command npm install --global http-server to install a simple web server (note that Mac/Unix/Linux users may have to run sudo npm install --global http-server to install with superuser privileges)
from the command line, start the web server from within the same directory where the web pages files reside: http-server ./ - this should output a URL at which to view your web site.
copy/paste the URL into a web browser to view the web pages.

Conclusions

You now have a basic understanding of the purpose of HTML, its syntax, and some of the common elements and tags.

Thank you. Bye.