1 Introduction to HTML

Objectives
In this lesson, you will:

● Describe what HTML is
● Use HTML to structure static web pages
● How Does HTML Work
● Modify HTML tags using inline styling to improve the appearance of
web pages
What is HTML?
• HTML stands for HyperText Markup Language. It is a standard markup
language for web page creation. It allows the creation and structure of
sections, paragraphs, and links using HTML elements (the building blocks
of a web page) such as tags and attributes.
• HTML has a lot of use cases, namely:
✓Web development. Developers use HTML code to design how a browser displays
web page elements, such as text, hyperlinks, and media files.
✓Internet navigation. Users can easily navigate and insert links between related
pages and websites as HTML is heavily used to embed hyperlinks.
✓Web documentation. HTML makes it possible to organize and format documents,
similarly to Microsoft Word.
What are Tags and Attributes?
Tags and attributes are the basis of HTML. They work together but perform different functions – it is worth
investing 2 minutes in differentiating the two.
What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets.
An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional
info is placed inside.
An example of an attribute is:

<img src="mycat.jpg" alt="A photo of my cat.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Golden Rules To Remember
1.The vast majority of tags must be opened (<tag>)

and closed (</tag>) with the element information such as a title
or text resting between the tags.
2.When using multiple tags, the tags must be closed in the order
in which they were opened. For example:
<strong><em>This is really
important!</em></strong>
Creating Your First HTML Webpage
Basic Construction of an HTML Page

These tags should be placed underneath each other at the top of every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the language is HTML 5.
<html> — This tag signals that from here on we are going to write in HTML code.
<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and other
computer programs.
<body> — This is where the content of the page goes.

How Does HTML Work
The three main parts of an element are:

1. Opening tag – used to state where an element starts to take effect.
The tag is wrapped with opening and closing angle brackets. For
example, use the start tag <p> to create a paragraph.
2. Content – this is the output that other users see.
3. Closing tag – the same as the opening tag, but with a forward slash
before the element name. For example, </p> to end a paragraph.
The combination of these three parts will create an HTML element:
<p>This is how you add a paragraph in HTML.</p>
How Does HTML Work
• HTML element is its attribute has two sections – a name and

attribute value. The name identifies the additional information that a
user wants to add, while the attribute value gives further
specifications.
• For example, a style element adding the color purple and the font-
family verdana will look like this:
<p style="color:purple;font-family:verdana">This is how you add a paragraph in

HTML.</p>
How Does HTML Work
• Another attribute, the HTML class, is most important for

development and programming. The class attribute adds style
information that can work on different elements with the same
class value.
• For example, we will use the same style for a heading <h1> and a
paragraph <p>. The style includes background color, text color,
border, margin, and padding, under the class .important. To achieve
the same style between <h1> and <p>, add class=”important” after
each start tag:
How Does HTML Work
Most elements have an opening and a closing tag, but some elements do not need
closing tags to work, such as empty elements. These elements do not use an end
tag because they do not have content:
<img src="/" alt="Image">
This image tag has two attributes – an src attribute, the image path, and an alt
attribute, the descriptive text. However, it does not have content nor an end tag.
Lastly, every HTML document must start with a <!DOCTYPE> declaration to inform
the web browser about the document type. With HTML5, the doctype HTML public
declaration will be:
<!DOCTYPE html>
Further Tags
Inside the <head> tag, there is one tag that is always included: <title>, but there are others
that are just as important:
<title>
This is where we insert the page name as it will appear at the top of the browser window or tab.
<meta>
This is where information about the document is stored: character encoding, name (page context), description.
Let’s try out a basic <head> section:
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about your page. It is usually
around two sentences long.">.
<meta name="author" content="Conor Sheils">
</header>
Block-Level Elements
▪ A block-level element takes up the entire width of a page. It always starts a
new line in the document. For example, a heading element will be in a
separate line from a paragraph element.
▪ Every HTML page uses these three tags:
▪ <html> tag is the root element that defines the whole HTML document.
▪ <head> tag holds meta information such as the page’s title and charset.
▪ <body> tag encloses all the content that appears on the page.
▪ Other popular block-level tags include:
▪ Heading tags – these range from <h1> to <h6>, where heading h1 is largest in size,
getting smaller as they move up to h6.
▪ Paragraph tags – are all enclosed by using the <p> tag.
▪ List tags – have different variations. Use the <ol> tag for an ordered list, and use <ul>
for an unordered list. Then, enclose individual list items using the <li> tag.
Inline Elements
• An inline element formats the inner content of block-level elements, such
as adding links and emphasized strings. Inline elements are most
commonly used to format text without breaking the flow of the content.
• For example, a <strong> tag would render an element in bold, whereas the
<em> tag would show it in italics. Hyperlinks are also inline elements that
use an <a> tag and an href attribute to indicate the link’s destination:
<a href="https://example.com/">Click me!</a>

1 Introduction to HTML

Uploaded by

1 Introduction to HTML

Uploaded by

Objectives

In this lesson, you will:

What Are HTML Tags?

An example of a tag is: <h1>.

What are HTML Attributes?

An example of an attribute is:

1.The vast majority of tags must be opened (<tag>)

Basic Construction of an HTML Page

<body> — This is where the content of the page goes.

The three main parts of an element are:

• HTML element is its attribute has two sections – a name and

<p style="color:purple;font-family:verdana">This is how you add a paragraph in

• Another attribute, the HTML class, is most important for

Let’s try out a basic <head> section:

<a href="https://example.com/">Click me!</a>

You might also like