HTML 5: Introduction
Introduction to HTML
Welcome to our HTML tutorial! Let's jump right in.
What is HTML?
As an analogy, let's think about your average college-level MLA paper. When you're formatting it on a word processor, you make note of the parts that are the head, title, body, footer, etc.
With this information, we understand how the paper fits together. Furthermore, we adopt certain conventions as to how each page of the entire essay should look. You can think of HTML as the tool that marks these bits and pieces up so that we can identify what they are. Later on, we'll discuss how these identifiers are used to apply styles with CSS.
Tip: HTML is not used for styling!
Keep in mind that HTML's main purpose is to mark the semantics of a document. A common misunderstanding is that HTML is used just to mark up a page up so that we can apply target styles later on.
We'll soon see how HTML is used by search engine bots to identify what a page is about.
How does HTML work?
HTML works by assigning parts of the page with a "tag".
For example, the
<p>tag says "Hey, Mr. Browser, this is a paragraph!".
Tags are enclosed by two sets of brackets
The first set, or the start tag, look like
<head>, while end tags are exactly the same with a
/ preceding the tag name -
The content goes in between the start and end tags.
Some tags, such as
<br>, which stand for a line break, have no end tag.
These are called void (or empty) elements.
Void elements with a "/"
Sometimes you'll see void elements with a /, such as
This is remnant of XHTML syntax. XHTML is a version of HTML that adopted a stricter convention and forced developers to include a "/" on all tags.
In this tutorial series, we'll be using HTML 5, so there's no need for an extra "/" for void elements.
Three parts to HTML syntax
There are three parts to HTML syntax: elements, attributes and values.
Elements consist of the content and the tag. The content is the text you're marking up, and the tag is what you're defining it as.
In the figure below, we're saying that "Code Snippets Academy" is the title for our webpage.
Attributes contain additional information pertaining to an element. The "for" in the figure below is an attribute of the tag "label."
Values are what the attributes take in as an argument. Some arguments are predefined values, while others may be something like a link to an external source. The value in the figure below is an external source linking to Google.
Parents and Children
HTML elements may be embedded within one another. An element embedded the other is said to be the child of that element. Conversely, the element that encloses the other is said to be the parent.
Great start! Now let's set up an official HTML document.
Building your first HTML playground
Before we dive into writing content on an HTML page, we must place a few elements. Let's now make the most basic layout of an HTML page, and call it our playground.
You can open your "playground" in any browser of choice, and see your page come to life!
Declaring a DOCTYPE
The very first element to place is the DOCTYPE. This tells the browser which version of HTML we are using. If we just write <DOCTYPE html>, the browser will know that we are using HTML5.
Opening the HTML Tag
Next, we open an
<html> tag to get started with our HTML. It's good practice to specify the language of our document within this tag with the
lang attribute. The value for English will be
For spanish, we have
<html lang="es">, for French
<html lang="en"> </html>
Great! There are two main sections on an HTML page: the head and the body. Let's talk about the head first.
The head section
Content that are in the
<head> tags describe the "head" of your page.
Inserting a meta tag
Let's declare our first meta tag. A meta tag is a special HTML tag that provides information about a webpage. Unlike regular tags, meta tags don't affect how the page is displayed. Instead, we store information like:
- Who created the page.
- When the page was last updated.
- A brief description of the page.
It's extremely important to include meta tags, as this allows us to communicate with search engine bots so that they can understand what the page is about.
As our first meta tag, we'll declare what the page's character encoding as UTF-8. This gives us a library of global characters that are not limited to the Roman alphabet.
<meta charset="utf-8" http-equiv="Content-Type" content="text/html">
Our page title
To display our page title, we use the
This displays the title of our page, which shows up on the browser tab.
For example, if you go to www.youtube.com, the title that shows on the tab is YouTube.
<title>Building your first HTML playground | Code Snipcademy</title>
The importance of a page title
Defining the proper title is very important! Each page on your site should have its own unique title - this way, search engines can know what each page on your site is about.
The body section
The body is the meat of our page. This is where all our webpage's content goes, which includes text, forms, audio, video, etc. We'll discuss all the various types of tags you can apply here very shortly.
<body>Visible content goes here!</body>
Commenting an on HTML document
We can add comments on our page. These comments will not run as code, but will show up on the browser's "view source code" panel.
Comments are used to keep track of elements, and allow other developers to see your coding thought process.
<!-- If you want to add any comments, use this structure -->
Running your first HTML code
Phew! That was a lot of work. Now your HTML playground should look like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" http-equiv="Content-Type" content="text/html"> <title>My First Webpage</title> </head> <body> <!-- Comments look like this --> <!-- Content goes here! --> </body> </html>
Save this file as an .html document, and try opening it in your browser of choice. Note that nothing will show, as we have no content...as of yet!
HTML Meta Tags
Oftentimes, beginning web developers won't include meta tags because they don't affect any contents on the webpage. However, including meta tags are vital, as search engine bots use them to crawl through webpages. Thus it's important to practice including meta tags, especially if you would like to direct organic traffic onto your webpage.
There are five main meta tags that you should know about.
As we just saw in setting up our HTML playground, the charset declares what character encoding your webpage is using. The most common charset value is UTF-8, which includes a plethora of characters outside the Roman alphabet.
<meta charset="utf-8" http-equiv="Content-Type" content="text/html">
The viewport meta setting tells the browser how content should fit on a device's screen. The following snippet tells that the browser to set the viewport (the visible size of the window) to the width of the device, with an initial scale of 1 (no zoom).
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
The description meta tag will describe the contents of your page
To apply a description alongside your page, insert the following meta tag:
The description written may show up on a Google search. For example, if I Google "vintage coins" a link to eBay shows up:
The "Shop huge inventory..." portion is the meta description for the page.
Tips for writing a great description
- Accurately summarize the page's content.
- Avoid vague or generic words like "This is a webpage about...".
- Don't fill the description with only keywords. There is another meta tag for that.
- Use unique descriptions for each page.
You may also specify keywords for search engines. To do so, simply write it as the value of the "content" attribute like so:
5) Author name
You may also write the author name.
<meta name="author" content="John Doe">
Great! That wraps it up for our introduction. Now let's learn how to apply actual content onto our HTML document!