What are Block-level elements?
Block-level elements are elements that usually begin on a new line, and occupy the entire line width to form block items. Some of these elements include:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>.
This is the Module 3 of a 6-Module Tutorial on Web Design Course for Beginners. You can enroll for the full tutorial by clicking on the relevant button below. You can also go through the first 2 modules by selecting the relevant buttons below.
In this tutorial, we divided block-level elements into groups for easy understanding and use. Let us work through them individually.
Document Meta Elements
We grouped all block-level elements that usually appear after the <!DOCTYPE> and before the <body> element together under: Document Meta elements.
These elements are important part of your html document. Elements discussed here include:
<head> <base> <html> <link> <meta> <style> <title>
The Html Root Element <html>
This is a root element required in all html documents. It comes first before other elements will follow.
Attributes
It takes the global attributes.
Example
<!Doctype html>
<html>
<head> … </head>
<body> … </body>
</html>The Document Metadata Element <head>
This block-level element is used to provide general information about html document. This information is called metadata, usually provided using the <meta> element within the <head> start and end tags. Some of the elements that are used to provide metadata within the <head> element include: <title>, <link>, <meta> and <script> elements.
Attributes
It takes on global attributes.
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta>
<link>
</head>
<body> </body>
</html>The Document Base URL Element <base>
This element is used to specify a base URL to be used for all relative URLs within a html document. There should be only one base url in an html document. It is usually placed in the document head section.
Attributes
It takes on the global attributes alongside href and target attributes.
Example
<base href= https://www.kmacims.com.ng/index.php target= “_blank”>The Meta Element <meta>
This element is used to specify metadata in an HTML document. It usually appears within the head section of an HTML document.
Attributes
Use global attributes and the following:
charset (charset = “utf-8”), content (is used to specify values for name and http-equiv attributes), http-equiv, name (values include: keywords, author, description, application-name, referrer, generator.)
Example
<meta charset= “utf-8”>
<meta name= “keyword” content = “Kmacims, creative education, “>
<meta name = http-equiv = “refresh” content = “2;url=https://www.kmacims.com.ng/blog”> <!--This will redirect page after 2 seconds-->
<meta name = “viewport” content = “width=device-width initial-scale=1 >The Document Title Element <title>
This element shows in the <head> section of the HTML document, and is used to define the title of the HTML document. The title so defined here is shown in the browser’s title bar.
Attributes
Use global attributes.
Example
<html>
<head>
<title>KmacIMS | Education Annex</title>
</head>
<body>The Style Information Element <style>
This element is used to provide style information for a HTML document.
Within the start and close tags of the <style> element is contained the CSS information for the current webpage.
Though a <style> can be included in the <body> section of the HTML, it is recommended that it be included in the <head>.
Attributes
Use global attributes and the following: type, media, title (used to specify an alternate stylesheet).
Example
The Link Element <link>
This element is usually used to create a relationship between a HTML document and an external resource, especially, a stylesheet.
If you choose not to use the <style> element to style your webpage, you can link your HTML document to an external CSS file using the <link> element.
The link element usually appears in the <head> section of the HTML document.
It can also be used to specify a location for a site icon, called favicon.
Attributes
In addition to the global attributes, we use the following attributes with the link element.
Href to specify the URL or location of the resources you are linking to.
Hreflang used to specify the language of linked resources. It is mostly used when you want to create content for a specific local audience. You might use ‘es’ for Spanish, ‘fr’ for French, and so on. E.g. to create a content for UK audience, you can use
<rel = “alternate” hreflang = “en-uk” href= https://www.kmacims.com.ng/blog>
Media used to specify a media type or device the resource linked to is designed for. Media can be print, braille, aural, all, tv, projection or screen. The resource with a media type will run only when the media type/ media query is true.
E.g. <link rel= “stylesheet” media = “screen and (min-width: 300px)” href= “css/media/mobile.css”>
As this attribute is used within the link element to specify the type of content that should be loaded. Contents that may be preloaded include font, style, script, audio, video, embed, image, document, and so on. The as attribute can only be used when the preload or prefetch attribute is used.
E.g. <link rel= “preload” as = “font” >
Crossorigin this attribute is used to indicate whether Cross-Origin Resource Sharing (CORS) should be used to get the resource linked to. CORS is a method used in order to safely access cross-origin resources.
A cross-origin resource is a resource that originated from a different host/domain or a resource that is accessed using a different port or protocol not used by the current page. Such resource could be a video, image, script or document. Crossorigin attribute has the following values: anonymous or “ ”, and use-credentials.
E.g. <link rel=“preload” href= “font/myfont.ttf” as= “font” crossorigin= “ ” type= “font/TTF”>
Rel this attribute is used to specify the relationship between the HTML document and the resource linked to. It is usually used alongside the href attribute.
The rel attribute has the following values: stylesheet, icon, alternate.
e.g. <link rel = “icon” href= “fav/favicon.ico”>
Title is used to define a preferred or an alternate stylesheet. When using this attribute, one should be careful because if it is wrongly used, a stylesheet may be ignored, for example:
<link rel= “stylesheet” href= “main.css” type= “text/css”>
<link rel= “alternate stylesheet” title=“Green Caption” href= “gmain.css” type= “text/css”>
<link rel= “alternate stylesheet” title=“Blue Caption” href= “bmain.css” type= “text/css”>
Sizes this attribute is used for favicons, when the rel = “icon” is used. It is used to specify size of the icon on a screen.
E.g. <link rel="icon" type="image/png" href="images/favicon.png" sizes="16x16">
Type is used to define the type of content that is being linked to.
E.g. type = “text/css”, type = “image/png
Other non-standardized attributes include: method, prefetch, target and disabled.
Page Layout Elements
Here we discussed the block-level elements that will help you layout your website. Before applying CSS to a webpage, you will first of all structure the page components using some of the HTML5 elements that will be discussed in this module. At the end of this module, you will learn how to create page layouts and containers where your website texts and multimedia will be placed.
The beauty of any website depends on the layout. That is, how you position key items on the pages of your website.
Page layout does not just determine the beauty of a website but also affects its accessibility and interactivity by users.
The question we must answer in this case is: do people easily locate what they are looking for in your site or do they wander about and exit out of frustration?
Building an accessible and interactive rich content site begins with a formidable structure. And that structure is laid out using page layout HTML5 elements.
In this module, we shall learn how to structure a website using page layout HTML5 elements.
The Document Body Element <body>
This block-level element is used to specify the overall html document contents. It is required in every HTML document and must appear once in a webpage. All contents and layout elements including the <article>, <section>, <div>, <aside>, <footer>, etc will appear within the <body> element in a html document.
Attributes
It takes on the global attributes and the following specific attributes. However, the following attributes are deprecated in HTML5. This means that the following attributes might work if applied, but is not supported in HTML5. These attributes can be easily applied using CSS. The deprecated attributes include:
Attributes | Description |
alink | Applies color to a hyperlink when it is selected |
background | Applies background image to the webpage |
bgcolor | Applies background color to the webpage |
bottommargin, rightmargin, leftmargin, topmargin | Applies bottom, right, left and top margins to the webpage |
link | Applies default color to a link that has not been visited |
text | Applies default text color to the webpage |
vlink | Applies color to a link that has been visited |
Let’s look at an example:
Since the above attributes are not supported in HTML5, does it mean that the <body> element does not support specific attributes in HTML5?
The answer is no.
HTML5 supports other event trigger attributes which are usually associated with JavaScript. Yet, they can be coded in HTML5 as will be illustrated here.
You will notice that most of the events are self-explanatory. Some of these event trigger attributes include:
| ATTRIBUTE | DESCRIPTION |
onbeforeprint | Triggers when a document is sent to the printer |
| onafterprint | Triggers after a document have been successfully printed |
onbeforeunload | Triggers when a webpage is being unloaded or closed |
onblur | Triggers when a document loses focus |
onfocus | Triggers when a document comes to focus |
onerror | Triggers when a document did not properly load |
onlanguagechange | Triggers when a user changes the current document language |
onload | Triggers after a document has finished loading |
onmessage | Triggers when the current document receives a message |
onoffline | Triggers when internet connection is lost |
ononline | Triggers when internet connection is established |
Onpopstate | Triggers when navigating a webpage using the forward/backward button |
onresize | Triggers when a document is resized |
onunload | Triggers when page is closed or removed |
onstorage | Triggers when data in a web storage area changes. NB: web storage was introduced in HML5 to replace cookies because of its speed, security & capacity. |
Example
<html>
<head>
</head>
<body>
<section>
<article> <p> </p> </article>
</section>
</body>
</html>The Article Element <article>
This HTML5 element is used to create a subsection or independent content section within a section or the body of an HTML document.
Each post in a HTML document should appear in one article section, thus, each section may have multiple article elements. Also, each article should have a header.
Attributes
This element uses global attributes.
Examples
<article>
<header><h2 id="sec-c">My Article Heading</h2></header>
<p>For further enquiry, contact us at:</p>
<address>
No. 199 Aba Road, <br> Old Umuahia, Umuahia, <br> Abia State, Nigeria.<br>
<a href="tel:+2348037321899">+23408037321899</a><br>
<a href="mailto:kmacims@yahoo">kmacims@yahoo.com</a>
</address>
</article>
The Section Element <section>
This HTML5 element is used to define a standalone section in a HTML document. It can be used to define different sections of a website.
Attributes
Use the global attributes.
Example
<section>
<header><h1>Introduction to HTML</h1></header>
<p>…</p>
</section>
The Aside Element <aside>
This HTML5 element is used to specify documents that are related to the main HTML documents. They usually come in the form of left or right sidebars on a website.
Attributes
The aside element takes on global attributes.
Example
The Content Division Element <div>
This HTML element is usually used as a container for flow contents. It can be used to group contents of a HTML document together for easy styling. It should be used in places where the <article> element is not appropriate.
Attributes
It takes on global attributes.
Example
<div style="color:blue; background-color:silver; font-size: 18px;">
<p>Acceptable conditions<p>
<details>
<summary>Keep Cold</summary>
Always put the product in a refrigerator to ensure that its temperature is always below 2<sup>o</sup> Celsius.
</details>
</div>The Quotation Element <blockquote>
This HTML5 element is used to create an indented quotation in a document.
Attributes
It takes on the global attributes and the cite attribute. The cite attribute is used to provide the URL of the source information.
Example
<blockquote cite= “https://developer.mozilla.org/en-US/docs/Web/HTML/Element”>
<p>The HTML <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.</p>
</blockquote><cite>from MDN Web Docs</cite>The Main Element <main>
The HTML5 main element is used to specify the major or dominant content within the HTML <body> element. There should be one <main> element in a HTML document, and its content should be unique throughout the website. The idea of using <main> is to attach a level of importance to a content in an html document.
Attributes
Use the global attributes
<body>
<main role="main">
<article>
<p>this is a main content section of an article</p>
</article>
<article>
<p>this is another article within the main content</p>
</article>
</main>
</body>Example
The Paragraph Element <p>
This element is used to create a paragraph in an HTML document. When a paragraph element is used, a block of text is created, separating one block from the other.
Attributes
This element uses the global attributes.
Example
<p>The judge announced that the case is totally dismissed because the plaintiff could not supply substantial evidence to prove his claims</p>
<p>The defendant on his own, who has proofs decided to sue the plaintiff for libel and character assassination, demanding a fine of $50,000.00.</p>
The Details Element <details>
This HTML5 element is used to create an interactive disclosure widget such that when it is clicked, it toggles between open and close state. This element can be used with the <summary> element, where the summary element displays a summary of the detailed information with a triangular icon. When clicked, the disclosed text can be hidden.
Attributes
It can take on the global attributes, and the open attribute. The open attribute is a Boolean with a True or False value. The default is false.
Example
The Summary Element <summary>
As shown above, this element is used together with the <details> element. It is used to specify the visible text within the <details> element. When a text within the <summary> element is clicked, it toggles the show and hide state of the text enclosed by the <details> element.
Attributes
Use the global attribute.
Example
<details>
<summary>Politics in Nigeria</summary>
<p>It is not a new thing that <span>politics</span> in <span>Nigeria</span> is for the risk takers. This tells why people could leave their current jobs and business to pursue politics. This is because in Nigeria, <q cite="https://www.kmacims.com.ng/blog/"><small>People believe that politics is the easiest way to become a multi-millionaire.</q> </small>How can we change this mentality and make people to be accountable to the populate?</p>
</details>The Navigation Section Element <nav>
This HTML element is used to create internal and external navigation links in a website. Common navigation link includes menus bar in a webpage.
Attributes
It uses the global attributes
Example
<nav class=”menuitem”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
The Dialog Element <dialog>
This element is used to display a dialog box. It was introduced in HTML5 to help web developers create a native modal window or popup dialog for users to interact with. However, this element will not be functional without a JavaScript code.
For example, the displayed dialog in the browser window cannot do anything when you click on either of the continue or the cancel button.
To get the above displayed dialog, we used the following code. Add it in any <section>, <article> or <div> element.
Example
<dialog open>
<p>What do you want to do?</p>
<button>Continue</button> <button>Cancel</button>
</dialog>
Attributes
It uses the global attributes, but the tabindex attribute is prohibited in the dialog element. Another attribute that could be used is the open attribute.
The open attribute is used if we want users to see the dialog, but we can hide it and create a button which users will click to launch the dialog window.
Let us illustrate in a simple way how you can create a modal dialog so that users can interact with it.
Add the following lines of code: (NB: If your code does not work in Firefox, use Chrome browser for testing).
The Horizontal Rule <hr>
The thematic horizontal rule, simply <hr> is used to specify thematic break between paragraph-level elements or sections in an htlm document. Using simple <hr> will give us something like this.
Attributes
The element could take the following deprecated attributes in addition to global attributes: align, color, noshade, size, and width.
Let’s apply the attributes to our code, then we have:
Example
<p>Microsoft Word is a popular word processing application predominantly used by organizations, institutions, businesses and individuals for efficient communication delivery across the board…</p>
<hr >
<p>Microsoft Excel is a spreadsheet application…</p>
The Meter Element <meter>
This element can be used to show a given value within a range of values. For instance, to check disk space or usage, a fractional part of a class, etc.
Attributes
In addition to the global attributes, use the following: max, min, low, high, optimum, value, & form.
The value attribute should be specified and must fall between the min and max values.
The low attribute is used to specify the upper bound in the low end of the range and should be more than or equal to the min value but less than the high and max values.
The high attribute is used to specify the lower bound in the high end of the range and should be less than or equal to the max value but greater than the min values.
The optimum attribute is used to specify the preferred value within the range. When this value is specified alongside the low and high attributes, it indicates the following:
- That the lower range is preferred, if the optimum value is less than or equal to the low but greater than or equal to the min
- That the upper range is preferred, if the optimum value is greater than or equals to the high but less than or equal to the max
- That neither high nor the low values are better if the optimum value is between the low and the high
Example
<p>The figure below shows the level of water in the Geepee thank located upstairs </p>
<label for="level">Water level:</label><meter min="0" max="100" low="40" high="75" optimum="60" value="65">65%</meter>
The Progress Bar Element <progress>
The progress indicator element is used to show the progression of a given task completion. The <meter> element can be used to gauge an item, but we use the progress element to measure task completion.
A good example of the use of a progress bar is a download progression bar. It can also be used to indicate a stage of course completion. Let us take this example:
Attributes
Use the global attributes, and max, value attributes. The value attribute is used to specify the current stage of the project completion. If the value attribute is not specified, the progress indicator will be in an indeterminate state.
Example
The Footer Element <footer>
The footer element is used to create a footer content in a sectioning content. The content could be within the <body> element, <section>, <article> or <blockquote>.
Attributes
It takes on the global attribute.
Example
<section>
<p>
Uche was born in the United States of America. When he grew older, he decided to relocate to the Bahamas, where he became a citizen. Most of his works were dedicated to the less privileged in the Bahamas. At age 54, the US government decided to award him for his selfless service.
</p>
<footer style="background-color:silver;">@ Chike the Golden Boy.</footer>
</section>A typical example of a footer is given below.
Heading Block-level Elements
Headings are important part of any document, because they give a summary caption for the contents of the document. They are also important aspects of a good Search Engine Optimization (SEO) strategy.
Understanding how to create headings, which heading element is required for a particular purpose, and the impact of the heading elements to SEO and users’ accessibility to a webpage is an important aspect of web designing.
In SEO, search engines use the headings to index the structure and content of a webpage. Headings also help screen readers to navigate a webpage and skip contents that are not relevant to them. When using heading elements <h1> – <h6> you should always remember that <h1> is the most important and <h6> the least important.
How do we implement the headings element? Let’s dive into it.
The Introductory Header Element <header>
This HTML5 element <header> is used to group introductory contents together. In an article, there may be a group of introductory contents including, title, author, date, image, etc. To group this introductory information together, we use the <header> element. This element can also be used to wrap a section’s table of contents.
Attributes
The element uses only the global attributes.
Example
<section>
<article>
<header>
<h1>Introduction to Printing and Editing in MS Word</h1>
<p><strong><em>Become an Expert in 30 Minutes</em></strong></p>
<p><em>Posted on Friday, 11<sup>th</sup> January, 2019, By Dr. Kimberlinger Esdovanbe</em></p>
</header>
<p>Microsoft Word is a popular word processing application predominantly used by organizations, institutions, businesses and individuals for efficient communication delivery across board...</p>
</article>
</section>The Multi-Level Heading Element <hgroup>
The <hgroup> HTML5 element is used to group the <h1> – <h6> heading elements together to form a multi-level heading so that each of the <h1> – <h6> will not create individual sections.
Let’s get this clear. When you want to use two heading elements such as <h1> and <h2>; so that <h1> will be the main heading and <h2> as a subheading such that the h2 element will not be captured in the documents outline; in this case, use the <hgroup> element.
Attributes
The attributes include the global attributes.
<hgroup>
<h1>Coding in HTML made Easy</h1>
<h2>Start Coding like an Expert in 7 Days</h2>
</hgroup>The Sectioning Heading Elements <h1> … <h6>
The <h1> – <h6> heading elements are used to create section headings or titles in a html document. The <h1> is the highest heading level followed by <h2> through <h6>. It is important that we begin a page with <h1> as the main heading title, followed by <h2>, <h3>, and so on as subtitles.
<h1>The Greatest Earthquake in History</h1> Level 1
<h2>Causes of the Earthquake</h2> Level 2
<h3>Incessant Deforestation</h3> Level 3
<h3>Erosion and unattended Gullies</h3>Level 3
<h2>Remedies to Future Occurrence</h2> Level 2
<h3>Afforestation</h3>Level 3
Attributes
The elements take on global attributes.
Examples
<h1>The Greatest Earthquake in History</h1>
<h2>Causes of the Earthquate</h2>
<h3>Incessant Deforestation</h3>
<h2>Remedies to Future Occurrence</h2> Text Description and List Elements
What if we want to describe some terms, or if we want to preserve a particular typing format such that browser will not disorganize them, or want to list some items in a given order. In this case, there are block-level elements that will help us achieve this.
The Description Elements <dd><dt> and <dl>
These three elements are used together to describe a term.
The <dl> element is used to enclose the list of terms to be defined.
The <dt> element is used to specify the term to be defined., and
the <dd> element is used to provide the description of the terms specified by <dt> in the <dl> list of items.
Attributes
They use the global attributes, but the <dd> element may use the non-standardized nowrap attribute with a yes or no value. The default value is no.
Example
<p><Strong>Definition of Terms</strong></p> <dl> <dt>HTML</dt> <dd>HTML simply means HyperText Markup Language used in Web designing.</dd> <dt>CSS</dt> <dd>CSS means Cascading styleSheet, used in decoration and provision of aesthetic for the site. </dd> <dt>JS</dt> <dd>JS is short for JavaScript, used in providing interactivity in frontend web designing.</dd> </dl>
The Contact Address Element <address>
Why should you use the <address> element instead of the <p> element?
The address HTML5 element is usually used to provide contact information of a person, group, institution or an organization that owns or maintains a document or part of a document. This element may contain contact information such as a physical address, email address, website address, phone number, social media handle, or any other address that is related to the document.
It is not suitable for arbitrary addresses. An arbitrary address is an address that has no relationship with the contact information. If such address exists, it’s better to handle it with the <p> element.
Attributes
This element takes on global attributes.
Example
<address> This article is written and maintained by <a href="https://joashclerk.net/author"> Joash Clerk.</a><br> You can contact <a href="https://www.joclekfoundation.com/contact"> Joclek Foundation</a> for more information. <br> Visit us at Joclek Foundation, 43 Ugunde Str.,<br> Umuahia, Abia State, Nigeria.<br> Follow us in <a href="https://www.facebook.com/jcf"> Facebook</a> and <a href="https://twitter.com/jcf">Twitter.</a> </address> <p> This article is written and maintained by <a href="https://joashclerk.net/author"> Joash Clerk.</a><br> You can contact <a href="https://www.joclekfoundation.com/contact"> Joclek Foundation</a> for more information. <br> Visit us at Joclek Foundation, 43 Ugunde Str.,<br> Umuahia, Abia State, Nigeria.<br> Follow us in <a href="https://www.facebook.com/jcf"> Facebook</a> and <a href="https://twitter.com/jcf">Twitter.</a> </p>
The Preformatted Text Element <pre>
In HTML, while typing, if you press the tab or give double spacing, the browser will close up the gaps. If you want your spaces and gaps to remain as you created them, then you will need to use the <pre> element.
This element is used to preserve a text format in the browser display. When the <pre> element is used, text format including spaces and lines breaks created within the texts are preserved in the browser display. It is advised to use a monospace font such as Courier when using the <pre> element.
Attributes
Use the global attributes.
Example
<pre>
Uche said, "I know
the day Greg
will come
\\ //
|| ||
No one is allowed in!
</pre>
<p>
Ada was born after the death of her father
Ugozuerem Ofordile. [ The death ] of her
father scattered all the plans of her
{ mother }.
This was adopted by Ugoskypet.
</p>
<pre>
Ada was born after the death of her father
Ugozuerem Ofordile. [ The death ] of her
father scattered all the plans of her
{ mother }.
This was adopted by Ugoskypet.
</pre> The List Item Element <li>, <ul> and <ol>
These elements are used to show items in a list. The <li> element is always a child element to either the <ol> or the <ul> elements. The <ul> is called the Unordered List while the <ol> is called the Ordered List. The <ul> represents list items with bullets while the <ol> represents list items with alphabets, or numerals.
Attributes
The <li> element has the global attributes and the following: value which must be a number, and type (which is deprecated). The type attribute has the following values (a: lower case, A: uppercase, 1: numbers, I: upper roman numerals, and i: lower Roman numerals).
The <ul> element has the following deprecated attributes in addition to the global attributes: compact, and type. The type attribute has the following values (circle, disc, and square).
The <ol> element has the following attributes together with the global attributes: compact (deprecated), type (which has the following values: 1: for numbers, I & i: for upper and lower Roman numerals, A & a: for upper and lower letters), reversed (show in reversed order), and start (indicate the starting value).
Examples
<div>
<p>Buy the following items from the supermarket:</p>
<ol type="1" reversed start="8">
<li>Baking Flour.</li>
<li>Peak Milk.</li>
<li>Golden Penny Sugar.</li>
<li>Golden Penny Margarine.</li>
<li>Baking Powder.</li>
</ol></div>
<p>Deliver the following to the office:</p>
<ul type="square">
<li>Sugar</li>
<li>Milk
<ol>
<li value="3">Peak 3 Nos</li>
<li value="1">Cowbell 1 No</li>
</ol>
</li>
<li>Beverage
<ul type="circle">
<li>Milo</li>
<li>Ovaltine</li>
</ul>
</li>
</ul>
</div> Media Elements
We used the term media here to refer to block-level elements that allow you to attach an external item into a web page. These items may be in the multimedia category or external embedded content category.
Multimedia items include images, sound and motion images supported by HTML. Before HTML5, some of these items require the support of plugins to play in browsers, but with the advent of HTML5, there is support for specific audio and video formats across browsers.
For example, HTML5 support .MP4, .WebM and .Ogg video formats, and .MP3, .Wav and .Ogg audio files.
The Audio Element <audio>
The audio element is used to embed sound files in a HTML document. Such files are automatically played back by all HTML5 supported browsers without the need for plugins.
It has a very simple syntax.
However, the syntax could be much if we use the <source> element to provide multiple audio files with different formats so that the browser can choose the one it understands.
Attributes
This element uses the global attributes in addition to the following: autoplay (a Boolean attribute that automatically plays the file); controls (user interactive controls); loop (a Boolean attribute that enables the audio to replay itself continuously); muted (a Boolean value that makes the audio silent as it plays); preload (provides audio hints for best user experience. It has the following values: none; metadata – fetches audio metadata; auto – allows audio to be downloaded); src (optional to the <source> element for fetching and embedding the audio file).
Examples
Simple Example:
<audio src="Day1A.aac" controls>
Using <source> and <figure> elements:
<figure> <audio autoplay controls preload="metadata" loop> <source src="Day1B.acc" type="audio/acc"> <source src="Day1B.mp3" type="audio/mp3"> </audio> <figcaption>Class Tutorials</figcaption> </figure>
The Embed Video Element <video>
Just like the audio element, video element is used to embed a video file or movie clip to a HTML document. It also has the same syntax and share some attributes such as autoplay, preload, src, controls and muted.
Attributes
Use the global attributes and: autoplay, buffered, crossorigin, controls, height, width, muted, preload, src, poster (used to specify a URL of an image that will be on display when the video is downloading).
Examples
<video controls width="250" height= “200”> <source src="/media/myvideo.webm" type="video/webm"> <source src="/media/myvideo.mp4" type="video/mp4"> No browser support for embedded videos. </video>
The Image Source Element <source>
This element is used to provide multiple resource sources or file formats for the <picture>, <audio> and <video> elements. When this element is used, then the src attribute will not be used within the audio or video element. When this element is used to provide multiple file formats, then the browser will select the file format that is most suitable to the user’s device.
Attributes
Use global attributes and the following: src (required for <audio> and <video> elements, but ignored for <picture> element; srcset (required for the <picture> element, but ignored in <audio> and <video> elements; type (specify MIME type); media (indicate media query); sizes (indicate different sizes to suit different display layouts).
Example
<audio controls> <source src="myaudio.ogg" type="audio/ogg"> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.wav" type="audio/wav"> No browser support for available audio. </audio>
The Media Track Element <track>
The <track> element is used together with the <audio> or <video> elements to specify text file that contain tracks, subtitles and caption to the embedded audio or video. Track files must be are specified in WebVTT (.vtt files) format.
Attributes
Use global attributes and the following: default (enable track except if there is another appropriate track), kind (used to specify the kind of text track to be used. Values include: subtitles, which is the default, captions, descriptions, chapters, metadata), label (used to specify the title of text track), src (used to specify a valid URL for the text track (.vtt file). It must be specified), srclang (used to specify the language of the track text data. It must be specified if kind = subtitles).
Example
<video width="400" height="300" controls>
<source src="myvideos.mp4" type="video/mp4">
<source src="myvideos.ogg" type="video/ogg">
<track src="mysubitles.vtt" kind="subtitles" srclang="en"label="English">
</video>
The Figure and the Figcaption Elements <figure>, <figcaption>
Both elements are usually used together. The <figure> element is used as a container for contents such as audio, video, chart, image, etc files, while the <figcaption> is used as a legend; to provide a caption to the content.
Attributes
Both elements usually take global attributes.
Example
<figure> <img src="Cake.jpg" alt="Cake" height="300" width="450"> <figcaption>Elegant Wedding Cake</figcaption> </figure> <figure> <img src="design.jpg" alt="Good design"> <figcaption>My Creative Designs: Sample 1</figcaption> </figure>
The Picture Element <picture>
This element is used to attach an image resource to a web page. Though the <img> element can be used also, this element gives web designers greater flexibility to provide different sources that will match different media sizes.
When using the <picture> element, the <source> and <img> elements are provided within the picture element. The <source> element is used to specify different sources and MIME types, while the <img> element is used to provide backward compatibility to browsers that does not support the <picture> element. The <img> element is also used when the browser did not find any match within the <source> element.
When a browser loads a page with the <picture> element, it will first examine each of the <source> element’s srcset, media, and type attributes in order to select a compatible image that best matches the current page layout and display of the user’s device.
You can use the <source> attribute to provide different image formats for browser compatibility; you can also use it to provide different image density or quality for different displays and internet connection speeds.
Attributes
Use the global attributes.
Example
<picture> <source srcset="/images/mylogo-500x500.jpg" media= “(min-width: 600px)” type= “image/jpg”> <source srcset="/images/mylogo.240x240.png" media= “(min-width: 300px)” type= “image/png”> <img src= “/images/mylogo.jpg” alt= “my Logo”> </picture>
The Inline Frame Element <iframe>
The <iframe> element is used to embed a html document inside another html document. It can be used to embed resources from another website into your website.
You may use it to embed part of your own domain in a section of your webpage. It can also be used to embed applets and media contents into a webpage.
However, it has been noted that iframes pose some security concerns. For instance, hackers may maliciously modify your webpage or hijack user’s and steal their sensitive information. Also, it may negatively impact on SEO.
Attributes
In addition to the global attributes, iframe element has the following attributes:
allowfullscreen – allows iframe to be placed in a fullscreen mode.
frameborder – Used to add borderline to an iframe with values of 0 or 1. It is not recommended. Use CSS border syntax instead.
height – used to specify the height of frame
width – used to specify the width of frame
src – used to point to the source or location of the resource to be embedded to the current document
srcdoc – used to specify HTML code that will be executed in an iframe. It will override the URL specified by the src attribute. But if the browser does not support srcdoc, src will become active.
Name – used to specify a name for the iframe
Sandbox – used to add security and user restrictions to the content in an iframe. If the value is left empty, all restrictions will be applied. To apply some of the restrictions, use space to add the restrictions you want. Sandbox has the following values:
- allow-forms – this allows the form to be submitted, else forms will be blocked
- allow-modals – this permits the modal window to open
- allow-orientation-lock – this will permit resource to lock screen orientation
- allow-pointer-lock – will permit resource to use pointer lock
- allow-popups – this will allow for a popup window to open
- allow-presentation – This will allow a resource to start a presentation session
- allow-scripts – will allow the resource to run scripts, but will not permit popups
- allow-same-origin – this is used to activate same-origin policy. It is recommended that you should not use allow-scripts and allow-same-origin at the same time. If you use both at the same time, then, the sandbox attribute will no longer be secured.
- allow-top-navigation – this will permit resource to navigate to the top-level browsing context
Example
<iframe src="https://www.kmacims.com.ng/" height="400" width="500"></iframe>
The Embed External Content Element <embed>
Unlike the iframe, the embed element is not a block-level element, however, it is used to insert or embed applications, multimedia and interactive contents from external sources into an HTML document. You can use this element to attach videos, browser plugins, flash and java applications into your website.
Attributes
In addition to the global attributes, the element takes on the following attributes:
height – specify the height of the content
width – specify the width of the content
type – specify the type of external resource to embed
src – specify resource location.
Example
<embed height="300" width="400" src="A1.mp4" type="video/mp4">
The Object Element <object>
The object element may be preferred than the embed element or be used to nest an embed element when using an older browser. The object element is also used to include an external resource into a webpage. But in this case, this external resource will be handled by a plugin or treated as an image. Examples of resource you may use the object element to include in a webpage include pdf, java applets, and flash player.
Since applets and flash are no longer popular with browsers these days, you may not need to use the object element.
Attributes
In addition to the global attributes, include the following:
data – specifies the address or URL of the resource,
form – specifies the ID of a form which the object belongs to or is associated with
height – specifies the height of the content
name – specifies a name for the object element
type – must be specified together with the data attribute. It tells the type of media specified in the data attribute
usemap – specifies the name of a map to be used by the object. It is a hash-name of a map, e.g. “#Nigeria” – a hash followed by the name of the map.
Width – specifies the width of object content
typemustmatch – a Boolean attribute that indicates that the external resource should be embedded if and only if the value of the type attribute matches with the type of the resource provided on the data attribute.
Example
<object width="400" height="400" data="myobject.swf" type=”application/x-shockwave-flash”></object>
<object width="800" height="400" data="files/myfile.pdf" type=”application/pdf”></object>
The Canvas Element <canvas>
The canvas element is used together with JavaScript to draw graphics and animations on a html document. On its own, it is empty without a script to implement
Attributes
It takes on the global attributes with the height and width attributes.
See the illustration of using the canvas element.
Example
First, create a canvas element.
The Content Template Element <template>
This element is used to create HTML code that will not be displayed to the users when a page is loaded. But the content of an <template> element can be made available to the user using JavaScript. The content of an <template> element can be used and reused only when there is a need for it.
Attributes
Use global attributes
Example
