In the Article

We'll continue our learning of HTML tags. We will be discussing how to embed audio and video on your web page, the types of input available to us, and little bit about <table> tag. Let's start.

<table>

If you want to create a table on your web page, you'll need <table> tag. There are many tags used with <table> to make it more precise and easy to read. Some of them are optional, and some are required to create a table. General flow of <table> tag is as follows:

1. optional <caption> tag which gives the reader a hint of what the table is about.
2. zero or more <colgroup> element which categorizes the columns.
3. optional <thead> element which let the browser know which row is the head of the columns.
4. optional <tbody> element which let the browser know part of the table that has the content.
5. <tr> element is required to define a row of cells. <th> and <td> is used for the heading and data cell respectively.
6. optional <tfoot> used to define a set of rows summarizing the columns of the table.

We will create a school timetable to understand <table> element more clearly. We used CSS to give the border as border attribute in <table> element has been deprecated.

<audio>

<audio> element is used to embed audio on your web page. src attribute is required to provide the URL of the audio or we can use ` element if you want to provide more than one source for the audio. Some of its attributes:

• autoplay: This is a boolean attribute, and if provided, will play the audio as soon as it can without waiting for the whole audio to load.

• controls: If present, will provide controls to allow the user to play, stop, and adjust the volume.

• controlslist: If specified, helps the browser to select what controls to show for the audio whenever controls attribute is provided. Accepted values are nodownload, nofullscreen, and noremoteplayback.

• loop: This is also a boolean attribute, and if provided, the audio player will automatically seek back to the start upon reaching the end of the audio.

• muted: A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.

<video>

<video> tag is used to embed video on your web page. You can use it to embed audio too but <audio> element may provide a better user experience. We provide the path of the video in src attribute and can use other attributes to adjust height and width or to decide whether to autoplay the video or not or whether we want to show the browser's default video controls or not. Some of the attributes like controls, controlslist, loop, muted, and autoplay have the same functionality as they do in the <audio> element. In some browser, autoplay doesn't work if no muted attribute is present. More attributes of <video> element are:

• autopictureinpicture: A boolean attribute which true will automatically toggle between picture-in-picture mode when the user switches the screen.
• disablepictureinpicture: If present, prevents the browser from suggesting a Picture-in-Picture context menu.
• height: Absolute value only, decides the height of the video's display area in pixels.
• width: Absolute value only, decides the width of the video's display area in pixels.
• poster: URL for an image to be shown while the video is loading. If not specified, then nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

<input>

If you want to create a form to accept inputs or just simply want to get data from the user we use <input> tag. The main functionality for this tag is given by its type attribute. We'll be learning about the different values of type attribute.

1. button: A push button with no default behavior.
2. checkbox: A check box allowing single values to be selected/deselected.
3. color: Provides a color-picker to select a color of the user's choice
4. date: Provides a calendar for entering a date.
5. email: Provides a text field that accepts only email-address as a value.
6. file: Provides a control that lets the user select/upload a file.
7. hidden: A control that is hidden but whose value is submitted to the server. Basic usage of this type can be seen in search query.
8. radio: A radio button, allowing a single value to be selected out of multiple choices with the same name value.
9. range: Provides control for entering a number whose exact value is not important.
10. reset: Provides a button that resets all the values of every other type.
11. submit: Provides a button that accepts all the values from different type and submits the form.
12. text: Provides a single-line text field.