Getting started with HTML
In this article we cover the absolute basics of
HTML, to get you started. We define elements,
attributes, and all the other important terms
you may have heard, and where they fit into the
language. We also show how an HTML element is
structured, how a typical HTML page is
structured, and explain other important basic
language features. Along the way, we'll play
with some HTML to get you interested!
What is HTML?
HTML (Hypertext Markup Language) is not
a programming language; it is a markup
language used to tell your browser how
to structure the web pages you visit. It
can be as complicated or as simple as
the web developer wishes it to be. HTML
consists of a series of elements, which
you use to enclose, wrap, or mark up
different parts of the content to make
it appear or act a certain way. The
enclosing tags can make a bit of content
into a hyperlink to link to another page
on the web, italicize words, and so on.
For example, take the following line of
content:
My cat is very grumpy
If we wanted the line to stand by
itself, we could specify that it is a
paragraph by enclosing it in a paragraph
(<p>)
element:
<p>My cat is very grumpy<p>
Anatomy of an HTML element
The main parts of our element are:
-
The opening tag:
This consists of the name of the
element (in this case, p), wrapped
in opening and closing
angle brackets.
This states where the element begins
or starts to take effect — in this
case where the start of the
paragraph is.
-
The closing tag:
This is the same as the opening tag,
except that it includes a forward
slash before the element name. This
states where the element ends — in
this case where the end of the
paragraph is. Failing to include a
closing tag is a common beginner
error and can lead to strange
results.
-
The content: This
is the content of the element, which
in this case is just text.
-
The element: The
opening tag plus the closing tag
plus the content equals the element.
The head of an HTML document is the part that is
not displayed in the web browser when the page
is loaded. It contains information such as the
page
<title>,
links to CSS (if you choose to style your HTML
content with CSS), links to custom favicons, and
other metadata (data about the HTML, such as the
author, and important keywords that describe the
document.) In this article we'll cover all of
the above and more, in order to give you a good
basis for working with markup.
What is the HTML head?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
The HTML head is the contents of the
<head>
element — unlike the contents of the
<body>
element (which are displayed on the page
when loaded in a browser), the head's
content is not displayed on the page.
Instead, the head's job is to contain
metadata about the document. In the
above example, the head is quite small:
Adding a title
We've already seen the
<title>
element in action — this can be used to
add a title to the document. This
however can get confused with the
<h1>
element, which is used to add a top
level heading to your body content —
this is also sometimes referred to as
the page title. But they are different
things!
-
The
<h1>
element appears on the page when
loaded in the browser — generally
this should be used once per page,
to mark up the title of your page
content (the story title, or news
headline, or whatever is appropriate
to your usage.)
-
The
<title>
element is metadata that represents
the title of the overall HTML
document (not the document's
content.)
One of HTML's main jobs is to give text
structure and meaning (also known as semantics)
so that a browser can display it correctly. This
article explains the way HTML can be used to
structure a page of text by adding headings and
paragraphs, emphasizing words, creating lists,
and more.
Headings and Paragraphs
Most structured text consists of
headings and paragraphs, whether you are
reading a story, a newspaper, a college
textbook, a magazine, etc. Structured
content makes the reading experience
easier and more enjoyable.
In HTML, each paragraph has to be
wrapped in a
<p>
element, like so:
<p>I am a paragraph, oh yes I am.</p>
Each heading has to be wrapped in a
heading element:
<h1>I am the title of the story.</h1>
There are six heading elements —
<h1>,
<h2>,
<h3>,
<h4>,
<h5>, and
<h6>. Each element represents a different
level of content in the document;
<h1>
represents the main heading,
<h2>
represents subheadings,
<h3>
represents sub-subheadings, and so on.
Lists
Now let's turn our attention to lists.
Lists are everywhere in life — from your
shopping list to the list of directions
you subconsciously follow to get to your
house every day, to the lists of
instructions you are following in these
tutorials! Lists are everywhere on the
Web too, and we've got three different
types to worry about.
Unordered lists are used to mark up
lists of items for which the order of
the items doesn't matter.
Ordered lists are lists in which the
order of the items does matter.
It is perfectly ok to nest one list
inside another one. You might want to
have some sub-bullets sitting below a
top level bullet.
Hyperlinks are really important — they are what
makes the Web a web. This article shows the
syntax required to make a link, and discusses
link best practices.
What is a hyperlink
Hyperlinks are one of the most exciting
innovations the Web has to offer. Well,
they've been a feature of the Web since
the very beginning, but they are what
makes the Web a Web — they allow us to
link our documents to any other document
(or other resource) we want to, we can
also link to specific parts of
documents, and we can make apps
available at a simple web address
(contrast this to native apps, which
have to be installed and all that
business.) Just about any web content
can be converted to a link, so that when
clicked (or otherwise activated) it will
make the web browser go to another web
address (URL).
Anatomy of a link
A basic link is created by wrapping the
text (or other content, see
Block level links) you want to turn into a link inside
an
<a>
element, and giving it an
<href>
attribute (also known as a
Hypertext Reference ,
or target) that will
contain the web address you want the
link to point to.
<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
This gives us the following result:
I'm creating a link to
the Mozilla homepage.
There are many other elements in a HTML for
formatting text, which we didn't get to in the
HTML text fundamentals
article. The elements described in this article
are less known, but still useful to know about
(and this is still not a complete list by any
means). Here you'll learn about marking up
quotations, description lists, computer code and
other related text, subscript and superscript,
contact information, and more.
Description lists
In HTML text fundamentals, we walked
through how to mark up basic lists in
HTML, but we didn't mention the third
type of list you'll occasionally come
across —
description lists. The
purpose of these lists is to mark up a
set of items and their associated
descriptions, such as terms and
definitions, or questions and answers.
Let's look at an example of a set of
terms and definitions:
soliloquy
In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
monologue
In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
aside
In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information
Description lists use a different
wrapper than the other list types —
<dl>; in addition each term is wrapped in a
<dt>
(description term) element, and each
description is wrapped in a
<dd>
(description definition) element. Let's
finish marking up our example:
<dl>
<dt>soliloquy<dt>
<dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)<dt>
<dt>monologue<dt>
<dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.<dt>
<dt>aside<dt>
<dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.<dt>
</dl>
Quotations
HTML also has features available for
marking up quotations; which element you
use depends on whether you are marking
up a block or inline quotation.
If a section of block level content (be
it a paragraph, multiple paragraphs, a
list, etc.) is quoted from somewhere
else, you should wrap it inside a
<blockquote>
element to signify this, and include a
URL pointing to the source of the quote
inside a cite attribute.
All the documentation in this page is taken from
MDN