Scribd
Upload
8 views

Introduction To HTML

Uploaded by

marksanting13
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Introduction To HTML

Uploaded by

marksanting13
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

LEARN HTML

❖ Elements and Structure


❖ Semantic HTML
Introduction to HTML
Elements and Structure > Introduction to HTML

HTML is the skeleton of all web pages. It’s often the first language learned by developers, marketers, and
designers and is core to front-end development work.

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.
Introduction to HTML
Elements and Structure > Introduction to HTML

Example of simple HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Online Training on Web Development: Build a Responsive Website With HTML, CSS and Bootstrap</title>
</head>
<body>

<h1>Build a Responsive Website With HTML, CSS and Bootstrap</h1>


<p>HTML is awesome.</p>

</body>
</html>
Introduction to HTML
Elements and Structure > Introduction to HTML

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Anatomy
Elements and Structure > Introduction to HTML > HTML
Anatomy

HTML is composed of elements. These


elements structure the webpage and define its
content. Let’s take a look at how they’re
written.

The diagram to the right displays an HTML


paragraph element. As we can see, the
paragraph element is made up of:

● An opening tag (<p>)


● The content (“Hello World!” text)
● 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.
The Body Example:
Elements and Structure > Introduction to HTML > The
Body

One of the key HTML elements we use to <!DOCTYPE html>


build a webpage is the body element. Only <html>
content inside the opening and closing body
<head>
tags can be displayed to the screen. Here’s
what opening and closing body tags look
like: </head>
<body>
<p>Happy coding!</p>
</body>
</html>

Once the file has a body, many different


types of content – including text, images, and
Note: While some browsers may render some content outside body tags as well to
buttons – can be added to the body.
accommodate the occasional mistake in your HTML, not all browsers do this! The
best way to ensure that all your HTML renders the same way in all browsers is to
ensure that your elements remain within the opening and closing body tags.
HTML Structure Example:
Elements and Structure > Introduction to HTML > HTML
Structure

HTML is organized as a collection of family


tree relationships. As you saw in the last
exercise, we placed <p> tags within <body>
tags. 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. You can also see that we’ve added two spaces of
indentation (using the spacebar) for better readability.

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.
HTML Structure
Elements and Structure > Introduction to HTML > HTML
Structure <body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
Let’s consider a more complicated example <p>Sibling to h1, but also grandchild of body</p>
that uses some new tags: </div>
</body>

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


behavior and styling from their parent element. You’ll learn more about webpage
hierarchy when you start digging into CSS.
HTML Structure
Elements and Structure > Introduction to HTML > HTML
Structure <body>
<h1>Hello World</h1>
<p>This paragraph is a child of the body element</p>
Exercise: <div>

Add the paragraph below as a child of the div </div>


element. </body>
<p>This paragraph is a child of the div
element and a grandchild of the body
element</p>
Headings The following is the list of heading elements available in HTML. They are
ordered from largest to smallest in size.
Elements and Structure > Introduction to HTML >
Headings
<h1> — used for main headings. All other smaller headings are used for
subheadings.
Headings in HTML are similar to headings <h2>
in other types of media. For example, in <h3>
newspapers, large headings are typically <h4>
used to capture a reader’s attention. Other <h5>
times, headings are used to describe <h6>
content, like the title of a movie or an
educational article. The following example code uses a headline intended to capture a reader’s
attention. It uses the largest heading available, the main heading element:
HTML follows a similar pattern. In HTML,
there are six different headings, or heading
elements. Headings can be used for a <body>
variety of purposes, like titling sections, <h1>The Brown Bear</h1>
articles, or other forms of content. <h2>About Brown Bears</h2>
<h3>Species</h3>
<h3>Features</h3>
</body>
Headings
Elements and Structure > Introduction to HTML >
Headings

Exercise:
<body>
1. Now that you know how to structure
<h1>The Brown Bear</h1>
HTML elements, we’ll spend the rest
<h2>About Brown Bears</h2>
of the lesson building an informational <h3>Species</h3>
website using some of the most <h3>Features</h3>
common HTML elements. We’ve put <h2>Habitat</h2>
some elements in to get you started, <h3>Countries with Large Brown Bear Populations</h3>
but you’ll write the rest of the page on <h3>Countries with Small Brown Bear Populations</h3>
your own. <h2>Media</h2>
</body>
2. Below the <h3> heading that says
Features, add an <h2> heading that
says Habitat

3. On the next line, add one more <h3>


heading that says Countries with Small
Brown Bear Populations.

4. Finally, on the next line add an <h2>


heading that says Media.
Divs
Elements and Structure > Introduction to HTML > Divs
<body>
<div>
<h1>Why use divs?</h1>
One of the most popular elements in HTML <p>Great for grouping elements!</p>
is the <div> element. <div> is short for </div>
“division” or a container that divides the </body>
page into sections. These sections are very
useful for grouping elements in your
HTML together.

<div>s don’t inherently have a visual representation, but they are very useful
when we want to apply custom styles to our HTML elements. <div>s allow us to
group HTML elements to apply the same styles for all HTML elements inside. We
can also style the <div> element as a whole. You can see how this can be done in
the Learn CSS course.

<div>s can contain any text or other HTML elements, such as links, images, or
videos. Remember to always add two spaces of indentation when you nest
elements inside of <div>s for better readability.
Divs
Elements and Structure > Introduction to HTML > Divs

Exercise:
1. Below the <h1> heading that says The
<body>
Brown Bear, add an opening <div> tag.
<h1>The Brown Bear</h1>
<div>
Place the closing </div> tag after the <h3> <h2>About Brown Bears</h2>
element that says Features. <h3>Species</h3>
<h3>Features</h3>
Remember to use your space bar to add two </div>
<div>
spaces of indentation when you nest
<h2>Habitat</h2>
elements. <h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
2. Above the <h2> element that says Habitat, </div>
add an opening <div> tag. <div>
Close the </div> tag after the <h3> element <h2>Media</h2>
that says Countries with Small Brown Bear </div>
</body>
Populations.
3. Above the <h2> element that says Media,
add an opening <div> tag.

4. Place the closing </div> tag right above the


closing </body> tag.
Attributes One commonly used attribute is the id. We can use the id attribute to specify
Elements and Structure > Introduction to HTML >
Attributes different content (such as <div>s) and is really helpful when you use an element
more than once. ids have several different purposes in HTML, but for now, we’ll
focus on how they can help us identify content on our page.

HTML attributes provide additional When we add an id to a <div>, we place it in the opening tag:
information about HTML elements.

● All HTML elements can have


attributes
● Attributes provide additional
information about elements
● Attributes are always specified in
the start tag
● Attributes usually come in
name/value pairs like:
name="value"

A complete list of all attributes for each HTML element


HTML Attribute Reference.
Attributes
Elements and Structure > Introduction to HTML >
Attributes

Exercise:
1. Add an id attribute with the value <body>
"introduction" to the <div> tag <h1>The Brown Bear</h1>
that’s below the The Brown Bear <div id="introduction">
<h2>About Brown Bears</h2>
<h1> heading.
<h3>Species</h3>
<h3>Features</h3>
2. Add an id attribute with the value </div>
"habitat" to the opening <div> tag <div id="habitat">
that has the Habitat <h2> heading <h2>Habitat</h2>
as a child. <h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
</div>
3. Add an id attribute with the value
<div id="media">
"media" to the opening <div> tag <h2>Media</h2>
that has the Media <h2> heading as </div>
a child. </body>
Displaying Text <div>
Elements and Structure > Introduction to HTML >
Displaying Text
<h1>Technology</h1>
</div>
<div>
<p>
Displaying Text
<span>Self-driving cars</span> are anticipated to replace up to 2 million jobs
If you want to display text in HTML, you
over the next two decades.
can use a paragraph or span:
</p>
</div>
Paragraphs (<p>) contain a block of plain
text.
<span> contains short pieces of text or
other HTML. They are used to separate
small pieces of content that are on the same In the example above, there are two different <div>. The second <div> contains
line as other content. a <p> with <span>Self-driving cars</span>. This <span> element separates
Take a look at each of these elements in “Self-driving cars” from the rest of the text in the paragraph.
action below:
It’s best to use a <span> element when you want to target a specific piece of
content that is inline, or on the same line as other text. If you want to divide
your content into blocks, it’s better to use a <div>.
Displaying Text
Elements and Structure > Introduction to HTML > <body>
Displaying Text <h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
Exercise:
1. Below the <h2> element that says About <p>“The brown bear (Ursus arctos) is native to parts of northern Eurasia and North
Brown Bears, add <p> opening and America. Its conservation status is currently Least Concern. There are many subspecies
closing tags, and inside of the tags put within the brown bear species, including the Atlas bear and the Himalayan brown bear.”</p>
the following text:
<h3>Species</h3>
“The brown bear (Ursus arctos) is native <h3>Features</h3>
to parts of northern Eurasia and North </div>
<div id="habitat">
America. Its conservation status is
<h2>Habitat</h2>
currently Least Concern. There are
<h3>Countries with Large Brown Bear Populations</h3>
many subspecies within the brown bear
<h3>Countries with Small Brown Bear Populations</h3>
species, including the Atlas bear and the
</div>
Himalayan brown bear.” <div id= "media">
<h2>Media</h2>
</div>
Continue... </body>
Displaying Text <body>
Elements and Structure > Introduction to HTML > <h1>The Brown Bear</h1>
Displaying Text <div id="introduction">
<h2>About Brown Bears</h2>
<p>“The brown bear (Ursus arctos) is native to parts of northern Eurasia and North
Exercise: America. Its conservation status is currently Least Concern. There are many subspecies
within the brown bear species, including the Atlas bear and the Himalayan brown bear.”</p>
2. Below the <h3> element that says <h3>Species</h3>
<p>“Brown bears are not always completely brown. Some can be reddish or yellowish.
Features, add a paragraph with the following
They have very large, curved claws and huge paws. Male brown bears are often 30% larger
text: than female brown bears. They can range from 5 feet to 9 feet from head to toe.”</p>
<h3>Features</h3>
“Brown bears are not always completely </div>
brown. Some can be reddish or yellowish. <div id="habitat">
They have very large, curved claws and huge <h2>Habitat</h2>
paws. Male brown bears are often 30% <h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
larger than female brown bears. They can
</div>
range from 5 feet to 9 feet from head to toe.” <div id= "media">
<h2>Media</h2>
</div>
Continue... </body>
<body>
Displaying Text <h1>The Brown Bear</h1>
Elements and Structure > Introduction to HTML > <div id="introduction">
Displaying Text <h2>About Brown Bears</h2>
<p>“The brown bear (Ursus arctos) is native to parts of northern Eurasia and North
America. Its conservation status is currently Least Concern. There are many subspecies
Exercise: within the brown bear species, including the Atlas bear and the Himalayan brown bear.”</p>
<h3>Species</h3>
3.Under the <h3> element that says: <p>“Brown bears are not always completely brown. Some can be reddish or yellowish.
They have very large, curved claws and huge paws. Male brown bears are often 30% larger
than female brown bears. They can range from 5 feet to 9 feet from head to toe.”</p>
Countries with Small Brown Bear
<h3>Features</h3>
Populations </div>
<div id="habitat">
Add a paragraph with the following text: <h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
“Some countries with smaller brown bear <p>“Some countries with smaller brown bear populations include Armenia, Belarus,
Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia,
populations include Armenia, Belarus,
Turkmenistan, and Uzbekistan.”</p>
Bulgaria, China, Finland, France, Greece, <h3>Countries with Small Brown Bear Populations</h3>
India, Japan, Nepal, Poland, Romania, </div>
Slovenia, Turkmenistan, and Uzbekistan.” <div id= "media">
<h2>Media</h2>
</div>
</body>
Take a look at each style in action:
Styling Text
Elements and Structure > Introduction to HTML > Divs
<p><strong>The Nile River</strong> is the <em>longest</em> river in the
world, measuring over 6,850 kilometers long (approximately 4,260
You can also style text using HTML tags. miles).</p>
The <em> tag emphasizes text, while the
<strong> tag highlights important text.
In this example, the <strong> and <em> tags are used to emphasize the text to
Later, when you begin to style websites, produce the following:
you will decide how you want browsers to
The Nile River is the longest river in the world, measuring over 6,850 kilometers
display content within <em> and <strong> long (approximately 4,260 miles).
tags. Browsers, however, have built-in style
sheets that will generally style these tags in As we can see, “The Nile River” is bolded and “longest” is in italics.
the following ways:

● The <em> tag will generally render


as italic emphasis.
● The <strong> will generally render
as bold emphasis.
<body>
Styling Text <h1>The Brown Bear</h1>
<div id="introduction">
Elements and Structure > Introduction to HTML > Divs <h2>About Brown Bears</h2>
<p>The <em>brown bear</em> (Ursus arctos) is native to parts of northern Eurasia and North
America. Its conservation status is currently <strong>Least Concern</strong>. There are many
Exercise: subspecies within the brown bear species, including the Atlas bear and the Himalayan brown
bear.</p>
<h3>Species</h3>
1. In the first paragraph that starts “The
<h3>Features</h3>
brown bear…”, emphasize Ursus arctos <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have
using the <em> tag. very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown
bears. They can range from 5 feet to 9 feet from head to toe.</p>
2. In the paragraph under About Brown </div>
Bears, make the words Least Concern <div id="habitat">
strong using the <strong> tag. <h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria,
China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and
Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>
Unordered Lists Take a look at each style in action:
Elements and Structure > Introduction to HTML >
Unordered Lists
<ul>
<li>Limes</li>
In addition to organizing text in paragraph
<li>Tortillas</li>
form, you can also display content in an <li>Chicken</li>
easy-to-read list. </ul>

In HTML, you can use an unordered list tag


(<ul>) to create a list of items in no In the example above, the list was created using the <ul> tag and all
particular order. An unordered list outlines individual list items were added using <li> tags.
individual list items with a bullet point.
The output will look like this:

The <ul> element should not hold raw text ● Limes


and won’t automatically format raw text ● Tortillas
into an unordered list of items. Individual ● Chicken
list items must be added to the unordered
list using the <li> tag. The <li> or list item
tag is used to describe an item in a list.
<body>
Unordered Lists <h1>The Brown Bear</h1>
<div id="introduction">
Elements and Structure > Introduction to HTML >
Unordered Lists <h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its
conservation status is currently <strong>Least Concern</strong>. <br><br> There are many subspecies within
the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
Exercise: <h3>Species</h3>
<ul>
<li>Arctos</li>
1. In the first paragraph that starts “The <li>Collarus</li>
Under the heading that says Species, <li>Horribilis</li>
create an unordered list. <li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
2. Add the following list items to the <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very
unordered list: large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can
range from 5 feet to 9 feet from head to toe.</p>
</div>
● Arctos <div id="habitat">
● Collarus <h2>Habitat</h2>
● Horribilis <h3>Countries with Large Brown Bear Populations</h3>
● <h3>Countries with Small Brown Bear Populations</h3>
Nelsoni (extinct)
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China,
Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>
Ordered Lists Take a look at each style in action:
Elements and Structure > Introduction to HTML >
Ordered Lists
<ol>
<li>Preheat the oven to 350 degrees.</li>
Ordered lists (<ol>) are like unordered lists,
<li>Mix whole wheat flour, baking soda, and salt.</li>
except that each list item is numbered. They <li>Cream the butter, sugar in separate bowl.</li>
are useful when you need to list different <li>Add eggs and vanilla extract to bowl.</li>
steps in a process or rank items for first to </ol>
last.

You can create the ordered list with the


<ol> tag and then add individual list items
The output will look like this:
to the list using <li> tags.
1. Preheat the oven to 350 degrees.
2. Mix whole wheat flour, baking soda, and salt.
3. Cream the butter, sugar in separate bowl.
4. Add eggs and vanilla extract to bowl.
<body>
Ordered Lists <h1>The Brown Bear</h1>
<div id="introduction">
Elements and Structure > Introduction to HTML > <h2>About Brown Bears</h2>
Ordered Lists <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its
conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown
bear species, including the Atlas bear and the Himalayan brown bear.</p>
<h3>Species</h3>
Exercise: <ul>
<li>Arctos</li>
<li>Collarus</li>
1. Under the heading that says <li>Horribilis</li>
<li>Nelsoni (extinct)</li>
Countries with Large Brown Bear </ul>
Populations, add an ordered list. <h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved
claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet
2. Add the following list items to the from head to toe.</p>
</div>
ordered list: <div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
● Russia <ol>
● United States <li>Russia</li>
<li>United States</li>
● Canada <li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France,
Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
</div>
</body>
Images
Elements and Structure > Introduction to HTML > Images
<img src="image-location.jpg" />
All of the elements you’ve learned about so
far (headings, paragraphs, lists, and spans)
The <img> tag has a required attribute called src. The src attribute must be
share one thing in common: they’re
set to the image’s source, or the location of the image. In this case, the value
composed entirely of text! What if you of src must be the uniform resource locator (URL) of the image. A URL is
want to add content to your web page that the web address or local address where a file is stored.
isn’t composed of text, like images?

The <img> tag allows you to add an image


Exercise:
to a web page. Most elements require both
opening and closing tags, but the <img> tag
Under the Media <h2> heading, add an image. Use the following URL as the
is a self-closing tag. Note that the end of the
source (src) for the image:
<img> tag has a forward slash /. Self-
closing tags may include or omit the final
https://content.codecademy.com/courses/web-101/web101-
slash — both will render properly.
image_brownbear.jpg
<body>
<h1>The Brown Bear</h1>

Images <div id="introduction">


<h2>About Brown Bears</h2>
Elements and Structure > Introduction to HTML > Images <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation sta
<strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas b
brown bear.</p>
All of the elements you’ve learned about so <h3>Species</h3>
<ul>
far (headings, paragraphs, lists, and spans) <li>Arctos</li>
share one thing in common: they’re <li>Collarus</li>
<li>Horribilis</li>
composed entirely of text! What if you <li>Nelsoni (extinct)</li>
want to add content to your web page that </ul>
<h3>Features</h3>
isn’t composed of text, like images? <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws a
bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
The <img> tag allows you to add an image <div id="habitat">
to a web page. Most elements require both <h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
opening and closing tags, but the <img> tag <ol>
is a self-closing tag. Note that the end of the <li>Russia</li>
<li>United States</li>
<img> tag has a forward slash /. Self- <li>Canada</li>
closing tags may include or omit the final </ol>
<h3>Countries with Small Brown Bear Populations</h3>
slash — both will render properly. <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greec
Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg">
</div>
</body>
<video src="myVideo.mp4" width="320" height="240" controls>
Videos Video not supported
</video>
Elements and Structure > Introduction to HTML > Videos

In addition to images, HTML also supports


displaying videos. Like the <img> tag, the
<video> tag requires a src attribute with a In this example, the video source (src) is myVideo.mp4 The source
link to the video source. Unlike the <img>
can be a video file that is hosted alongside your webpage, or a URL
that points to a video file hosted on another webpage.
tag however, the <video> element requires
an opening and a closing tag.
After the src attribute, the width and height attributes are used to set
the size of the video displayed in the browser. The controls attribute
instructs the browser to include basic video controls: pause, play and
skip.

The text, “Video not supported”, between the opening and closing
video tags will only be displayed if the browser is unable to load the
video.
Videos
Elements and Structure > Introduction to HTML > Videos
Exercise:

1. Under the image, create a <video> tag and add the following video url as
the source:
https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/html
css1-vid_brown-bear.mp4

Be sure to create a closing tag as well with </video>.

2. Define the width of the video as "320" and the height as "240". Make
sure to also include the controls attribute.

3. In between the opening and closing <video> tags, add the phrase Video
not supported, which will be displayed if the browser is unable to load
your video.
HTML Semantic Semantic Elements in HTML

Elements Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.

Semantic elements = elements with a In HTML there are some semantic elements that can be used to define different parts
meaning. of a web page:

What are Semantic Elements? ● <article>


A semantic element clearly describes its ● <aside>
meaning to both the browser and the ● <details>
developer. ● <figcaption>
● <figure>
Examples of non-semantic elements: <div> ● <footer>
and <span> - Tells nothing about its ● <header>
content. ● <main>
● <mark>
Examples of semantic elements: <form>, ● <nav>
<table>, and <article> - Clearly defines its ● <section>
content. ● <summary>
● <time>

Click this link for more details about semantic elments

You might also like