1

TOPIC 2: HTML
UECS 2094/ UECS 2194 Web Application Development
Jan 2024
 2

CONTENT

• Introduction

• Part 1- Elements and Tags

• Part 2 – Attributes, images and links

• Part 3 - Tables
 3

THE BIG THREE

• HTML
• CSS
• JavaScript
 4

THE BIG THREE

• HTML
• CSS
• JavaScript
 5

INTRODUCTION TO HTML
• HTML5 - 5th version of the "HyperText Markup Language".

• Modern Web pages and Web applications are generally composed of at

least three components, so 'HTML5’ is on of the component trio of
languages: HTML5, CSS3 and JavaScript.

• The 'HTML' part contains all the content, organized into a logical
structure. This is the part that an author might be most concerned with: the
words, chapter headings, figures, diagrams, etc.
 6

INTRODUCTION TO HTML
• While there have been numerous versions of HTML since its inception, our
focus in this course is the most recent version, HTML5.
• HTML5 was developed to provide more powerful and flexible ways for
developers to create dynamic Web pages.
 7

PART 1- ELEMENTS AND TAGS

 8

PUTTING THE ‘M’ IN HTML

• Markup
• annotate a document with extra information.

• There are many ways to markup a document, but HTML borrows a technique
from an ancestor language, SGML (Standard Generalized Markup
Language), which uses angle brackets ("<" and ">") to separate the
annotations from the regular text. In HTML these annotations are called
"tags".
 9

EXAMPLE CHUNK OF CODE

eliminated everything in between

the angle brackets from the text, for
most purposes it would still read the
same
 10

EDITORS
• You can build and edit your HTML pages by either using online editors or
editors that you can install on your machine like Visual Studio Code.

• Online editor
• https://jsbin.com/
• https://codepen.io/pen/

• Editor
• https://code.visualstudio.com/
• https://notepad-plus-plus.org/
 11

ELEMENTS
• 'Elements' are the pieces themselves, i.e. a paragraph is an element, or a
header is an element, even the body is an element.
• Most elements can contain other elements, as the body element would
contain header elements and paragraph elements
 12

TAGS
• 'Tags' are what we use to organize a text file (which is just a long string of characters)
such that it represents a tree of elements that make up the HTML document.

• Tags are not the elements themselves, rather they're the bits of text you use to tell
the computer where an element begins and ends.

• By using '<' and '>' as a kind of parentheses, HTML can indicate the beginning and
end of a tag, i.e. the presence of '<' tells the browser 'this next bit is markup, pay
attention’.

• The browser needs to be able to distinguish between the end of the current tag or
the beginning of a new tag (representing a nested element). This is done by adding
a '/' right after the '<' to indicate that it's a 'close tag'.
 13

TAGS
 14

TAGS
• Most tags have open and close versions, but there are a few strange ones.
We'll learn more about these later, but we generally refer to the strange ones
as "self closing" tags.

• Usually these tags represent an element that is completely described by its

attributes, and thus there is no need for other content.
 15

COMMENTS
• Computers are great at reading computer languages, but it's not always
easy for humans.
• Comments are a way of adding some text that is primarily targeted towards
human readers.

• Unlike most other things in HTML5, comments cannot be nested.

 16

COMMENTS
 17

ATTRIBUTES
• A given element on your Web page can be distinguished by any number of
unique or common attributes. You can identify it uniquely with an id
attribute, or group it with a class of other elements by setting the class
attribute. (More info in part 2)
• Best practice is to name these things to increase clarity, consistency and
brevity.
 18

ALL TOGETHER NOW

• One key to understanding HTML, or any computer language, is to be sure
that you avoid ambiguity, because computers generally are not good at
judgement calls.

• For example, you could streamline HTML so that whenever you see a <p>
tag, you start a new paragraph, no close tag needed. That might work most
of the time, but that would prevent you from nesting one element inside
another, as the browser could not know if you meant the new element to be
nested or a successor.
 19

ALL TOGETHER NOW

• A human designer might be able to tell what you meant from the context,
and knowing that mistakes happen choose the one she thinks is best suited
in that case.

• A browser, on the other hand, has difficulty with a task like that, so it is helpful
to use a close tag that matches the open tag to make things absolutely
clear.
 20

ALL TOGETHER NOW

 21

HTML PAGE STRUCTURE

• There are other ambiguities to consider. For example, when a browser
receives a file, it may know that it's receiving an HTML file, but it won't know
which version of HTML is used (it matters).

• That's why the first thing you need in any HTML file is a tag to tell you what
type of HTML file it is:
 22

HTML PAGE STRUCTURE

• It may seem redundant, but the next bit tells the browser where the actual
HTML code begins, using an <html> tag.

• Nearly every HTML document has two parts. The body is the main content of
the page, containing text, images, tables and so on. The head comes before
the body (on top). It is where you put information about the document that
does not really go in the body, AKA 'meta-' information.
 23

HTML PAGE STRUCTURE

 24

MORE ON TAGS
• Until here we have learned about:
• <!doctype> - It is there to declare exactly what type of HTML the
computer will find in this file. It is used as that: <!DOCTYPE html>
• <html> - This tag wrap around nearly everything in your html file (except
the doctype tag). This essentially contains all of the HTML code in the file,
which is generally everything (one big html element).
• <head> - The head element is where you put information that does not
really appear in the body of the work. For example, the <title> of the
page, which typically appears on the window containing the page, is
defined in the head section.
 25

MORE ON TAGS
• <body> - The body section contains all of the content of your page,
essentially what the user sees. This could be text, pictures, links, videos, tables
and so on. There can be only one <body> element in a document.
• <p> - P is for 'paragraph', which is the tag you may use to arrange much of
your text information. Depending on the style you are using, text wrapped in
a <p> tag may be indented or have extra vertical white space before
starting. When rendered on the Web page, a p element creates a new line.
 26

THE <h1> TAG

• <h1> -There is a whole collection of 'h' tags, <h1>, <h2>, <h3> . . . All the
way up to <h6>. They're generally used the same way you would use
chapter or section headings in a book (don't confuse the h here with the <head> section,
that is completely different).

• An <h1> tag might be used as the title of the document (as it appears on
the page, not the same as the <title> element), or to indicate the outer
most level in a group of nested sections.
 27

EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<h1>A TALE OF TWO CITIES</h1>
<h2>A STORY OF THE FRENCH REVOLUTION</h2>
<h2>Book the First—Recalled to Life</h2>
<h3>I. The Period</h3>

</body>
</html>
 28

<q> and <blockquote>

• The tags <q> and <blockquote> are for quotes.
• <q> - This tag has no relationship to the somewhat confusing single and
double quote characters, rather it's used when you want to quote a person
or written work in your Web page. Quotes are customarily displayed using
quotation marks
• <blockquote> - If you want to quote a larger passage, you may want to
use blockquote, which will typically set the quoted text apart from the
surrounding text and indent it, to make clear that it is quoted text.
 29

<q> and <blockquote>

 30

<ul>, <ol> and <li>

• The tags <ul>, <ol> and <li> are used to indicate a list of things (bullet
points).

<ol> - ordered list

<ul> - unordered list
<li> - list item
 31

<ul>, <ol> and <li>

 32

THE <hr> TAG

• <hr> - stands for horizontal rule and is used to insert a horizontal line across
the width of the text, or a thematic break in an HTML page to divide or
separate document sections.

• <hr> tag is an empty tag and does not require an end tag.
 33

THE <br> TAG

• <br> - signifies a line break.
• the <br> tag is an empty tag, there's no need for a close tag.
 34

THE <pre> TAG

• <pre> - stands for "PREformatted text", meaning that the text is to be
presented exactly as written in the HTML file.
• It preserves all text formatting characters i.e. spaces, line breaks and most
typically implies a monospace font. It is very handy for illustrating bits of
program code, or other "typewritten" material.
 35

EXERCISE 1

Write the HTML code the get the

result as shown on the left.
 36

EXERCISE 2

Write the HTML code the get the

result as shown on the left.
 37

PART 2 – ATTRIBUTES, IMAGES AND LINKS

 38

ATTRIBUTES
• We learned a little bit about what attributes are in the previous part. Let’s
look into it in more depth
• Here is an ordered list:

• What if we want the list to start from 5?

 39

ATTRIBUTES
• What if we want the list to start from 5?

Here, using the start attribute, we made our list start with 5 instead of 1.
 40

ATTRIBUTES
• Like start, we have many useful attributes that can affect your element.

• Attributes are a significant part of HTML.

• Tags and attributes make up the language.

• A tag can have multiple attributes:

<ol start="5"></ol>
<ol id="cinema" class="attribute-list" start="5"></ol>
<ol start="5" class="attribute-list"></ol>
 41

THE id ATTRIBUTE
• Imagine you have two paragraph below, how are you going to identify
them?

<p>I am paragraph 1 and I want to be in red</p>

<p>I am paragraph 2 and I want to be in blue</p>

• We need to give them each a name first so we can refer back to the
paragraphs separately. This unique name we give each element is called
an id.
<p id="para1">I am paragraph 1 and I want to be in red</p>
<p id="para2">I am paragraph 2 and I want to be in blue</p>
 42

NAMING RULE OF id
• Must be of at least one character

• Should not contain any spaces

• Values are case-sensitive.

• This means 'QuestioN' and 'question' are NOT the same. That does not mean you
can define two different IDs that only differ by case, e.g. "myid" and "MyId".

• They are different and so legal but it would be extremely confusing to do this.
 43

THE class ATTRIBUTE

• Another attribute similar to id is class.

<p id="poem1" class="poetry">To move, to breathe, to fly, to float...</p>

<p id="poem2" class="poetry">Roses are red, violets are blue...</p>

• We can assign the same class to multiple tags, so that we can refer to the
whole group at once rather than refer to each of them one by one
 44

NAMING RULE OF class

• Must begin with a letter (a-z or A-Z)

• First letter can be followed by a letter, digit, hyphen or an underscore

• Values are case-sensitive

 45

GLOBAL AND NON-GLOBAL ATTRIBUTE

• Global attributes can be applied to all tags. They are common attributes. Examples of
global attributes are id and class.

• Non-global attributes are attributes applied to a specific instance of a tag. It can be

applied to one or more tags.

• For example, start is an attribute for the <ol> tag and it cannot be applied on
the <p> or <h1> tags, as it is specific to only ordered lists <ol>. Another attribute
specific to the <ol> tag is reversed

• The non-global attribute width can be applied to several tags such

as <img>, <input> and <video>.

• References for attributes: https://www.w3.org/2009/cheatsheet/

 46

SEMANTIC ELEMENTS
• Semantic HTML is HTML that concentrates on the meaning of information in
Web pages instead of its presentation or look.

• From a semantic HTML perspective, using the right tags is important. For
example, you should use <blockquote> to wrap a quote and not use a
paragraph tag and then style it to look like a quote. When you see a heading
like <h1> or <h2>, you know this is likely the start of a new sub-section or
topic.

• Semantic elements are beneficial to both the developer and browser. They
convey much more information about your HTML document's content and
structure. Communication is always welcome in any programming language.
 47

SEMANTIC ELEMENTS
• This additional communication is useful for a developer who can understand
the markup structure better (when you come back to your code after a year
or pass it on to a colleague, this is going to help you and them a lot!).
• For the browser, it can better differentiate different types of data which
results in better display of content in different devices.
• Assistive technology, such as a screen reader, will read content and convey
information about the content depending on the semantic meaning, for
example, identifying headers and reading them in a different tone.
 48

SEMANTIC ELEMENTS: WEB PAGE

STRUCTURE (1)
• The header can be a starting point for the
whole document or individual sections. It
typically contains the introduction.

• The nav refers to navigation. It could contain a

set of navigation links, such as a table of
contents of a book.

• The section refers to sections in a document.

For example, a document about plants could
contain several sections under headings such
as perennials, annuals, soil type, etc.
 49

SEMANTIC ELEMENTS: WEB PAGE

STRUCTURE (2)
• The aside refers to content that is apart from
the main content.

• The article refers to independent content. If

an article is extracted out of the document, it
should make sense all by itself. Articles, blog
posts, frequently asked questions (FAQ) are all
examples of independent content.

• The footer contains typical footer information

such as authoring, copyrights and contact
information.
 50

SEMANTIC ELEMENTS: WEB PAGE

STRUCTURE
• The use of these semantic elements improves the automated
processing of documents.

• For example, when a <nav> tag is scanned, it automatically knows it

includes content related to page navigation or a header indicates
introductory content.

• It also improves the accessibility of web pages. If a screen reader can

correctly determine the structure of a document, it reads the
document more seamlessly and avoids irrelevant information or
repeating content.
 51

SEMANTIC ELEMENTS (1)

Semantic Description Example
Element

<header> Introduction for the whole page or individual <header>

<h1>The Importance of Being Earnest</h1>
sections, article, nav, aside elements. Typically <h3>A Quest for Truth and Beauty</h3>
contains site name, logo, navigation. Does <p>The play was written in 1895 by playwright
not have to be at the beginning of page. Oscar Wilde</p>
</header>

<footer> Includes typical footer information like <footer>

<p>Written by: Oscar Wilde</p>
authoring, copyrights, contact information <p>Contact information: <a
and a footer menu. href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>

<nav> Navigation links for the document. A page <nav><ol>

<li><a href="/act1/">Act 1</a></li>
can have more than one <nav> element like <li><a href="/act2/">Act 2</a></li>
table of contents, horizontal navigation in <li><a href="/act3/">Act 3</a></li>
header and footer navigation. </ol></nav>
 52

SEMANTIC ELEMENTS (2)

Semantic Description Example
Element

<section> Defines sections in the document such <section>

<h1>Act 1 - Scene 1</h1>
as chapters, headers, etc. Typically used on <p>Set in the morning room of Algy's flat in Half Moon
content that cannot make sense on its own. Street</p>
</section>

<article> Defines independent content that should <article>

<h1>A blogger's analysis of this brilliant satire</h1>
make sense on its own outside of the <p>This witty, sometimes conscious play is Wilde's
document such as newspaper articles, blog playground to raise his progressive sentiments...</p>
</article>
posts, etc.
<aside> Side content other than main content, like a <p>Algernon's flat is luxuriously and artistically
furnished</p>
sidebar. These are not considered as part of <aside>
the main page outline. <h3>Algernon Moncrieff</h3>
<p>A wealthy bachelor who lives in a fashionable part
of London. He has a good sense of humor and utter lack
of respect for society.</p>
</aside>
 53

SEMANTIC ELEMENTS (3)

Semantic Description Example
Element
<details> A way to provide additional <details>
<summary>Cast Members</summary>
information that the user can show or <p>George Washington as Algernon Moncrieff</p>
hide. Content that is shown to user by <p>Ronald Reagan as John Worthing</p>
default. Other content is hidden and </details>
can be expanded to view.
<figcaption> Provides a caption (explanation) of an <figure>
<img src="img_cast.jpg" alt="The Importance of
image. To be used within <figure>. Being Earnest Cast">
<figcaption>Fig1. - The cast hard at work at
dress rehearsal before opening
night</figcaption>
</figure>

<figure> Contains an image and can be used Refer to <figcaption>

to group with an image's caption
 54

SEMANTIC ELEMENTS (4)

Semantic Description Example
Element
<mark> Defines a part of a text you want to <h4>Lane: </h4><p>Yes sir. [<mark>Handing his
master the sandwiches on a salver</mark>]</p>
highlight. The highlight styling is
specified in CSS.

<summary> Used within the <details> tag. Specifies <details>

<summary>Cast Members</summary>
the visible content. The rest of the <p>George Washington as Algernon Moncrieff</p>
content in details is shown/hidden by <p>Ronald Reagan as John Worthing</p>
user. </details>
 55

<header> VERSUS <h1> - <h6>

• <header> is simply an area to add any introductory content about your
page. It can contains headings, paragraphs, tables, images, logos and even
navigation.

• <h1> to <h6> are headings. <h1> is for the most important heading
and <h6> is for the least important.

• The header can and frequently does contain headings <h1> to <h6>. In
the case of headings, they do not have be to be used within a header.
 56

<div> AND <span> ELEMENTS

• <div> is used to define a division or a section of the document. It is not a
semantic element, however, it is commonly used when there isn't a better
semantic sectioning element to use.

• It is like a generic container that can hold a variety of elements such

as paragraphs, images, links, tables, etc. It can be used to group elements
for styling purposes. You can do this by assigning an id or class attribute to
the div element and then applying styles which will affect all elements in the
div container.
 57

<div> AND <span> ELEMENTS

• One more important element that comes in handy is <span>.

• Span and Div are so similar yet so different that there is an entire wikipedia
page dedicated to it. https://en.wikipedia.org/wiki/Div_and_span

• <div> and <span> serve the same purpose but should be applied at
different levels. <div> is a block level element (for a block of space)
while <span> is an inline element (for within a line or phrase).
 58

<div> :EXAMPLE
<section>
<h2>Module 1</h2>
<p>This week, you will be learning about...
module 1 stuff</p>
<div class="code">
<ol>
<li>Line of code</li>
<li>Line of code</li>
</ol>
</div>
</section>
<section>
<h2>Module 2</h2>
<p>This week, you will be learning about...
module 2 stuff</p>
<div class="code">
<ol>
<li>Line of code</li>
<li>Line of code</li>
</ol>
</div>
</section>
 59

<span>: EXAMPLE

<p> Hi everyone! My name is Alexa and I work

for <span class="company">ABC Company</span></p>
 60

THE <img>TAG
• In this age of visual culture, pictures and images make everything more
interesting and engaging.
• Here is the most basic <img> tag:

<img src="example.png" alt="Example Tutorial Image" width="50" height="38">

• The image tag has several attributes out of which only src and alt are
required. The rest are useful but optional attributes, but it is recommended to
set the image size by specifying its width and height.
 61

THE src ATTRIBUTE

• The source src attribute from the <img> tag tells us where to fetch the
image from. There are two different types of URLs you can give for source.
• Path to an image file within your Website:
<img src="images/image-with-relative-url.png" alt="Example Tutorial Image">

• Path to an image file that resides elsewhere on the Web:

<img src="https://www.example.com/image-with-absolute-url.png" alt="Example

Tutorial Image">
 62

THE src ATTRIBUTE

• Things to keep in mind when using the src attribute:

✓ Do not include spaces in your image path.

✓ Make sure your image path matches the capitalization of the actual path.
✓ Absolute paths are not recommended to use because essentially, you are
hardcoding the entire URL. Relatives URLs start with a path - '/images/test.png'.
The base URL here comes from where your HTML document is deployed. This is
easier to maintain. It will work on localhost or if you switch domain names without
requiring any changes.
 63

THE <alt> ATTRIBUTE

• alt stands for alternate text for an image.
• Using this attribute, you can provide a short description of what the image is
about. This description should convey information about the image or its
function in the page.
• Importance of the alt attribute
• screen readers will typically announce that there is an image and read out the
contents of the alt attribute.
• Your image will not display if the path in your source attribute is wrong, slow
internet connection, image relocated. It will show a broken link. It is useful to
have the alternate text display so the user can make sense of the missing image.
• Search engines do not 'see' images. They rely on the alt attribute to find out what
the image is about. If you use your target keyword in alt, it will optimize the
search.
 64

EXAMPLE
 65

THE title ATTRIBUTE

• title is a global attribute which is very useful in

an <img> tag.

• If you have a complicated image that could use a

tooltip or description, you will want to use
the title attribute.

<img src="images/tulips.png" alt="This is supposed to be an image

of tulips" title="Tulips from woodburn tulip festival">
 66

HYPERLINKS
• A hyperlink is any text or image that takes you to another place. This can be:

• another Web page

• a bookmark
• a local link (link to another part of the same Web page)
• an email: e.g. mailto:[email protected]
 67

HYPERLINKS: ANCHOR ELEMENT

• The hyperlink tag in html is simply <a>, and it is called the anchor element.
Here is how it is used:
<a href="https://en.wikipedia.org/wiki/Hyperlink">Click here</a> to
go to the Wikipedia Hyperlink page.

• The <a> tag can either surround text or an image.

 68

THE href ATTRIBUTE

• href points to the URL that the link should jump to.

• Though it is an optional attribute, without it, the <a> tag will not be a
hyperlink because it obviously has no idea where to jump to.
 69

THE href ATTRIBUTE

• The href attribute takes a URL. This URL can be in the form of:
• a link to an external Web site also known as absolute URL.
<a href="https://wikipedia.com"></a>

• a link to a file or page within the same Web site also known as relative URL.
<a href="contacts.html"></a>

• a link to an element on the same page. The element, is referenced using its ID.
E.g. If you want to link to a div with id='details', the corresponding anchor tag
will be:
<a href="#details"></a>
 70

EXAMPLE: HYPERLINK
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<!-- Text in a hyperlink-->
<a href="https://www.wikipedia.com/">If you click on me, I will take you to Wikipedia</a>
<!-- Paragraph in a hyperlink-->
<a href="https://www.wikipedia.com/"><p>If you click on me, I will take you to Wikipedia</p></a>
<!-- Image in a hyperlink-->
<a href="https://www.wikipedia.com/">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]"
alt="Image navigating to Wikipedia"></a>
</body>
</html>
 71

EXAMPLE: HYPERLINK
 72

HYPERLINK: EMAIL
• You can even use the anchor element to add your email address under the
contacts section of your Web page.
• You can also add a subject to the email.

<p>Feedback: <a href="mailto:[email protected]?Subject=Hello">Send

mail to authors with subject</a></p>
 73

THE target ATTRIBUTE

• target specifies the destination where the linked URL in href should be
opened.

Destination Attribute Example Result

value

In the same view where the link resides. _self <a href="https://wikipedia.com/" LINK will open in
target="_self"></a> same window
If no target is specified, this is the
default behavior.

In a new window or tab. This is very _blank <a href="https://wikipedia.com/" LINK will open in new
target="_blank"></a> window
convenient if you want to link the user
to a Web page without having the
current page disappear. By clicking on
the previous window or tab, they can
redirect to the page where the link is.
 74

EXERCISE
Continue from Part 1 Exercise 1, improve
the HTML code the get the result as
shown on the left.
 75

PART 3 - TABLES
 76

TABLES

• Tables are used to arrange data in tabular format - rows and columns of
cells.

• You can put a variety of data like text, images, forms, links and even other
tables in your table.
 77

TABLES

• Here is a list of all the table elements we will be learning in this section:

Type Element
Define table <table>

Give a title to a table <caption>

Row groups <thead>, <tfoot>, <tbody>

Table row <tr>

Table cells <th>, <td>

 78

<table> AND <caption>

• Here is a simple example table caption

<table>
<caption>
<p>Table 1.0</p>
<p>Student's final exam results 2023</p>
</caption>
</table>
 79

TABLE RELATED ELEMENTS

• <tr> - Creates a table row.
• <th> - Creates table header cells. The content of table header cells is bold
and centered by default.
• <td> - Defines a cell of a table that contains data. Content of table
data cells is left-aligned by default.
• colspan attribute - Specifies the number of cells you want that column to
span
• rowspan attribute - Specifies the number of cells you want the row to span
 80

<body>
EXAMPLE
<table border=1>
<tr>
<th colspan="2">Name</th>
<th colspan="2">Age</th>
</tr>
<tr>
<td>Alexa</td>
<td>23</td>
<td>Son</td>
<td>Jim</td>
</tr>
<tr>
<td>James</td>
<td>35</td>
<td>Daughter</td>
<td>Aria</td>
</tr>
</table>
</body>
 81

THE <thead>, <tbody> AND

<tfoot> ELEMENTS
• Similar to an HTML document, a table in HTML can be split into header, body
and footer. We use these three elements <thead>, <tbody> and <tfoot>
to specify parts of a table.

• It is very useful to define parts of a table as header, body and footer

because once browsers are able to identify which cells are header and
footer, the body can be allowed to scroll independently of header and
footer catering to a good table viewing experience in small screens.

• Example
 82

THE <thead>, <tbody> AND

<tfoot> ELEMENTS
• The <thead> element represents the block of rows that consist of the column
labels for the parent table element.

• Following <thead>, subsequent rows are considered body rows in a table.

Best practice is to encode them using a <tbody> element.
The <tbody> element encapsulates a set of table rows (<tr> elements),
indicating that they comprise the body of the table (<table>).

• The footer is the last table part to be specified. Rows within <tfoot> are
defined to be footer rows for the table
 83

EXAMPLE
 84

<audio> ELEMENT
• You can use the <audio> element to embed audio in your page. Any text
between the <audio> element will be displayed if the browser does not
support the audio element.

<audio src="sounds/flute.mp3">
Your browser does not support the audio file.
</audio>
 85

<video> ELEMENT
• You can use the <video> element to embed video in your page. You can
specify the location of your video file using the src attribute
or source element (for multiple source files).
• Any text between the <video> element will be displayed if the browser does
not support the video element.

<video src="multimedia/running.mp4">
Your browser does not support the HTML5 video
element.
</video>
 86

END OF TOPIC 2