Introduction

HTML is the foundation of web pages. Every person wanting to build a web page must learn HTML.

HTML stands for HyperText Markup Language. It is the bare minimum you need to know to be able to build basic black and white pages. HTML allows you to structure and format web pages. To create a html file you need to use the .html extension for your file names.

One way you can think of HTML as a newspaper from the 1950's for the digital world. For example newspapers are mostly black and white and have some images. Overall the layout is very simple.

HTML File

First, create a file and add .html extension at the end of it i.e. index.html or book.html.
You typically want to name your home page index.html, it's consider the entry point to your entire web site
Each file is called a web page when viewed in a browser, a collection of related web pages is called a website.
The code in the HTML file is always public, any one can see it. In fact if you're on a computer right now, right click on this page and click on View Page Source, you'll be able to see how the code looks.
Note: white space doesn't matter. If you add 10 consecutive spaces will be be consider as just 1 space!

Elements

Elements are the building blocks of HTML. They're the smallest building block in an HTML document. Just like real elements from Chemistry, each element behaves and looks differently! You can also think of elements as lego pieces.

There so many of them, that we can't possibly go through all of them on this document, but we will cover several. Some you will hardly use, and others you will use often. Just like pocket change, how many times do you use pennies? I assume rarely, though they still exist.

If you're curious here is the the full list of elements available to use. There are times elements get phased out (known as deprecation). Other times new ones get added. There's a big committee that decides on this.

Here are a few that you will often see in documents (you'll notice that many times they are abbreviations):

html - the starting point of a document
head - meta data, what users don't see
body - your "canvas", what users see
title - is shown in the web page tab in browser, and typically also used by search engines
h1, h2, h3, h4, h5, h6 - these 6 are used to denote headings, level 1 up to level 6.
p - are for text that is a paragraph
div - division, to group (divide) things together
span - similar to div, but for generic text
meta - to add various meta data about the page
a - to add links (anchors) to other pages
nav - indicates section will contain navigation content
ul - unorder list, you want to indicate order does NOT matter
ol - order list, you want to indicate order matters
li - list item, the actual item in your ul or ol
img - to insert images
table - to add tabular data
form - to indicate area on page where you will collect user data. These are a few popular elements that are typically used with forms:
- button
- input
- label
- textarea
- select

One thing to keep in mind is that elements in some cases can only be used once per document i.e. html, head, body, and main. In other cases can theoretically exists on a document an infinite amount of times.

tip

One thing you may have noticed is how all elements are lowercase. Technically they can be written in uppercase letters such as DIV, H1, or P, however, for best practice and consistency I recommend always using lowercase letters.

Nesting and Relationships

A bird nest holds eggs. In the same way, tags hold other tags inside. This can theoretically go on infinitely. Another way to think of it is as a russian doll.

Sometimes it's helpful to describe how one tag relates to another hierarchically. We can describe relationships between tags just like in a family tree: parent, child, sibling, grandparent, ancestor, descendant, uncle, cousins, etc.

tip

Always use consistent nesting for readability, will help you understand your own code and help others be able to read your code easily without having too think to much.

Attributes

Attributes are just a ways to modify default element behavior or appearance.

Generally there are three type of attributes:

global attributes - every single element that exists have these attributes available to them! For example title, class, id, style, and several others!
common - attributes available to a subset of elements
element specific - attributes that only a element has

Google "mdn ELEMENT" this will typically yield a link to the Mozilla Developer Network web docs that contains what attributes you can use with a specific element. For example if I google "mdn img" then I will get to the <img> element documentation. You can scroll down to the Attributes section where you can find a list of the ones specific to img element. But remember it will also have access to the global attributes.

Most attributes are optional, but in some cases they'll be required. For example for <img> it at least needs src (source) attribute, otherwise it won't work. The <a> (anchor element) it at least needs href (hyper reference) attribute, otherwise it won't work either.

Comments

Comments - one way to think of them is as side or margin notes, or even annotations that are for your own reference. The browser will ignore them. The syntax is:

<!-- your comment here -->

Entities

Entities are a way to add special characters/symbols by name such as «, >, <, ÷, —, the copyright symbol © or the degree symbol ° and a ton more. The syntax for them is as follows: &entity;

Examples «, >, <, ÷, —, ©, °, etc.

Since white space space is ignored you can use   (non-breaking space) entity to add extra spaces. For example the following text, this and this have a big gap. To accomplish this you can do:

this &nbsp;&nbsp;&nbsp; and this

Another time that it can be useful is if you're trying to literally write <h1>hello world!<h1>, but you don't want your browser to treat it as a tag! Then you can use < to generate < and > entity to generate >.

Boilerplate

The "boilerplate" is the recommended bare minimum code that you should add to a html file when creating it.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Hello World!</title>
    </head>
    <body>
        <!-- content visible on page goes here -->
    </body>
</html>

Let's break it down a bit.

<!DOCTYPE html>

The DOCTYPE explicitly declares the version of document you intend to use. There's been other document types such XHTML in the past. By adding this line we tell the browser we want to use HTML 5 version.

<html lang="en">
</html>

The <html> tag is known as the root, since it's the very first tag you open in the document. The lang attribute describes the primary language your content will be written in. In this case it's English so we use "en". If you were to write it in Spanish then it would be "es", or "fr" for French. Sometimes you can also use a subscript to be more specific, for example in the United States and Great Britain the English language differs a bit, so if we are writing our document in British English we can set lang="en-GB" to be more specific about it. Without the lang attribute it falls back to "unknown". The lang is used by search engines and other programs that read and analyze your document.

caution

There should only be one set of html tags per document!

<head>
</head>

head tags represent the meta data part of of our document. What goes in between these tags are not visible to the user. Think about digital photography, when we snap a photo we can see the photograph, but there's also more information known as meta data in the photo that we can't visually see unless we use a program to view it, information such as date of photo, ISO, shutter speed, and sometimes even geo coordinates of where it was taken.

caution

There should only be one set of head tags per document!

<meta charset="UTF-8">

In the past we mostly only were able to write documents using Latin-based letters like ABCDEFGHIJKLMNOPQRSTUVWXYZabcde... etc. To do this we relied on a character set called ASCII, which allows 256 characters to be represented. However, there are many other languages like Persian or Japanese, amongst others that use different characters i.e. سلام or こんにちは. In order to represent all these extra characters we can use UTF-8 which has way more characters available. By default most modern browsers will default to UTF-8 by default so we don't have to add this declaration, but it's always a good thing to add it in case people are on older browsers and we want to ensure the characters show up correctly. Without this line some users will see weird looking symbols that make no sense lik squares or question marks.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This is intended for Internet Explorer browsers, which at this point is mostly gone. It tells it to use the newest version of its engine. Soon Internet Explorer will cease to exist, so in the future this line will not be needed.

<meta  name="viewport" content="width=device-width, initial-scale=1.0">

By default every browser will set a default width of your document. Some set it at 980px wide. This is true for Mobile Safari. Now an iPhone's width is around 375px. Since 980 is wider than 375, it resizes 980 to fit in 375, which makes a web page look small.

So instead of using 980 width, we instead use the width=device-width value so that it can default to the devices actual width instead! A device can be anything like laptop, computer, phone, or tablet, all have their specific width.

initial-scale=1.0 sets the zoom at 100%, but will allow the user to pinch to zoom in or out.

<body>
</body>

This is what the end user will see. Whatever content you add here the user will see in their viewport (the area of your browser that displays a web page). Think of this as your canvas.

caution

There should only be one set of body tags per document!

Semantic Tags

In way to think of semantic tags, are as tags that describe the type of content that they hold.

Let's think of the following analogy. A house is full of rooms. For example a kitchen, garage, or family room all are technically rooms. We can just use the term room for all of them. However, you might have guess this can be problematic. If I tell you to go get a box from the "room." You might be confused and say, "what room?"

This idea is similar in HTML, but instead of you being a character in the story, it's usually some computer programs like search engine web crawlers (aka spiders) or assistive technologies like screen readers. They scan your web page, but if you use generic div tags everywhere it doesn't quite know exactly the type of content it represents.

Going back to the story, if I tell you to go get a box from the "kitchen," know you'll know exactly where. Returning to the HTML comparison, instead of using div's we can better represent the content by using more specific elements like main, header, footer, aside, section, p, nav, h1-h6, and so on.

Text

The easiest way to display text is to just write the text. However, typically there can be different type of text so instead we want to wrap it inside the correct tag.

you can use span or div elements if your text is just generic text then you can use. For example:

    <span>welcome home</span>
    <div>goodbye everyone</div>

for paragraphs use p element. For example:

    <p>Today we went out for coffee.</p>
    <p>This is another separate paragraph.</p>

if you're quoting someone then you use blockquote element. For example:

    <blockquote>To be or not to be, that is the question.</blockquote>

heading elements are use to indicate importance of the text. There are 6 different levels with 1 being the most important text and 6 the least. You can also think of h1 being used for heading text, then h2 for a sub-heading text, and h3 for a sub-sub-heading text, and so forth.
Let's see we are writing a web page about dogs, we can have something like this:

    <h1>Dogs</h1>

    <h2>Large Breeds</h1>
    <h3>Origins</h3>
    <p>Some paragraph text would go here describing origins of large breeds.</p>

    <h2>Small Breeds</h2>
    <h3>Origins</h3>
    <p>Some paragraph text would go here describing origins of small breeds.</p>

Other ones that you might find useful are:
li - list item text
em
strong
address - indicates text contains an address
a - text meant to be a link to another location
b
i
code - text is code
abbr - text is an acronym and you can use the title attribute to describe what it stands for
kbd - text is a key on keyboard
q
mark
s
small
sub
sup
del
ins
caption
figcaption
th
td
label
many others!

White Space

You might have realized this by now, but white space gets eaten up by HTML. Meaning if you type several spaces in between words, they get reduced to just one space. For example even if you type in 20 spaces, you'll just end up with a single space when it gets rendered.

Sometimes if you want consecutive spaces you can use the non-breaking space entity,

note

You can also use the <pre> tags if you are going to need for all your white spaces to be preserved. Sometimes this will be useful if you find yourself using a lot of entities. Though the formatting (appearance) will be different as well, so that's a side effect of using pre.

Images

See next section!

Media

So far it's been quite boring, we've just been dealing with adding text. There's much more you can do to make your HTML pages look more interesting. You can add (embed) images, videos, sounds, and even other web pages within your pages!

Inserting Images

To insert an image we can use the <img src="puppy.jpg"> tag.

At a minimum you need to specify the src attribute, the src tells the browser where the image can be found.

Another attribute that you should add is alt (alternative text), which is displayed in case the file can't be loaded (reasons can be that it got deleted or the user turned off images from appearing in their browser). It also helps screen readers (used by blind user) and search engines understand what the image is. Typically you'll only need to type text if it's a critical image (non-decorative), it's decorative you can just leave it blank alt="". If it's an image of importance then just pretend you are describing the image to a blind person, but only what is necessary, which typically will depend on the context of what the image is being used for.

Assuming I'm writing an about animals and I want to insert an image of a wolf pack migrating I would insert the image as:

<img src="photos/wolf_pack.jpg"
        alt="A wolf pack walking across the snow"
        height="300"
        width="500">

tip

Notice how the height and width attribute were added. This will help the browser reserve the appropriate space for the image while it loads, without it it would not initially know the dimensions and would have no reserve space causing the page to shift (jump) a bit interrupting the user.

tip

There's also times when your web site will be viewed in smaller devices like phones or tablets, for such cases you can use smaller versions (file size) of your image. To do this there's an attribute called srcset.

Inserting Video

To insert a video we can use the video element. They can be used as a self closing tag (<video>) or as open/close tags with nested source tags:

<video controls>
    <source src="/puppy.webm" type="video/webm">
    <source src="/puppy.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

You must add the controls attribute, otherwise the play/pause/volume buttons will not appear.

Inserting Audio

To insert a audio we can use the audio element. They can be used as a self closing tag (<audio>) or as open/close tags with nested source tags:

<audio controls>
    <source src="/barking.mp3" type="audio/mp3">
    Sorry, your browser doesn't support embedded audios.
</audio>

You must add the controls attribute, otherwise the play/pause/volume buttons will not appear.

Inserting Web pages and other media

To insert a web page we can use the <iframe> tag.

Linking

Linking is one of the most important concepts when it comes to the web. It's called the web because a bunch of documents are linked together causing a "web" of documents.

To link documents we use the <a></a> tags, the a stands for anchor. We can make any other HTML element be the content, or we can just use text. One important piece of using these tags, is to use the href attribute to say where the document we are linking to lives.

The following example will make the text "click me!" be clickable and when clicked or tapped on will direct us to https://google.com which is Google's home page.

<a href="https://google.com">click me!</a>

The following example would show the word website as a link, and when clicked or tapped on would take the user to this website. :)

<p>Hello! This is my <a href="https://codewitherik.com">website</a>. You need to check it out!</p>

As mentioned, a link doesn't necessarily have to be just text, we can use any other html tags as content. In the example below a img is used as the anchor so that when someone clicks on the image it takes them to the wikipedia article about French Bulldogs.

<div>
    <h1>Puppies</h1>
    <a href="https://en.wikipedia.org/wiki/French_Bulldog"><img src="frenchie.jpg" alt="french bulldog puppy"></a>.
</div>

As you've seen you can link to "external web sites," those not you've coded. But you can also link to pages you coded by typing in the name of the path to the file you created, it'll work as long as they're in the same project.

<a href="about.html">My Bio</a>

Lastly, we can also link to specific parts of a web page using id's and page anchors.

<a href="#favorites">Favorite Movies</a>

<!-- then somewhere on the page set an id that matches -->

<div id="favorites"></div>

note

By default links will appear underlined and in blue, but once you have visited them will turn purple.

tip

Instead of opening links in same browser tab, we can open links in a new tab by using setting the target attribute to _blank i.e. <a href="https://google.com" target="_blank">Click me!</a>

Lists

Like in any other word processor or software you might have used, there is usually the ability to create lists.

In HTML there are three type of lists: order, unorder, and definition lists.

info

Both ul and ol will need to use a list item <li></li> to denote an actual item in the list.

Order Lists

Order lists are where the order matters such as cooking instructions. To create such list you use <ol></ol>. By default the bullet points will show as round solid circles as shown below:

buy turkey
marinate turkey
put turkey in oven

To produce the above we write:

<ol>
    <li>buy turkey</li>
    <li>marinate turkey</li>
    <li>put turkey in oven</li>
</ol>

Unorder Lists

Unorder lists are where the order does not matter such a daily to-do list. To create such list you use <ul></ul>. By default the bullet points will show as numbers as shown below:

throw trash
go grocery shopping
make a cake

To produce the above we write:

<ul>
    <li>throw trash</li>
    <li>go grocery shopping</li>
    <li>make a cake</li>
</ul>

Definition Lists

todo

Sectioning

todo

Tabular Data

todo

Other Useful Tags

todo

Forms: Collecting user data

Typically on web pages we need to be able to collect data from users. That's where forms come into play.

Example of forms are registration forms, or even login forms you see on your favorite websites.

To designate an section as a form you need to use the form tags.

<form action="https://example.com" method="GET">
</form>

The action attribute indicates where do you want the collected data to be sent. The method indicates the method on how to send the data, there other options like POST. If you don't add a method attribute it defaults to GET.

You can have as many forms you'd like in a single web page, each has to have their own form tags.

You can put any elements inside your form, though there are some special ones to actually collect data. Here's a list of available form elements to collect data.

The ones you'll typically use often are:

input - the input is one giant element that has a ton of different behaviors that you can change by adding the type= attribute, by default the value is text. If you provide a type that doesn't exist it also falls back to text.

Other popular types are:

type="checkbox" (for multiple choice),
type="radio" (for single choice),
type="file" (to upload a file), and
type="password" (mask password text entry with dots i.e. ••••••••).

To see all the different behaviors see the type options.

textarea - to collect large chunks of text
select - to provide a drop down, to set the options you would use the option tags.
button - to submit (aka send) the data. Though it's possible to also send using <input type="submit" value="Submit it!">

Search Engine Optimization (SEO)

todo

Troubleshooting

Overall HTML is a very forgiving language. It tries it best to render a page even if you make mistakes. However, sometimes it won't be able to recover.

Pay attention what your code editor shows, sometimes it will add orange or red squiggly lines, this typically indicates some sort of error.
Double check you have properly opened and closed the tags.
Sometimes you'll forget to add a character i.e. < or even >
You can copy and paste your code in a validator like Markup Validation Service which will report errors in your syntax.
Do a google search and start your question with "html". For example, "html how to create a list"
Check that you're using the tag correctly. You can google "mdn ELEMENT" and you'll get a result to the Mozilla
Developer Network which is a very good site that has all sorts of info about an element. I.e. "mdn h1" or "mdn p element"

Introduction

HTML File​

Elements​

Tags​

Nesting and Relationships​

Attributes​

Comments​

Entities​

Boilerplate​

Semantic Tags​

Text​

White Space​

Images​

Media​

Inserting Images​

Inserting Video​

Inserting Audio​

Inserting Web pages and other media​

Linking​

Lists​

Order Lists​

Unorder Lists​

Definition Lists​

Sectioning​

Tabular Data​

Other Useful Tags​

Forms: Collecting user data​

Search Engine Optimization (SEO)​

Troubleshooting​

HTML File

Elements

Tags

Nesting and Relationships

Attributes

Comments

Entities

Boilerplate

Semantic Tags

Text

White Space

Images

Media

Inserting Images

Inserting Video

Inserting Audio

Inserting Web pages and other media

Linking

Lists

Order Lists

Unorder Lists

Definition Lists

Sectioning

Tabular Data

Other Useful Tags

Forms: Collecting user data

Search Engine Optimization (SEO)

Troubleshooting