Table of Contents

HTML BASICS.............................................4
HTML page structure.......................................7
Tags vs elements.............................................8
Attributes....................................................9
Case insensitive............................................10
White space................................................10
THE DOCUMENT HEADING...........................12
The title tag...............................................................13
The script tag.............................................................13
The noscript tag..........................................................14
The link tag...............................................................15
The style tag..............................................................16
The base tag..............................................................17
The meta tag..............................................................17
THE DOCUMENT BODY................................19
Block elements vs inline elements........................20
TAGS THAT INTERACT WITH TEXT................21
The p tag..................................................................21
The span tag..............................................................22
The br tag.................................................................22
The heading tags.........................................................22
Lists in HTML.............................................23

1
 Unordered Lists..........................................................23
Ordered Lists.............................................................24
Difference Between Ordered and Unordered Lists................24
LINKS.....................................................25
Absolute vs. Relative URLs...........................................25
Link with Image.........................................................25
Open Link in New Tab.................................................26
CONTAINER TAGS AND PAGE STRUCTURE.......26
1. <article>................................................................26
2. <section>...............................................................26
3. <div>....................................................................27
4. <nav>...................................................................27
5. <aside>.................................................................27
6. <header>...............................................................27
7. <main>.................................................................28
8. <footer>................................................................28
FORMS....................................................28
Basic Structure...........................................................28
Common Input Types...................................................29
Textarea...................................................................29
Select Dropdown........................................................29
TABLES...................................................30
Basic Structure...........................................................30
Explanation........................................................................30
Table Content............................................................31

2
 Example:...........................................................................31
Explanation........................................................................31
Default Browser Rendering............................................32
More tags to organize the table.......................................32
Table caption.............................................................34
MULTIMEDIA TAGS: AUDIO AND VIDEO..........34
The audio tag.............................................................34
The video tag.............................................................35

3
Module 2: HTML5 & Semantic Markup

HTML BASICS
HTML is a standard defined by the WHATWG, an acronym for Web Hypertext Application
Technology Working Group, an organization formed by people working on the most popular
web browser. This means it's basically controlled by Google, Mozilla, Apple and Microsoft.

In the past the W3C (World Wide Web Consortium) was the organization in charge of
creating the HTML standard.

The control informally moved from W3C to WHATWG when it became clear that the W3C
push towards XHTML was not a good idea.

If you've never heard of XHTML, here's a short story. In the early 2000s, we all believed the
future of the Web was XML (seriously). So HTML moved from being an SGML-based
authoring language to an XML markup language.

It was a big change. We had to know, and respect, more rules. Stricter rules.

Eventually browser vendors realized this was not the right path for the Web, and they pushed
back, creating what is now known as HTML5.

W3C did not really agree on giving up control of HTML, and for years we had 2 competing
standards, each one aiming to be the official one. Eventually on 28 May 2019 it was made
official by W3C that the "true" HTML version was the one published by WHATWG.

I mentioned HTML5. Let me explain this little story. I know, it's kind of confusing up to
now, as with many things in life when many actors are involved, yet it's also fascinating.

HTML 2 followed in 1995.

We got HTML 3 in January 1997, and HTML 4 in December 1997.

4
Busy times!

20+ years went by, we had this entire XHTML thing, and eventually we got to this HTML5
"thing", which is not really just HTML any more.

HTML5 is a term that now defines a whole set of technologies, which includes HTML but
adds a lot of APIs and standards like WebGL, SVG and more.

The key thing to understand here is this: there is no such thing (any more) as an HTML
version now. It's a living standard. Like CSS, which is called "3", but in reality is a bunch of
independent modules developed separately. Like JavaScript, where we have one new edition
each year, but nowadays, the only thing that matters is which individual features are
implemented by the engine.

Yes we call it HTML5, but HTML4 is from 1997. That's a long time for anything, let alone
for the web.

This is where the standard now "lives": [Link]

HTML is the markup language we use to structure content that we consume on the Web.

HTML is served to the browser in different ways.

 It can be generated by a server-side application that builds it depending on the request

or the session data, for example a Rails or Laravel or Django application.
 It can be generated by a JavaScript client-side application that generates HTML on
the fly.
 In the simplest case, it can be stored in a file and served to the browser by a Web
server.
Let's dive into this last case. Although in practice it's probably the least popular way to
generate HTML, it's still essential to know the basic building blocks.

By convention, an HTML file is saved with a .html or .htm extension.

Inside this file, we organize the content using tags.

5
Tags wrap the content, and each tag gives a special meaning to the text it wraps.

Let's make a few examples.

This HTML snippet creates a paragraph using the p tag:

<p>A paragraph of text</p>

This HTML snippet creates a list of items using the ul tag, which means unordered list, and
the litags, which mean list item:

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

When an HTML page is served by the browser, the tags are interpreted, and the browser
renders the elements according to the rules that define their visual appearance.

Some of those rules are built-in, such as how a list renders or how a link is underlined in blue.

Some other rules are set by you with CSS.

HTML is not presentational. It's not concerned with how things look. Instead, it's concerned
with what things mean.

It's up to the browser to determine how things look, with the directives defined by who builds
the page, with the CSS language.

Now, those two examples I made are HTML snippets taken outside of a page context.

6
HTML page structure
Let's make an example of a proper HTML page.

Things start with the Document Type Declaration (aka doctype), a way to tell the browser this
is an HTML page, and which version of HTML we are using.

Modern HTML uses this doctype:

<!DOCTYPE html>

Then we have the html element, which has an opening and closing tag:

<!DOCTYPE html>
<html>
...
</html>

Most tags come in pairs with an opening tag and a closing tag. The closing tag is written the
same as the opening tag, but with a /:

<sometag>some content</sometag>

There are a few self-closing tags, which means they don't need a separate closing tag as they
don't contain anything in them.

The html starting tag is used at the beginning of the document, right after the document type
declaration.

The html ending tag is the last thing present in an HTML document.

Inside the html element we have 2 elements: head and body:

7
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Inside head we will have tags that are essential to creating a web page, like the title, the
metadata, and internal or external CSS and JavaScript. Mostly things that do not directly
appear on the page, but only help the browser (or bots like the Google search bot) display it
properly.

Inside body we will have the content of the page. The visible stuff.

Tags vs elements
I mentioned tags and elements. What's the difference?

Elements have a starting tag and a closing tag. In this example, we use the p starting and
closing tags to create a p element:

<p>A paragraph of text</p>

So, an element constitutes the whole package:

 starting tag
 text content (and possibly other elements)
 closing tag
If an element has doesn't have a closing tag, it is only written with the starting tag, and it
cannot contain any text content.

That said, I might use the tag or element term in the book meaning the same thing, except if I
explicitly mention starting tag or ending tag.

8
Attributes
The starting tag of an element can have special snippets of information we can attach, called
attributes.

Attributes have the key="value" syntax:

<p class="a-class">A paragraph of text</p>

You can also use single quotes, but using double quotes in HTML is a nice convention.

We can have many of them:

<p class="a-class" id="an-id">A paragraph of text</p>

and some attributes are boolean, meaning you only need the key:

<script defer src="[Link]"></script>

The class and id attributes are two of the most common you will find used.

They have a special meaning, and they are useful both in CSS and JavaScript.

The difference between the two is that an id is unique in the context of a web page; it cannot
be duplicated.

Classes, on the other hand, can appear multiple times on multiple elements.

Plus, an id is just one value. class can hold multiple values, separated by a space:

<p class="a-class another-class">A paragraph of text</p>

9
It's common to use the dash - to separate words in a class value, but it's just a convention.

Those are just two of the possible attributes you can have. Some attributes are only used for
one tag. They are highly specialized.

Other attributes can be used in a more general way. You just saw id and class, but we have
other ones too, like style which can be used to insert inline CSS rules on an element.

Case insensitive
HTML is case insensitive. Tags can be written in all caps, or lowercase. In the early days,
caps were the norm. Today lowercase is the norm. It is a convention.

You usually write like this:

<p>A paragraph of text</p>

not like this:

<P>A paragraph of text</P>

White space
Pretty important. In HTML, even if you add multiple white spaces into a line, it's collapsed
by the browser's CSS engine.

For example the rendering of this paragraph:

<p>A paragraph of text</p>

is the same as this:

10
<p> A paragraph of text</p>

and the same as this:

<p>A paragraph

of
text </p>

Using the white-space CSS property you can change how things behave. You can find more
information on how CSS processes white space in the CSS Spec
I typically favor

<p>A paragraph of text</p>

or

<p>
A paragraph of text
</p>

Nested tags should be indented with 2 or 4 characters, depending on your preference:

<body>
<p>
A paragraph of text
</p>
<ul>
<li>A list item</li>
</ul>
</body>

Note: this "white space is not relevant" feature means that if you want to add additional
space, it can make you pretty mad. I suggest you use CSS to make more space when needed.

11
Note: in special cases, you can use the &nbsp; HTML entity (an acronym that means non-
breaking space) - more on HTML entities later on. I think this should not be abused. CSS is
always preferred to alter the visual presentation.

THE DOCUMENT HEADING

The head tag contains special tags that define the document properties.

It's always written before the body tag, right after the opening html tag:

<!DOCTYPE html>
<html>
<head>

...
</head>

...
</html>

We never use attributes on this tag. And we don't write content in it.

It's just a container for other tags. Inside it we can have a wide variety of tags, depending on
what you need to do:

 title
 script
 noscript
 link
 style
 base
 meta

The title tag

The title tag determines the page title. The title is displayed in the browser, and it's especially
important as it's one of the key factors for Search Engine Optimization (SEO).

12
The script tag
This tag is used to add JavaScript into the page.

You can include it inline, using an opening tag, the JavaScript code and then the closing tag:

<script>
..some JS
</script>

Or you can load an external JavaScript file by using the src attribute:

<script src="[Link]"></script>

The type attribute by default is set to text/javascript, so it's completely optional.

There is something pretty important to know about this tag.

Sometimes this tag is used at the bottom of the page, just before the closing </body> tag.
Why? For performance reasons.

Loading scripts by default blocks the rendering of the page until the script is parsed and
loaded.

By putting it at the bottom of the page, the script is loaded and executed after the whole page
is already parsed and loaded, giving a better experience to the user over keeping it in the head
tag.

My opinion is that this is now bad practice. Let script live in the head tag.

In modern JavaScript we have an alternative this is more performant than keeping the script
at the bottom of the page -- the defer attribute. This is an example that loads a [Link] file,
relative to the current URL:

13
<script defer src="[Link]"></script>

This is the scenario that triggers the faster path to a fast-loading page, and fast-loading
JavaScript.

Note: the async attribute is similar, but in my opinion a worse option than defer. I describe
why, in more detail, on page [Link]

The noscript tag

This tag is used to detect when scripts are disabled in the browser.

Note: users can choose to disable JavaScript scripts in the browser settings. Or the browser
might not support them by default.

It is used differently depending on whether it's put in the document head or in the document
body.

We're talking about the document head now, so let's first introduce this usage.

In this case, the noscript tag can only contain other tags:

 link tags
 style tags
 meta tags
to alter the resources served by the page, or the meta information, if scripts are disabled.

In this example I set an element with the no-script-alert class to display if scripts are disabled,
as it was display: none by default:

<!DOCTYPE html>
<html>
<head>

...
<noscript>

14
 <style>

.no-script-alert {
display: block;
}
</style>

</noscript>

...
</head>

...
</html>

Let's solve the other case: if put in the body, it can contain content, like paragraphs and other
tags, which are rendered in the UI.

The link tag

The link tag is used to set relationships between a document and other resources.

It's mainly used to link an external CSS file to be loaded.

This element has no closing tag.

Usage:

<!DOCTYPE html>
<html>
<head>

...
<link href="[Link]" rel="stylesheet">

...
</head>

15
 ...
</html>

The media attribute allows the loading of different stylesheets depending on the device
capabilities:

<link href="[Link]" media="screen" rel="stylesheet">

<link href="[Link]" media="print" rel="stylesheet">

We can also link to resources other than stylesheets.

For example we can associate an RSS feed using

<link rel="alternate" type="application/rss+xml" href="/[Link]">

Or we can associate a favicon using:

<link rel="apple-touch-icon" sizes="180x180" href="/assets/[Link]">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/[Link]">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/[Link]">

This tag was also used for multi-page content, to indicate the previous and next page using
rel="prev" and rel="next". Mostly for Google. As of 2019, Google announced it does not use
this tag any more because it can find the correct page structure without it.

The style tag

This tag can be used to add styles into the document, rather than loading an external
stylesheet.

Usage:

16
<style>
.some-css {}
</style>

As with the link tag, you can use the media attribute to use that CSS only on the specified
medium:

<style media="print">
.some-css {}
</style>

The base tag

This tag is used to set a base URL for all relative URLs contained in the page.

<!DOCTYPE html>
<html>
<head>

...
<base href="[Link]

...
</head>

...
</html>

The meta tag

Meta tags perform a variety of tasks and they are very, very important.

Especially for SEO.

meta elements only have the starting tag.

The most basic one is the description meta tag:

17
<meta name="description" content="A nice page">

This might be used by Google to generate the page description in its result pages, if it finds it
better describes the page than the on-page content (don't ask me how).

The charset meta tag is used to set the page character encoding. utf-8 in most cases:

<meta charset="utf-8">

The robots meta tag instructs the Search Engine bots whether to index a page or not:

<meta name="robots" content="noindex">

Or if they should follow links or not:

<meta name="robots" content="nofollow">

You can set nofollow on individual links, too. This is how you can set nofollow globally.

You can combine them:

<meta name="robots" content="noindex, nofollow">

The default behavior is index, follow.

You can use other properties, including nosnippet, noarchive, noimageindex and more.

You can also just tell Google instead of targeting all search engines:

<meta name="googlebot" content="noindex, nofollow">

18
And other search engines might have their own meta tag, too.

Speaking of which, we can tell Google to disable some features. This prevents the translate
functionality in the search engine results:

<meta name="google" content="notranslate">

The viewport meta tag is used to tell the browser to set the page width based on the device
width.

<meta name="viewport" content="width=device-width, initial-scale=1">

See more about this tag.

Another rather popular meta tag is the http-equiv="refresh" one. This line tells the browser to
wait 3 seconds, then redirect to that other page:

<meta http-equiv="refresh" content="3;url=[Link]

Using 0 instead of 3 will redirect as soon as possible.

This is not a full reference; Other less-used meta tags exist.

After this document heading introduction, we can start diving into the document body.

THE DOCUMENT BODY

After the closing head tag, we can only have one thing in an HTML document: the body
element.

<!DOCTYPE html>
<html>
<head>

19
 ...
</head>

<body>

...
</body>
</html>

Just like the head and html tags, we can only have one body tag in one page.

Inside the body tag we have all the tags that define the content of the page.

Technically, the start and ending tags are optional. But I consider it a good practice to add
them. Just for clarity.

In the next chapters we'll define the variety of tags you can use inside the page body.

But before, we must introduce a difference between block elements and inline elements.

Block elements vs inline elements

Visual elements, the ones defined in the page body, can be generally classified in 2
categories:

 block elements (p, div, heading elements, lists and list items, ...)
 inline elements (a, span, img, ...)
What is the difference?

Block elements, when positioned in the page, do not allow other elements next to them. To
the left, or to the right.

Inline elements instead can sit next to other inline elements.

20
The difference also lies in the visual properties we can edit using CSS. We can alter the
width/height, margin, padding and border of block elements. We can't do that for inline
elements.

Note that using CSS we can change the default for each element, setting a p tag to be inline,
for example, or a span to be a block element.

Another difference is that inline elements can be contained in block elements. The reverse is
not true.

Some block elements can contain other block elements, but it depends. The p tag for example
does not allow such option.

TAGS THAT INTERACT WITH TEXT

The p tag
This tag defines a paragraph of text.

<p>Some text</p>

It's a block element.

Inside it, we can add any inline element we like, like span or a.

We cannot add block elements.

We cannot nest a p element into another one.

By default browsers style a paragraph with a margin on top and at the bottom. 16px in
Chrome, but the exact value might vary between browsers.

This causes two consecutive paragraphs to be spaced, replicating what we think of a

"paragraph" in printed text.

21
The span tag
This is an inline tag that can be used to create a section in a paragraph that can be targeted
using CSS:

<p>A part of the text <span>and here another part</span></p>

The br tag
This tag represents a line break. It's an inline element, and does not need a closing tag.

We use it to create a new line inside a p tag, without creating a new paragraph.

And compared to creating a new paragraph, it does not add additional spacing.

<p>Some text<br>A new line</p>

The heading tags

HTML provides us 6 heading tags. From most important to least important, we have h1, h2,
h3, h4, h5, h6.

Typically a page will have one h1 element, which is the page title. Then you might have one
or more h2 elements depending on the page content.

Headings, especially the heading organization, are also essential for SEO, and search engines
use them in various ways.

The browser by default will render the h1 tag bigger, and will make the elements size smaller
as the number near h increases:

22
Lists in HTML
We have 3 types of lists in HTML:

 Unordered Lists
 Ordered Lists
 Definition Lists

Unordered Lists
Unordered lists are created using the <ul> tag.
Each item in the list is created with the <li> tag.

Example:

<ul>
<li>First</li>
<li>Second</li>

23
</ul>

Output:

• First
• Second

Ordered Lists
Ordered lists are created using the <ol> tag.
Each item in the list is created with the <li> tag (just like unordered lists).

Example:

<ol>
<li>First</li>
<li>Second</li>
</ol>

Output:

1. First
2. Second

Difference Between Ordered and Unordered Lists

 Unordered lists use bullets (•) before each item.
 Ordered lists use numbers (1, 2, 3...) before each item.

24
LINKS
Links are defined using the <a> tag.
The link destination is set via its href attribute.

Example:

<a href="[Link] here</a>

Between the opening and closing tag, we write the link text.

Absolute vs. Relative URLs

 Absolute URL → Contains full path, including domain name.
Example:

<a href="[Link] here</a>

 Relative URL → Path relative to current domain.

Example:

<a href="/test">click here</a>

Important:

 /test → leads to [Link]

 test → leads to [Link] if you are on
[Link]

Link with Image

Links can contain images or other HTML elements (except another <a> tag):

<a href="[Link]
<img src="[Link]">

25
</a>

Open Link in New Tab

Use the target="_blank" attribute:

<a href="[Link] target="_blank">open in new tab</a>

CONTAINER TAGS AND PAGE STRUCTURE

HTML provides several container tags that help structure content.

1. <article>
Represents a self-contained piece of content.
Examples: Blog post, News article, Forum post.

<article>
<h2>A blog post</h2>
<p>Here is the content...</p>
</article>

2. <section>
Represents a section of a document.
Usually contains a heading and related content.

<section>
<h2>A section of the page</h2>
<p>Some content here...</p>
</section>

26
3. <div>
Generic container with no semantic meaning.
Often used with class or id for styling or grouping.

<div class="container">
<p>Some text...</p>
</div>

4. <nav>
Represents navigation menus.

<nav>
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ol>
</nav>

5. <aside>
Represents sidebar or extra content related to the main page content.

<aside>
<p>This is a quote or sidebar content.</p>
</aside>

6. <header>
Represents page header or section header.

<header>
<h1>Website Title</h1>
<p>Tagline goes here</p>

27
</header>

7. <main>
Represents the main content area of the page.
There should be only one <main> per page.

<main>
<p>Main content here...</p>
</main>

8. <footer>
Represents footer of page or section.

<footer>
<p>Footer content...</p>
</footer>

FORMS
Forms allow user interaction and data submission.

Basic Structure
<form action="/submit-url" method="POST">
...
</form>

 action → URL where data will be sent.

 method → HTTP method (GET or POST).

28
Common Input Types
Input Type Usage Example
text Single-line text <input type="text" name="username">
input
email Email validation <input type="email" name="email">
password Hidden characters <input type="password" name="password">
number Numeric input <input type="number" name="age" min="18"
max="60">
hidden Hidden data <input type="hidden" name="token" value="123">
submit Submit button <input type="submit" value="Submit">
reset Reset form <input type="reset">
radio Choose one option <input type="radio" name="color" value="red">
checkbox Multiple options <input type="checkbox" name="fruit"
value="apple">
date/time/ Date & time <input type="date" name="dob">
month pickers
file File upload <input type="file" name="upload">
color Color picker <input type="color" name="fav-color">
range Slider <input type="range" min="0" max="100">

Textarea
Multi-line input field:

<textarea name="message" rows="4" cols="50"></textarea>

Select Dropdown
<select name="color">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
</select>

With option groups:

<select name="color">
<optgroup label="Primary">
<option value="red">Red</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Others">

29
 <option value="green">Green</option>
</optgroup>
</select>

TABLES
Tables display data in rows and columns.

Basic Structure
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
</tr>
</table>

Explanation

 <table> → Defines table

 <tr> → Table row
 <th> → Table header (bold by default)
 <td> → Table data cell

30
Table Content
The content of a table is defined using the <td> tags, which represent table data cells.
Each <td> goes inside a <tr> (table row) element.

Example:
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>

Explanation
 <table> → Defines the table.
 <tr> → Represents a table row.
 <th> → Table header cell (usually bold and centered).
 <td> → Table data cell (regular content).
 The first <tr> often contains headers; subsequent rows contain data.

31
Default Browser Rendering
Without CSS styling, browsers render the table like this:

Column 1 Column 2 Column 3

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3

 Header cells appear bold and centered.

 Data cells are normal text, left-aligned.
 Borders are not visible unless added via CSS or the border

More tags to organize the table

You can add 3 more tags into a table, to have it more organized.

This is best when using big tables. And to properly define a header and a footer, too.

Those tags are

 thead
 tbody
 tfoot
They wrap the tr tags to clearly define the different sections of the table. Here's an example:

32
<table>
<thead>
<tr>
<th></th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Row 1</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<th>Row 2</th>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Footer of Col 1</td>
<td>Footer of Col 2</td>
</tr>
</tfoot>
</table>

33
Table caption
A table should have a caption tag that describes its content. That tag should be put
immediately after the opening table tag:

<table>
<caption>Dogs age</caption>
<tr>
<th>Dog</th>
<th>Age</th>
</tr>
<tr>
<td>Roger</td>
<td>7</td>
</tr>
</table>

MULTIMEDIA TAGS: AUDIO AND VIDEO

In this section I want to show you the audio and video tags.

The audio tag

This tag allows you to embed audio content in your HTML pages.

This element can stream audio, maybe using a microphone via getUserMedia(), or it can play
an audio source which you reference using the src attribute:

<audio src="file.mp3">

By default the browser does not show any controls for this element. Which means the audio
will play only if set to autoplay (more on this later) and the user can't see how to stop it or
control the volume or move through the track.

To show the built-in controls, you can add the controls attribute:

<audio src="file.mp3" controls>

Controls can have a custom skin.

You can specify the MIME type of the audio file using the type attribute. If not set, the
browser will try to automatically determine it:

<audio src="file.mp3" controls type="audio/mpeg">

34
An audio file by default does not play automatically. Add the autoplay attribute to play the
audio automatically:

<audio src="file.mp3" controls autoplay>

Note: mobile browsers don't allow autoplay

The loop attribute restarts the audio playing at 0:00 if set; otherwise, if not present, the audio
stops at the end of the file:

<audio src="file.mp3" controls autoplay loop>

You can also play an audio file muted using the muted attribute (not really sure what's the
usefulness of this):

<audio src="file.mp3" controls autoplay loop muted>

Using JavaScript you can listen for various events happening on an audio element, the most
basic of which are:

play when the file starts playing

pause when the audio playing was paused

playing when the audio is resumed from a pause

ended when the end of the audio file was reached

The video tag

This tag allows you to embed video content in your HTML pages.

This element can stream video, using a webcam via getUserMedia() or WebRTC, or it can
play a video source which you reference using the src attribute:

<video src="file.mp4">

By default the browser does not show any controls for this element, just the video.

Which means the video will play only if set to autoplay (more on this later) and the user can't
see how to stop it, pause it, control the volume or skip to a specific position in the video.

To show the built-in controls, you can add the controls attribute:

35
<video src="file.mp4" controls>

Controls can have a custom skin.

You can specify the MIME type of the video file using the type attribute. If not set, the
browser will try to automatically determine it:

<video src="file.mp4" controls type="video/mp4">

A video file by default does not play automatically. Add the autoplay attribute to play the
video automatically:

<video src="file.mp4" controls autoplay>

Some browsers also require the muted attribute to autoplay. The video autoplays only if
muted:

<audio src="file.mp3" controls autoplay muted>

The loop attribute restarts the video playing at 0:00 if set; otherwise, if not present, the video
stops at the end of the file:

<video src="file.mp4" controls autoplay loop>

You can set an image to be the poster image:

<video src="file.mp4" poster="[Link]">

If not present, the browser will display the first frame of the video as soon as it's available.
You can set the width and height attributes to set the space that the element will take so that
the browser can account for it and it does not change the layout when it's finally loaded. It
takes a numeric value, expressed in pixels.
Using JavaScript you can listen for various events happening on an video element, the most
basic of which are:
play when the file starts playing
pause when the video was paused
playing when the video is resumed from a pause

36
ended when the end of the video file was reached

37