You can add video elements to a web page using the HTML5 <video> tags.
Video TAGS
The <video> element requires a src attribute to specify the URL of the file. You can use a relative URL if the file is hosted on your site or you could use an absolute URL to access files hosted on another site. There are a number of other attributes you may want to use. These are listed below, along with a description of what each is used for.
ATTRIBUTES
autoplay – Specifies that the video should start to play automatically when the page loads. In some browsers autoplay only works when the sound is muted. It does not work in some mobile browsers.
controls – Tells the browser to supply controls for playback.
height – specifies the height of the video element.
loop – Tells the browser to keep repeating the video
muted – specifies that the video should be silenced
poster – specifies the URL of an image to display while loading.
preload – tells the browser what to load when the page loads. You can choose from the following values.
none – tells the browser not to load the video until play is pressed.
auto – tells the browser to load the video on page load
metadata – tells the browser to collect information about the video, but not load the video until play is pressed.
src – The value specifies the URL of the audio file.
width – specifies the width of the video element.
Below is an example of a video element. The src value is a relative URL, since the file is hosted on this site. It utilizes the controls, autoplay, loop and muted attributes (no values are required for these).
There are three types of video files you can use with the video tags.
MP4 – This is the most commonly used file type and is supported by all modern browsers
WebM – This file type is supported in most browsers at this time.
Ogg – Currently not supported by Safari.
Source Tags
You can supply more than one video file by using source tags. Let’s say you want you use an Ogg file, but knowing that Safari does not support the Ogg file type, you may want to add a backup MP4 file as well. You can do this by supplying two <source> tags between the opening and closing video tags. The browser will try the first source and if it is unable to play, it will try the next. The source tags take the src and type attributes. Note, the src attribute is not needed on the opening video tag when using source tags.
<video controls autoplay muted>
<source src="/wp-content/uploads/2021/01/waterfall.ogg" type="video/ogg" />
<source src="/wp-content/uploads/2021/01/waterfall.mp4" type="video/mp4" />
Your browser does not support html video tags.
</video>
Summary
Video can be added to a website using video tags. You can supply the source file using the src attribute on the opening video tag or by using source tags between the opening and closing video tags. You can supply multiple files using multiple source elements.
You may want to add sound effects to your site or allow users to play music. In this lesson you will learn how to add audio to a website using the HTML5 <audio> tags.
Audio Tags
The <audio> tag requires a src attribute to specify the URL of the file. You can use a relative URL if the file is hosted on your site or you could use an absolute URL to access files hosted on another site. There are a number of other attributes you may want to use. These are listed below, along with a description of what each is used for.
Attributes
controls – Tells the browser to supply controls for playback
autoplay – Specifies that the audio should start to play automatically
loop – Tells the browser to keep repeating the audio
muted – specifies that the audio should be silenced
preload – tells the browser what to load when the page loads. You can choose from the following values.
none – tells the browser not to load the file until play is pressed.
auto – tells the browser to load the file on page load
metadata – tells the browser to collect information about the audio file, but not load the file until play is pressed.
src – The value specifies the URL of the audio file
Below is an example of an audio element. The src value is a relative URL, since the file is hosted on this site. It utilizes the controls attribute (no value is needed). The preload attribute is set to “auto”.
There are three types of audio files you can use with the audio tags.
MP3 – This is the most commonly used file type and is supported by all modern browsers
WAV – This file type is supported in most browsers at this time, with the exclusion of IE.
OGG – Currently not supported by Safari or IE.
Source Tags
You can supply more than one audio file by using source tags. Let’s say you want you use an OGG file, but knowing that Safari does not support the OGG file type, you may want to add a backup MP3 file as well. You can do this by supplying two <source> tags between the opening and closing audio tags. The browser will try the first source and if it is unable to play, it will try the next. The source tags take the src and type attributes. Note, the src attribute is not needed on the opening audio tag when using source tags.
You may also want to display a message to a user if their browser does not support the HTML5 audio tag. This can be done easily by adding some text between the opening and closing audio tags as in the example below.
<audio controls>
<source src="/wp-content/uploads/2021/01/elvis.ogg" type="audio/ogg" />
<source src="/wp-content/uploads/2021/01/elvis.mp3" type="audio/mpeg" />
Your browser is not compatible with our audio files
</audio>
Summary
Audio can be added to a website using audio tags. You can supply the source file using the src attribute on the opening audio tag or by using source tags between the opening and closing audio tags. You can supply multiple files using multiple source elements.
Developers often leave comments in their code. Comments are used to provide information to other developers and/or your future self regarding a web page or a particular section of code. Developers also use comment tags to remove elements from the screen without actually deleting the code. This can be very useful for testing and debugging purposes. In this lesson you will learn how to add comments to your HTML code using the <!-- comment tags -->.
Comment Tags
The opening comment tag <!-- has a less than symbol, followed by an exclamation mark, followed by two dashes. The closing tag --> has two dashes followed by a greater than symbol. Anything between the opening and closing tags is part of the comment and will not be displayed on the screen. Check out the comment in the code below.
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- This is a comment -->
<h1>Hello World!</h1>
</body>
</html>
The HTML code above will result in a page that displays “Hello World!” on the screen. If you inspect the source code in the browser, you will see that the comment is present. It is not completely ignored by the browser, but it is never displayed on the screen.
Note: Never put any sensitive data in a comment. It will be viewable by anyone who has access to the web page and knows how to inspect the source code.
Click here to learn more about how to inspect the source code in the browser.
Multi-line Comments
The example above shows a single line comment, but the tags can be used to wrap multiple lines of code. Anything between the tags will be treated as a comment and will not appear on the screen. In the following example three lines of code are commented out and replaced with two new lines.
Summary
Comment tags offer a way for developers to make notes within the code. They also provide a way to temporarily remove elements from the screen without deleting lines of code.
Though many elements are designed to add structure to a web page, others are designed to add information. These informational elements are referred to as semantic elements. In this lesson we will learn about the semantic elements available in HTML and how they can be used.
strong
The <strong> element indicates important text. Browsers display in bold.
<p>Create <strong>strong</strong> text</p>
Create strong text
em
The <em> element indicates emphasis should be placed on the text.
<p>Add <em>emphasis</em> to text</p>
Add emphasis to text
abbr
The <abbr> element is used for both abbreviations and acronyms.
<p><abbr title="Doctor">Dr.</abbr> Seuss is one of my favorite authors.</p>
<p>The <abbr title="International Space Station">ISS</abbr> is traveling at approximately 17,000 <abbr title="miles per hour">mph</abbr>.</p>
Dr. Seuss is one of my favorite authors.
The ISS is traveling at approximately 17,000 mph.
cite
The <cite> element is used when referencing a piece of work, such as a book, film or research paper.
<p>Have you read <cite>Green Eggs and Ham</cite> by Dr. Seuss?</p>
Have you read Green Eggs and Ham by Dr. Seuss?
dfn
The <dfn> element is used when defining a term for the first time. It typically renders in italic.
<p>A <dfn>web server</dfn> is a special computer that is constantly connected to the internet and is optimized to send web pages.</p>
A web server is a special computer that is constantly connected to the internet and is optimized to send web pages.
address
The <address> tags are placed around contact details for the author of a page or article. This could be a physical address or just a phone number or email.
<address>
<p>
<a href="mailto:test@example.com">test@example.com</a><br>
123 Example Way<br>
Somecity, CA
</p>
</address>
The <ins> element indicates content that has been inserted into the document.
<p>This is an <ins>extremely</ins> important concept.</p>
This is an extremely important concept.
del
The <del> element indicates deleted text.
<p>This is an <del>extremely</del> important concept.</p>
This is an extremely important concept.
s
The <s> element is used when something is no longer relevant or accurate, but should not be deleted.
<p>Cost: <s>$25</s> $20</p>
Cost: $25 $20
blockquote
The <blockquote> element is used for longer quotes that should be it’s own paragraph. p tags are placed inside of the blockquote tags. Browsers will typically indent blockquotes.
<blockquote cite="https://www.brainyquote.com/quotes/martin_luther_390009">
<p>I have held many things in my hands, and I have lost them all; but whatever I have placed in God's hands, that I still possess.</p>
</blockquote>
I have held many things in my hands, and I have lost them all; but whatever I have placed in God’s hands, that I still possess.
q
The <q> element is used for a short quote that is placed within a paragraph.
<p>Martin Luther once said, <q cite="https://www.brainyquote.com/quotes/martin_luther_140721">God writes the Gospel not in the Bible alone, but also on trees, and in the flowers and clouds and stars.</q></p>
Martin Luther once said,
God writes the Gospel not in the Bible alone, but also on trees, and in the flowers and clouds and stars.
Summary
Though the visual outcome of these tags is often similar to other tags, that is not the point. Semantic elements provide information or meaning that can be used by a browser or a screen reader to make the content more understandable and accessible to all users.
It is very common for a web page to take in user information. For example, many websites have a registration form allowing people to sign up for access to the site. These sites would also contain a form for logging in. An e-commerce site would need a form to take in a buyer’s shipping address as well as payment information. The image below shows one of the most recognizable forms on the web.
In this lesson you will learn how to create a form using the HTML <form> tags.
Note: When a form gets submitted, the data is often sent to a server for processing. There is likely some JavaScript validation involved as well. We’ll look at those concepts in a later lesson. For the rest of this lesson, we’ll focus on the basics of building a form.
Form Tags
The <form> tags are used to create a form element. This element contains the form controls (inputs, submit buttons, etc), which you will use to take in user input.
Action Attribute
The opening form tag takes an action attribute with a URL value. When the form is submitted, the request is sent to the server hosting the action URL along with the form data for processing. You can get a glimpse at how this works by filling in any of the forms on this page and clicking the submit button. Each of the forms on this page utilize https://postman-echo.com, which is a site designed specifically for testing forms. When you submit one of the forms on this page, a new tab or window should open and you will see a bunch of text on the screen. This text includes data regarding your form submission. Look closely and you’ll see the value or values you typed into the form inputs.
Method Attribute
Most forms also have a method attribute with a value of get or post.
The get method is generally used for retrieving information or passing non-sensitive data. The form data is sent with the request in the form of URL parameters. Notice the following form uses the get method.
If you enter a name and click submit on the form above, you will be taken to the action URL https://postman-echo.com/get. Look closely at the URL and you’ll notice something was added to the end. For example, if you entered the name ‘Brian’, you would see https://postman-echo.com/get?name=Brian. Information from the form was added to the URL as query parameters. Note: you would not want to use the get method when sensitive data is involved, such as passwords or credit card numbers, since the information is not secure.
The post method is used when sensitive data needs to be sent, such as usernames, passwords, and credit card numbers.
Add a fake password to the form above and submit it. You will be taken to the action URL of the form. No query params are added to the URL this time. When the post method is used, the data is sent a different way and your information is not exposed in the URL.
Form Elements
Forms can contain a number of different elements. The list below summarizes some of the more common form elements.
<input> – Creates an input control. There are many input types which you can see listed in the next section.
<textarea> – Creates a multiline input control.
<label> – Creates a label for an input.
<select> – Creates a dropdown list.
<option> – Creates an option for a dropdown list.
<optgroup> – Defines a group of related options in a dropdown list.
<button> – Creates a clickable button.
<fieldset> – Groups related elements in a form.
<legend> – Creates a caption for a fieldset element.
<datalist> – Specifies a list of pre-defined options for input controls.
<output> – Defines the result of a calculation.
Form Controls
Form controls are typically thought of as the elements that users interact with. Examples include the input, textarea, and select elements. Controls are named using the name attribute. Each control also has a value. The name and value of the control are what gets sent to the server when the form is submitted. In the following example, the name of the input control is search and the value is whatever the user enters.
If you enter “HTML” in the search bar and click submit, you’ll notice the URL has ?search=HTML. The value of the name attribute is search and the value of the value attribute is HTML. These are sent to the server as a key-value pair. When more than one control is used on the form, there will be an & between the key/value pairs.
Input
Many different form controls can be created using the input element. It is one of the most common elements found on a form. The input tag takes the type attribute, which determines what kind of input is created. Check out the different types available below.
button
checkbox
file
hidden
image
password
radio
reset
submit
text
color
date
datetime-local
email
month
number
range
search
tel
time
url
week
The form below contains some of the input types listed above. Feel free to interact with them and see how they look and behave.
[input-examples]
Label
The label element is used to create a label for a control element. Each of the inputs in the code below have a label before the input. The value of the for attribute of the label should be the same as the value of the id attribute of the input element.
Note: Label and input elements are inline elements, so they will line up horizontally by default. Styling has been applied to the forms on this page so they stack vertically instead.
The textarea control is used to collect longer amounts of text. For example, an online test that has an essay question would need to use a textarea element to take in a paragraph or multiple paragraphs of text. Along with the name, id, and placeholder attributes, the textarea below uses the rows attribute. The rows attribute defines the number of rows (or the height) of the textarea element. You can also use the cols attribute to control the width.
<form action="https://postman-echo.com/post" method="post" target="_blank">
<textarea name="textarea" id="textarea-example" placeholder="Enter some text here..." rows="10"></textarea>
<input type="submit" value="submit" />
</form>
[textarea-example]
Select
The select element is used to create a dropdown list. It works in conjunction with the option element, which is used to form each option for the dropdown list. Notice in the code below, the first option says ” — select an animal — “, but the value attribute is empty. This acts like placeholder text for the dropdown.
If you try clicking the submit button on the form below without selecting an animal, the form will not submit and instead you should see a popup message telling you to select an item from the list. This is due to the fact that the select control has the required attribute and the first option does not have a value.
The required attribute can be used on control elements to provide a small amount of form validation. The form will not submit unless all controls with the required attribute have been filled in or selected. The select example above has required=”true“.
Note: In HTML5 it is not necessary to include the =”true“. You can simply add required to the opening tag of the control element.
A table is a way to organize information into rows and columns. Think “Google Spreadsheet”. A table can be a useful tool for displaying various kinds of information on a web page. Examples include; schedules, rosters, bank transactions, user data, and much more. In this lesson you will learn how to create a table using the HTML <table> tags.
The table tags create the container for the table content. This content is laid out row by row, using <tr> tags. Cells are added to each row using either <th> tags or <td> tags. The code above shows a table with two rows. The table headers are displayed in bold and the table data is displayed with normal font, as seen below.
Company
Website
Email
Wombaco
https://wombaco.com
support@wombaco.com
Row Headers
You can create column headers as in the example above, but you can also create row headers as well. The example below includes both.
Mon
Tue
Wed
Hours Worked
8
6
4
Money Earned
$160
$120
$80
Notice the first <th> in the first row is empty. It is a necessary placeholder to get “Mon” to display in the second column.
In some cases a cell will need to span multiple columns or rows. For example, a class schedule may have a two hour block for a class on Tuesday. In order to span multiple columns add the colspan attribute to a <th> or <td> with a numerical value representing the number of columns to span. To span multiple rows, use the rowspan attribute. You can see both colspan and rowspan in the example below.
<table>
<tr>
<th></th>
<th>Mon</th>
<th>Tue</th>
</tr>
<tr>
<th>10am - 11am</th>
<td rowspan="2">Algebra</td>
<td>Physics</td>
</tr>
<tr>
<th>11am - 12pm</th>
//No td here since he one above spans into this cell
<td>PE</td>
</tr>
<tr>
<th>12pm - 1pm</th>
<td colspan="2">Lunch</td>
//No td here since he one above spans into this cell
</tr>
</table>
Did you notice the comments in the code above? When you span a column or a row, you will not need to provide an element for each cell the spanning element takes up. Take a look at the resulting table below. “Algebra” spans two rows and “Lunch” is spanning two columns.
Mon
Tue
10am – 11am
Algebra
Physics
11am – 12pm
PE
12pm – 1pm
Lunch
Table Organization
You can build some really robust tables with just the four tags we saw above, but we may be able to improve by adding some tags to organize content. For this purpose we have the <thead>, <tbody>, and <tfoot> tags available.
The <thead> tags are used to organize header content, <tbody> tags wrap the rows that make up the main content of the table, and the <tfoot> tags wrap the table footer. These tags can make it easier to provide specific styles to each section of the table. For example, with long tables, you could allow for scrolling of the body, while the table header and footer remain in place.
Images are essential to any good website. In this lesson we will learn how to add an image using the HTML img tag.
<img> Tags
We can insert an image into a web page using an <img>tag. This tag requires a src attribute. You can think of this as the source of the image, which is generally a relative URL, if the image is stored within your site files, or an absolute URL, if the image is hosted on another site. In the example below, we see a relative URL, since the image is hosted on this site.
<img src="wp-content/uploads/2020/05/baby-wombat.jpg" width="360" height="240" alt="A baby wombat in the grass" />
Width and Height
You’ll want to specify a width and height for the image. These days, image dimensions are usually set using CSS in order to create responsive images (images that size differently based on the user’s screen dimensions). Since this is an HTML lesson, we’ll stick with the width and height attributes. Notice the code for the image above. The width attribute has a value of 360 and the height has a value of 240. This sets the image at 360 pixels wide and 240 pixels tall.
Alternate Text
The alt attribute should be included in every img tag. It provides alternative text in the case that the image does not load or the person is using a screen reader. In the example below, the src value for the image is incorrect. As a result the image is unable to load. Notice the alt text that appears instead.
<img src="wp-content/uploads/2020/05/baby-wombat5.jpg" width="360" height="240" alt="A baby wombat in the grass" />
Links are what we use to move around the web. In this lesson you will learn how to create a link to a web page, a link to a specific section of a web page, and an email link.
Hyperlinks
Hyperlinks are a foundational part of the World Wide Web. In essence, the web is a bunch of hypertext documents connected by hyperlinks. When you click one of these links, you are typically directed to a new web page, or moved to a different section of the page you are on. Other times, the link opens an email client.
Link Tags
To create a link, we use the <a> tags. The opening tag requires the href attribute. The value of the href is the URL of the page you want to open. If you are unfamiliar with the term URL, you can think of it as the address or location of the page or file you want to access. The example below shows how to create a link to IMDB’s website.
<a href="https://www.imdb.com">IMDB</a>
Notice the letters IMDB that are placed between the opening and closing tags. This text will appear on the screen. The link does not have to be a text link though. You can wrap an image, an image and text, or just about any other element that you want to turn into a link. If you move your mouse over a link, the arrow turns into a hand, indicating that the element is clickable. You can test this on the link below.
Link To A Page On Another Site
The example above uses an absolute URL. In order to link from one website to another, the href must point to the full web address (absolute URL). For example, to create a link on another website that points to this page, it would need to include the protocol (https://), the domain name (www.wombaco.com), and the path (/2020/05/16/html-links). So, the absolute URL for this web page is https://www.wombaco.com/2020/05/16/html-links and the link would look like this
Often, when linking to another website, you will want to keep your own website open in the user’s browser so they can easily get back to it. One way to do this is to add the target attribute with _blank as the value. This will cause a new tab or new window to open, depending on the user’s browser settings.
If you want to create a link to a page within the same site you can use a relative URL. The relative URL is simply the path. For example, a link from this page back to the html course page would only require an href value of /html and the link would look like this
<a href="/html">HTML</a>
Link To A Section Of A Page
At times you may want to link to a particular section of a page. You can do this by adding a # at the end of the URL, followed by the id of the element you want to scroll to.
<a href="/html#lesson-7" target="_blank">Go to lesson 7 on the HTML page</a>
Click the link below to test this out. Notice when it opens, it does not put you at the top of the page, but scrolls down to Lesson 7.
You can create an email link by giving the href a value of mailto: followed by an email address. For example, to create a link that opens an email addressed to support@wombaco.com, the link would look like this
Links are what we use to move around the web. We create links using <a> tags, which require the href attribute. The value of the href attribute needs to be an absolute URL to link to a page on another site. You can use a relative URL to connect to a page on the same site. You can link to a specific element on a page by adding a hashtag at the end of the URL, followed by the element’s id. To create an email link, you use mailto: followed by an email address. To open a link in a new tab or window, add target=”_blank”.
In this lesson you will learn how to create ordered lists (numbered), unordered lists (bulleted), description lists (definitions), and nested lists.
Ordered List
An ordered list is one in which the order matters and is synonymous with a numbered list. To create an ordered list you will use the ol tags. Think of this element as the container for the list items. You then use li tags to create the list items.
As the name suggests, an unordered list is one in which the order doesn’t matter. Todo lists are often made using the ul tags and will result in a bulleted list. The li tags are used to create the list items.
If you want to display a list of terms and definitions, you would create a description list. Use the dl tags to define the list type. These lists are a little different because they consist of pairs of terms and definitions. Use the dt tags to create an element for a term, and then the dd tags to create the description.
<dl>
<dt>Computer</dt>
<dd>A programmable device that is capable of storing, retrieving, and processing data.</dd>
<dt>Website</dt>
<dd>One or more World Wide Web pages made available by an individual, company, educational institution, government or organization and usually connected by hyperlinks.</dd>
<dt>Server</dt>
<dd>A computer in a network that provides a service.</dd>
</dl>
Nested Lists
A list can be nested inside another list. This can be very useful when you want to create levels of indentation on the page. The following example shows a list of auto makers and includes a nested list with some of the Honda models. Notice the different levels of indentation as well as the different types of bullets.
Create the first list using the ul tags and add your list items with li tags. Create the nested list by adding another ul element within the appropriate list item tags and add your list items.
In HTML you can create bulleted lists, numbered lists, description lists, and nested lists. An unordered List is a bulleted list made using ul tags for the container and li tags for the list items. An ordered List is a numbered list made using ol tags for the container and li tags for the list items. A description List is a list of terms and descriptions made using dl tags for the container, dt tags for the terms, and dd tags for the descriptions. A Nested List is a list placed inside another list.
In this lesson you will learn about creating paragraph text in HTML using p tags.
p Tags
The p tags are used to create paragraph elements on a web page. This is the normal size text. Think of a blog post that has a title, maybe a subtitle, the date, and then the general body of the post. The body text is typically going to be made using p tags. Browsers will render this in the default font-size, which is typically 16px, unless otherwise specified. The font-weight will be normal, unlike the headings, which are bold.
<p>This is a paragraph. It is a distinct section of writing made up of one or more sentences that maintain a single theme.</p>
<p>This is another paragraph. The web browser will display a new paragraph on a new line with some spacing between them.</p>
