HTML
What exactly is HTML?
HTML provides structure to the content appearing on a website, such as images,
text, or videos.
HTML stands for Hypertext Markup Language:
A markup language is a computer language that defines the structure and
presentation of raw text.
In HTML, the computer can interpret raw text that is wrapped in HTML elements.
HyperText is text displayed on a computer or device that provides access to
other text through links, also known as hyperlinks.
HTML anatomy
HTML is composed of elements. These elements structure the webpage and define
its content.
This diagram displays an HTML paragraph element. As we can see, the paragraph
element is made up of one opening tag (<p>), the content (“Hello World!” text),
and a closing tag (</p>). A tag and the content between it is called an HTML element.
There are many tags that we can use to organize and display text and other types of
content, like images.
HTML element (or simply, element): Unit of content in an HTML
document formed by HTML tags and the text or media it contains.
HTML Tag: The element name, surrounded by an opening (<) and closing
(>) angle bracket.
Opening Tag: The first HTML tag used to start an HTML element. The tag
type is surrounded by opening and closing angle brackets.
, Content: The information (text or other elements) contained between the
opening and closing tags of an HTML element.
Closing tag: The second HTML tag used to end an HTML element. Closing
tags have a forward slash (/) inside of them, directly after the left angle
bracket.
The body
One of the key HTML elements we use to build a webpage is the body element.
Only content inside the opening and closing body tags can be displayed to the screen.
Here’s what opening and closing body tags look like:
Once the file has a body, many different types of content -including text, images,
and buttons- can be added to the body.
HTML structure
HTML is organized as a collection of family tree relationships. When an element
is contained inside another element, it is considered the child of that element.
The child element is said to be nested inside of the parent element.
In the example above, the <p> element is nested inside the <body>
element. The <p> element is considered a child of the <body> element, and
the <body> element is considered the parent.
Since there can be multiple levels of nesting, this analogy can be extended to
grandchildren, great-grandchildren, and beyond. The relationship between elements
and their ancestor and descendent elements is known as hierarchy.
, In this example, the <body> element is the parent of the <div> element.
Both the <h1> and <p> elements are children of the <div> element. Because the
<h1> and <p> elements are at the same level, they are considered siblings and are both
grandchildren of the <body> element.
Understanding HTML hierarchy is important because child elements can
inherit behaviour and styling from their parent element.
Headings
In HTML, there are six different headings, or heading elements. Headings can be
used for a variety of purposes, like titling sections, articles, or other forms of
content.
The following is the list of heading elements available in HTML. They are ordered
from largest to smallest in size.
<h1> used for main headings. All other smaller headings are used for
subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>
Divs
One of the most popular elements in HTML is the <div> element. <Div> is short
for “division” or a container that divides the page into sections. These sections are very
useful for grouping elements in your HTML together.
What exactly is HTML?
HTML provides structure to the content appearing on a website, such as images,
text, or videos.
HTML stands for Hypertext Markup Language:
A markup language is a computer language that defines the structure and
presentation of raw text.
In HTML, the computer can interpret raw text that is wrapped in HTML elements.
HyperText is text displayed on a computer or device that provides access to
other text through links, also known as hyperlinks.
HTML anatomy
HTML is composed of elements. These elements structure the webpage and define
its content.
This diagram displays an HTML paragraph element. As we can see, the paragraph
element is made up of one opening tag (<p>), the content (“Hello World!” text),
and a closing tag (</p>). A tag and the content between it is called an HTML element.
There are many tags that we can use to organize and display text and other types of
content, like images.
HTML element (or simply, element): Unit of content in an HTML
document formed by HTML tags and the text or media it contains.
HTML Tag: The element name, surrounded by an opening (<) and closing
(>) angle bracket.
Opening Tag: The first HTML tag used to start an HTML element. The tag
type is surrounded by opening and closing angle brackets.
, Content: The information (text or other elements) contained between the
opening and closing tags of an HTML element.
Closing tag: The second HTML tag used to end an HTML element. Closing
tags have a forward slash (/) inside of them, directly after the left angle
bracket.
The body
One of the key HTML elements we use to build a webpage is the body element.
Only content inside the opening and closing body tags can be displayed to the screen.
Here’s what opening and closing body tags look like:
Once the file has a body, many different types of content -including text, images,
and buttons- can be added to the body.
HTML structure
HTML is organized as a collection of family tree relationships. When an element
is contained inside another element, it is considered the child of that element.
The child element is said to be nested inside of the parent element.
In the example above, the <p> element is nested inside the <body>
element. The <p> element is considered a child of the <body> element, and
the <body> element is considered the parent.
Since there can be multiple levels of nesting, this analogy can be extended to
grandchildren, great-grandchildren, and beyond. The relationship between elements
and their ancestor and descendent elements is known as hierarchy.
, In this example, the <body> element is the parent of the <div> element.
Both the <h1> and <p> elements are children of the <div> element. Because the
<h1> and <p> elements are at the same level, they are considered siblings and are both
grandchildren of the <body> element.
Understanding HTML hierarchy is important because child elements can
inherit behaviour and styling from their parent element.
Headings
In HTML, there are six different headings, or heading elements. Headings can be
used for a variety of purposes, like titling sections, articles, or other forms of
content.
The following is the list of heading elements available in HTML. They are ordered
from largest to smallest in size.
<h1> used for main headings. All other smaller headings are used for
subheadings.
<h2>
<h3>
<h4>
<h5>
<h6>
Divs
One of the most popular elements in HTML is the <div> element. <Div> is short
for “division” or a container that divides the page into sections. These sections are very
useful for grouping elements in your HTML together.
