Section 1
Fundamentals of HTML
Learning Objectives
This lesson provides an overview of the basic and fundamental topics of the HTML and CSS. By the end of this lesson, learners will be able to:
Create an HTML page.
Identify important elements in HTML structure.
Describe the parent-to-child relationship between elements.
Create elements and assign them attributes.
Inspect elements within a webpage using the browser inspector.
Use the Emmet Toolkit to quickly create HTML elements.
Table of Contents
Section One: Basic HTML
HyperText Markup Language
HTML Elements Definition
HTML Base Template Code
Parent-to-Child Relationship
HTML Word Wrap and Whitespace
Block-Level Elements in HTML
Inline Elements in HTML
$>\quad$ Void Elements and Self-Closing Tags
HTML Attributes Section Two: HTML Elements
Heading Element
Paragraph Element
$>\quad$ Line Break and Thematic Break Elements
Preformatted Text Element
Text Formatting Elements
Section Element
List Elements
Image Element
$>\quad$ Anchor Element
Section Three: Organization
HTML Comments
Folder Structure
Absolute and Relative Paths
Browser Inspector
Emmet Toolkit
Section 1
Basic HTML
HyperText Markup Language
HTML (Hypertext Markup Language) is a markup language used to design web pages.
HTML allows the creation of web content, and tells the browser how to display the content.
HTML structures paragraphs, sections, and links by using elements (the building blocks of a web page).
The two most commonly used extensions of HTML documents are .html and .htm.
HTML5 is the latest version of the HTML specification.
UTF-8 is the default character encoding for HTML5. Example: Basic HTML Page Layout
div id="header"
div id="footer"
HTML Elements Definition
An HTML element helps the browser determine what default structure and style content the screen should display.
Elements and tags are not the same. Tags begin or end an element in source code, whereas elements are part of the DOM, the document model for displaying the page in the browser.
Examples of HTML tags include:
$\langle\mathrm{html}\rangle\langle\mathrm{html}\rangle$
$\langle$ head $\rangle\langle$ head $\rangle$
$\langle$ body $\rangle\langle/$ body $\rangle$
$\langle\operatorname{div}\rangle\langle/$ div $\rangle$
$\langle p\rangle\langle/ p\rangle$
$\langle$ img $\rangle\langle/$ img $\rangle$
HTML Layout Breakdown
An HTML element consists of an opened and closed HTML tag, while some tags are self-closed:
Opening tag:
Closing tag: $<$ /nav -
Self-closed tag: $<$ img $/>$
HTML Base Template Code
$\langle$ !DOCTYPE>
When performing HTML validation testing on a web page, the <! DOCTYPE > element tells the HTML validator which version of HTML standards the web page coding is to comply with.
When validating the web page, the HTML validator checks the coding against the applicable standard, and then reports which portions of the coding do not pass HTML validation.
$\langle$ html〉
The $\langle$ html $\rangle$ element tells the browser that this is an HTML document, and it represents the root of an HTML document. The $\langle$ html $\rangle$ tag is the container for all other HTML elements (except for the $\langle$ !DOCTYPE - tag).
HTML Base Template Code (continued)
$\langle$ 〈head〉
The <head $\rangle$ element is a container for metadata (data about data), and is placed between the $\langle$ html $\rangle$ tag and the $\langle$ body $\rangle$ tag.
Metadata is not displayed.
HTML metadata is data about the HTML document.
Metadata typically defines the document title, character set, styles, links, scripts, and other meta information.
$\langle$ title〉
The $\langle$ title $\rangle$ element sets a title to the browser page.
$\langle$ body>
The 〈body element is where all visible content being displayed in a web page is located within the HTML document.
Parent-to-Child Relationship
The document tree becomes a family tree, which refers to the relationship between elements.
An element that is directly contained by another element is said to be the child of that element.
The Inspector makes it very easy to see which tags are parent to other tags.
Understanding the parent-to-child relationship is important because:
It tells you how the HTML is structured. It plays a big role when you are ready to apply style to your content.
Example: Parent-to-Child Relationship
HTML Word-Wrap and Whitespace
Most of us are accustomed to typing text in a word processor, and letting the program determine where the line breaks belong. This is known as word-wrap. The only time that we are required to hit the enter key is when we want to start a new paragraph.
Browsers, however, will use word-wrap to display text, even if the enter key is pressed.
Browsers will treat a new line character, a tab character, and multiple spaces as a single space. If there are five spaces at the start of a line, they will be compressed into one space.
In order to insert a new line, tab, or multiple space in an HTML page, markup must be used.
If it is not plain text, it must be placed in markup.
Block-Level Elements in HTML
Block-level elements form a visible block on a page - they will appear on a new line from whatever content went before them, and any content that goes after it will also appear on a new line. Block-level elements tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc. A block-level element would not be nested inside an inline element, but it might be nested inside another block-level element.
Examples of Block-Level Elements in HTML
| 〈address〉 | $\langle d d\rangle$ | $\langle$ figcaption〉 | $\langle$ header〉 | $\langle$ noscript〉 | $\langle$ table |
|---|---|---|---|---|---|
〈article〉 | $\langle\operatorname{div}\rangle$ | 〈figure〉 | $\langle\mathrm{hr}\rangle$ | $\langle 0 l\rangle$ | $\langle t f o o t\rangle$ |
〈aside〉 | $\langle\mathrm{dl}\rangle$ | 〈footer〉 | $\langle l i\rangle$ | $\langle p\rangle$ | $\langle u l\rangle$ |
$\langle$ blockquote〉 | $\langle d t\rangle$ | $\langle$ form〉 | $\langle$ main〉 | $\langle$ prè | $\langle$ video〉 |
〈canvas〉 | 〈fieldset〉 | $\langle h 1\rangle-\langle h 6\rangle$ | $\langle n a v\rangle$ | 〈section〉 |
Inline Elements in HTML
Inline elements are those that are contained within block-level elements and surround only small parts of the document's content; not entire paragraphs or groupings of content.
An inline element will not cause a new line to appear in the document; they would normally appear inside a
Examples of Inline Elements in HTML
| 〈a〉 | $\langle b i g\rangle$ | $\langle d f n\rangle$ | $\langle k b d\rangle$ | $\langle q\rangle$ | $\langle$ span〉 |
|---|---|---|---|---|---|
$\langle a b b r\rangle$ | $\langle b r\rangle$ | $\langle e m\rangle$ | $\langle$ 〈label〉 | $\langle$ samp | 〈strong〉 |
$\langle$ acronym〉 | $\langle i\rangle$ | $\langle$ map $\rangle$ | $\langle$ script〉 | $\langle$ sub〉 | |
$\langle b\rangle$ | $\langle c i t e\rangle$ | $\langle i m g\rangle$ | $\langle$ 〈object〉 | $\langle$ sup〉 | |
$\langle$ bdo $\rangle$ | $\langle$ code $\rangle$ | 〈input〉 | 〈output〉 | $\langle$ small $\rangle$ | $\langle$ textarea $\rangle$ |
Void Elements and Self-Closing Tags
Void elements are elements that do not have or require a closing tag because they cannot have any child nodes.
It is important to note that self-closing tags do not actually exist in HTML. If a trailing slash character is present in the start tag of an HTML element, HTML parsers ignore that slash character.
However, self-closing tags are required in void elements in XML, XHTML, and SVG, making it good practice to self-close tags for readability and compatibility in HTML code.
There are very few void elements in HTML:
| 〈area〉 | $\langle$ 〈embed〉 | $\langle$ link〉 | $\langle w b r\rangle$ |
|---|---|---|---|
$\langle$ base〉 | $\langle\mathrm{hr}\rangle$ | $\langle$ meta〉 | |
$\langle b r\rangle$ | $\langle$ img〉 | 〈source〉 | |
$\langle\operatorname{col}\rangle$ | 〈input〉 | $\langle$ track〉 |
HTML Attributes
Some tags require an attribute to function properly. For example, an 〈img> tag requires a src (source) attribute and an alt (alternate description) attribute for it to validate.
<img source $=$ "./some/source/location" alt="An image description." $/>$
Attributes are extra information you can give to an element. In the case of the tag, the attribute provides a way for the to source an image from your local computer or from the internet.
An attribute should have:
A space between the element name and the attribute name.
The attribute name, followed by an equals (=) sign.
An attribute value, with opening and closing quotation marks wrapped around it.
In HTML, attributes usually come in name/value pairs, such as name="value".
Knowledge Check
What is HTML, and what is it used for?
What is the default character set used for HTML5?
What is the difference between an element and a tag in HTML?
What base template elements should web pages typically contain?
Which tag contains all of the visible content of an HTML document?
What is the parent-to-child relationship between elements and how is it represented in code?
How do browsers handle whitespace in HTML documents?
What is the difference between block-level elements and inline elements?
What are void elements (also referred to as self-closing tags)?
What are element attributes?
Last updated
