iFrame Markup
Notice that the page loads with a bookmark, #water,
to display the water image.
<iframe src="../rga.php#water" title="HTML5 Visual Effects" > </iframe>
Dialog
The dialog tag displays
a popup, modal dialog or subwindow.
That means the dialog
will cover elements on the page that
are underneath
it, on the Z axis.
The dialog element's not implemented in
all browsers. Yet some browsers will enable
HTML markup, with open or close
properties, but not with JavaScript
show() or hide() methods.
This page modifies the style's opacity value
to hide or show the dialog.
Simple Dialog
A simple dialog displays while overlapping or covering other elements, on the Web page. Tap on the dialog below, to close it. See the markup and JavaScript below, to learn how to display, then hide, the dialog with one click.
Simple Dialog Markup
Notice the property open, in the markup below,
isn't declared as an attribute-value pair.
You can also markup the dialog with close.
With the close property, you'll see nothing.
You can use HTML markup with open
and close properties.
However, as mentioned above, JavaScript's hide() and show()
methods aren't implemented yet, in all browsers.
To open and close a dialog programmatically,
required modifying the style's opacity value, at this time.
When the dialog tag receives full support on the Web, then
the JavaScript show() and hide()
methods should work fine.
<dialog id="diag" style="float:right; border:solid 1px blue" onclick="closeDialog() open > Click Dialog to Close </dialog>
Simple Dialog JavaScript
/**
* Close modal dialog.
* Obtain the dialog's id.
* Assign the style opacity
* a value of zero.
*/
function closeDialog(){
var diag = document.getElementById('diag');
diag.style.opacity = 0;
}
Dialog Opens & Closes
Click to close the following dialog.
To open the dialog, prepare button markup
with an onclick event listener which
restores the dialog's opacity.
If the button's markup is
immediately below the dialog,
then you might not see the button, because
the dialog will cover the button.
If you tap the dialog to close it,
you might not be able to
activate the button's onclick
event handler.
Why is that? Since dialogs act like popup
windows they cover elements on the Web page.
I'm using opactity = 0 , to hide
the dialog. Therefore the dialog still exists
and still covers the button. You can see
the button, but it's under the invisible
dialog. Therefore when you click on the
button, the invisible dialog's event handler activates
instead of the button's event handler.
Usually the dialog would cover the button based on the browser's size and orientation. On most desktops you could float the button left and the dialog right, preventing overlap. However on most phones and other devices in portrait orientation, the dialog would still overlap the button.
As mentioned earlier, the dialog tag is not implemented
in every browser. On my current FireFox Web browser,
the JavaScript show()
and hide() methods aren't implemented.
In that case, you can assign the opacity style value as 1
to display and 0 to hide, a dialog.
There are a number of tricks you can
try to activate the button's onclick
event handler, such as removing the dialog's event handler and
changing it's z value. For this example, I just
used a header with some padding to always keep the
button below the dialog box.
In the following event handler you see a dialog box
with a solid blue border, that says Click to Close Dialog
.
Under the dialog box is a button that
says Click to Open Dialog
.
Open Dialog Button:
Markup: Dialog Opens & Closes
The following markup was applied to the dialog box that closes and button that opens, the dialog box.
<dialog id="dia" style="border:solid 1px blue;" onclick="dialogClose()" open > Click to Close Dialog </dialog> <!!-- Add padding to prevent overlap --> <h4 style="padding-top:8%;"> Open Dialog Button: </h4> <button id="bt" onclick="dialogOpen()"> Click to Open Dialog </button>
JavaScript: Dialog Opens & Closes
The following JavaScript was applied to the dialog box that closes and button that opens, the dialog box.
var d = null;
/**
* Obtain the dialog
* box by ID.
* Assign opacity of zero,
* which makes the dialog invisible.
*/
function dialogClose(){
d = document.getElementById('dia');
if(d != null) {
d.style.opacity = 0;
}
}
/**
* Assign opacity of one,
* to the dialog, which
* makes the dialog visible.
*/
function dialogOpen(){
if(d != null){
d.style.opacity = 1;
}
}
Template
Templates, like many other HTML elements
allow developers to hide and show
their content.
However, with this example,
the template's not added to the
body until the user clicks the
Show Template
button.
In this case scroll to the location of the new template. The template displays at the bottom of the page, because this particular JavaScript just appends the page. Additionally despite the fact that the template has an ID. You must create a new ID at the bottom of the page, to find the template.
HSL
Template Markup
<template> <h2 class="ct"> HSL </h2> <img class="wct" src="../../thumbnails/ss-hsl.png" width="256" height="256" > </template>
Template Styles
These styles center the text and image on the page.
.ct{
text-align:center;
}
.wct{
float:none;
display:block;
clear:both;
text-align:center;
margin:0px auto 0px auto;
}
Template JavaScript
On this page there's only one template.
Therefore you can access template[0]
of the document.
Additionally I added an element, at the bottom
of the page with an id of temp.
That enables code to scroll down to the new template.
function showTemplate() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
window.location ="#temp";
}
CSS
The following internal styles were applied to elements on this page.
dt,abbr{
font-weight:bold;
}
.ex,.w100{
width:60%;
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
iframe{
display:block;
overflow:scroll;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.w100{width:100%;}
#bt{
display:block;
text-align:center;width:50%;
margin-left:auto;
margin-right:auto;
}
dialog{
text-align:center;
}
@media (orientation: portrait) {
.ex{
width:100%;
}
}
Summary
Semantic elements describe the meaning of HTML tags; for the developer, search engines, or Web crawlers, and Web browsers. The developer, search engines and Web browsers can respond to semantic elements, based on their meaning, which helps organize and describe Web content.
Non semantic elements simply separate sections in a Web page, following either default rules defined for the tags,
or customized styles.
Many Web developers consider div and span, as non sematic elements.
This page listed most of the semantic elements, with their meanings.
We also saw how to apply a set of HTML semantic tags including
mark, ins, i, del, sup, abbr, sub, address, article, aside,
description lists, figures, figure captions and iframe.
Most
markup sections included the markup with the result of the markup; what the markup renders
to your Web page.
Perhaps iframe offers one of the more interesting tags,
as it allows you to include content from another page.
Unusual HTML5 Skills
See the markup, CSS and results of various HTML5 elements, with styles and some unusual or seldom used techniques.
