The <data> tag is used to add a machine-readable translation of a given content. This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser. If the content is time- or date-related, use the <time> element instead.
Attributes: the <data> element supports the global attributes. Specific attributes are:
value; value: machine-readable format -, which specifies the machine-readable translation of the content of the element.
Syntax : <data> . . . </data>
some examples
example
The following example displays product names but also associates each name with a product number:
Cherry Tomato
Beef Tomato
Snack Tomato
Codes:
<p class="spec">The following example displays product names
but also associates each name with a product number:</p>
<ul style="margin-left:4vw;">
<li><data value="21053">Cherry Tomato</data></li>
<li><data value="21054">Beef Tomato</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>
The <datalist> tag specifies a list of pre-defined options for an <input> element. The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data. The <datalist> element's "id" attribute must be equal to the <input> element's "list" attribute (this binds them together). The <datalist> allows users to either choose from the specified answers, or to type in their original ones.
<select> vs. <datalist> : with a <select> element the dropdown options are the only acceptable values. With datalists, the options are suggested values only: you can still enter any other value.
P.S.: the <datalist> tag is not supported in Safari 12.0 (or earlier). Note that in the real-world solutions, datalists are rarely used.
Attributes: this element has no other attributes than the global attributes, common to all elements.
<div>
<form class="example" id="myForm">
</form>
<button class="example" onclick="opnieuw()">test-2</button>
</div>
<script>
function opnieuw() {
var x = document.createElement("INPUT");
x.setAttribute("list", "myList");
document.getElementById("myForm").appendChild(x);
var y = document.createElement("DATALIST");
y.setAttribute("id", "myList");
document.getElementById("myForm").appendChild(y);
var z = document.createElement("OPTION");
z.setAttribute("value", "A");
document.getElementById("myList").appendChild(z);
var a = document.createElement("OPTION");
a.setAttribute("value", "B");
document.getElementById("myList").appendChild(a);
var b = document.createElement("OPTION");
b.setAttribute("value", "C");
document.getElementById("myList").appendChild(b);
}
</script>
example
code:
<div>
<form class="example" action="">
<label for="carsInput">What type of car do you prefer: </label>
<input list="cars" id="carsInput" />
<datalist id="cars">
<option value="BMW" />
<option value="Bentley" />
<option value="Mercedes" />
<option value="Audi" />
<option value="Volkswagen" />
</datalist>
<button onclick="datalistcall()" type="button">Click Here</button>
</form>
<p class="example" id="output"></p>
</div>
<script type="text/javascript">
function datalistcall() {
var o1 = document.getElementById("carsInput").value;
document.getElementById("output").innerHTML =
"You like the " + o1 + " type of car";
}
</script>
Customizing datalist styles with JavaScript
The style of the list produced by a "datalist" element is platform-dependent. If you want to customize the display of the options, you have to implement your own custom solution that overrides the default behavior.
The <del> tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.
Attributes: the <del> element supports the global attributes and events attributes. Two attributes can provide additional information about the reason a change was made to a document:
cite ; value: URL; specifies a URL to a document that explains the reason why the text was deleted/changed
datetime ; value: YYYY-MM-DDThh:mm:ssTZD; specifies the date and time of when the text was deleted/changed
Syntax : <del> . . . </del>
some examples
example
My favorite color is blue red!
Codes:
<p class="spec">My favorite color is <del>blue</del> <ins>red</ins>!</p>
example
There is nothing no code either good or bad, but thinking running it makes it so.
Codes:
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but <
del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
"details" and "summary" tag : specify additional information
The <details> tag specifies additional details that the user can open and close on demand. The tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Any sort of content can be put inside the <details> tag.
The <summary> tag is used in conjuction with the <details> tag to specify a visible heading for the details. The <summary> tag sets the visible title, which, when clicked, will open/close additional information. If there is no header, then the browser will show the header "More details", by default.
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <summary> element are used as the label for the disclosure widget.
Attributes: the <details> element includes the global attributes. The tag also support the following additional attribute:
open: value: open; specifies that the details should be visible (open) to the user. To start the <details> box in its open state, add the Boolean "open attribute".
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
code:
<div class="spec">
<details class="example">
<summary>Epcot Center</summary>
<p class="spec">Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international
pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</div>
example
System Requirements
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
code:
<div class="spec ">
<details class="example">
<summary>System Requirements</summary>
<p class="spec">Requires a computer running an operating system. The computer must have some memory and ideally
some kind of long-term storage. An input device as well as some form of output device is recommended.</p>
</details>
</div>
example
System Requirements
Requires a computer running an operating system. The computer
must have some memory and ideally some kind of long-term storage.
An input device as well as some form of output device is
recommended.
code:
<div class="spec">
<details open class="example">
<summary>System Requirements</summary>
<p class="spec">Requires a computer running an operating system. The computer must have some memory and ideally
some kind of long-term storage. An input device as well as some form of output device is recommended.</p>
</details>
</div>
example
general:
kind: jpg image size: 8,697 bytes (12 KB on disk) created: 4 August 2015 2:20 pm modified: 5 August 2016 2:20 pm
code:
<div class="spec">
<details class="example">
<!-- <summary>Apple</summary> -->
<p class="spec">Apple is a fruit.</p>
<p class="spec">An Apple a Day keeps the Doctor away.</p>
</details>
</div>
example
I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?
A keyboard.
code:
<div class="spec">
<details class="example">
<summary>I have keys but no doors. I have space but no room.
You can enter but can't leave. What am I?</summary>
A keyboard.
</details>
</div>
The <dfn> HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The <p> element, the <dt>/<dd> pairing, or the <section> element, which is the nearest ancestor of the <dfn>, is considered to be the definition of the term.
The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content. The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.
The term inside the <dfn> tag can be any of the following:
1. just as the content of the <dfn> element, 2. or, with the "title" attribute added, 3. or, with an <abbr> tag inside the <dfn> element, 4. or, with the "id" attribute added. Then, whenever a term is used, it can refer back to the definition with an <a> tag.
Attributes: this element has no other attributes than the global attributes, common to all elements.
Syntax : <dfn> . . . . </dfn>
some examples
example
A validator is a program that checks for syntax errors in code or documents.
code:
<p class="spec">A <dfn id="def-validator">validator</dfn> is a program
that checks for syntax errors in code or documents.</p>
example
HTML is the standard markup language for creating web pages.
HTML is the standard markup language for creating web pages.
HTML is the standard markup language for creating web pages.
HTML is the standard markup language for creating web pages.
code:
<div class="spec">
<p class="spec"><dfn>HTML</dfn> is the standard markup language
for creating web pages.</p>
<p class="spec"><dfn title="HyperText Markup Language">HTML</dfn>
is the standard markup language for creating web pages.</p>
<p class="spec"><dfn><abbr title="HyperText Markup Language">
HTML</abbr></dfn> is the standard markup language for creating web pages.</p>
<p class="spec"><dfn id="html-def">HTML</dfn> is the standard markup
language for creating web pages.</p>
<p class="spec">This is some text...</p>
<p class="spec">This is some text...</p>
<p class="spec">Learn <a href="#html-def">HTML</a> now.</p>
</div>
"dialog" tag : defines a dialog box or interactive component
The <dialog> tag defines a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. The <dialog> element makes it easy to create popup dialogs and modals on a web page. The dialog allows a webpage to create popup or modal windows within the same browser window rather than doing so by launching a new browser window. The purpose of the dialog element is to improve accessibility of mobile applications by making popups and modals part of the webpage DOM model.To display/hide the content, we need Javascript API.
Note: the dialog tag is not supported in Safari and Edge (prior version 79).
Attributes: the <dialog> element includes the global attributes. The tags also support the following additional attribute:
open : value: open; specifies that the dialog element is active and that the user can interact with it.
The initial state of dialog is "hidden". The "dialog element" exposes the following API methods to control its conditions:
showModal(): open the dialog by setting the attribute open to the element. It also adds a ""::backdrop" pseudo-element to cover the content outside of the element as an overlay effect. show(): similar like showModal, but without adding a backdrop. This method is useful for using the dialog as a toast notification. close(newReturnValue): close the dialog by removing the open attribute, and updating the returnValue of the dialog element if there is any newReturnValue passed.
Syntax : <dialog> . . . . </dialog>
some examples
example
This is some text.
This is some text.
This is some text.
This is some text.
code:
<div class="spec">
<p class="example">This is some text.</p>
<p class="example">This is some text.</p>
<dialog open>This is an open dialog window</dialog>
<p class="example">This is some text.</p>
<p class="example">This is some text.</p>
</div>
example
code:
<div class="spec">
<dialog id="favDialog">
<form method="dialog">
<p class="example">
<label>Favorite flower:
<select>
<option></option>
<option>Coleus</option>
<option>Rose</option>
<option>Epiphyllum</option>
<option>Monstera</option>
<option>Rubia</option>
</select>
</label>
</p>
<menu>
<button value="cancel">cancel</button>
<button id="confirmBtn" value="default">confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">update details</button>
</menu>
<output style="margin-left: 3vw;"aria-live="polite"></output>
</div>
<script>
var updateButton = document.getElementById('updateDetails');
var favDialog = document.getElementById('favDialog');
var outputBox = document.querySelector('output');
var selectEl = document.querySelector('select');
var confirmBtn = document.getElementById('confirmBtn');
// "Update details" button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
if (typeof favDialog.showModal === "function") {
favDialog.showModal();
} else {
alert("The <dialog> API is not supported by this browser");
}
});
// "Favorite flower" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
outputBox.value = favDialog.returnValue + " chosen as favorite flower - " + (new Date()).toString();
});
</script>
example
code:
<div class="spec">
<dialog id="two">
<p class="example">This is an HTML dialog! Click the button to close it.</p>
<button id="close">close dialog</button>
</dialog>
<button class="example" id="show">Show me the dialog!</button>
</div>
<script>
var dialog = document.querySelector('#two');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
</script>
example
code:
<div class="spec">
<dialog id="three">
<p class="example">Here is some text for example.</p>
<button id="hidden">close dialog text</button>
</dialog>
<button class="example" id="showing">Show dialog text</button>
</div>
<script>
(function()
{ var dialog = document.getElementById('three');
document.getElementById('showing').onclick = function() {
dialog.show();
};
document.getElementById('hidden').onclick = function() {
dialog.close();
};
})();
</script>
"div" tag : defines a division or section in a document
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The tag is easily styled by using the "class" or "id" attribute. Any sort of content can be put inside the <div> tag!
The "div" tag is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.
Attributes: the <div> element supports the global attributes and events attributes.
Syntax : <div> . . . </div>
some examples
example
This is a heading in a div element
This is some text in a div element.
This is some text outside the div element.
code:
<style class="spec">
.myDiv {border: 5px outset red; background-color: lightblue; text-align: center;}
</style>
<div>
<div style="margin-left: 3vw;" class="myDiv">
<h3>This is a heading in a div element</h3>
<p class="spec">This is some text in a div element.</p>
</div>
<p class="spec">This is some text outside the div element.</p>
</div>
example
div tag
div tag
div tag
div tag
Codes:
<style>
.one{ color: skyblue; background-color: lightgreen; margin: 2px; font-size: 25px;}
</style>
<div>
<div style="margin-left:3vw;" class="one"> div tag </div>
<div style="margin-left:3vw;" class="one"> div tag </div>
<div style="margin-left:3vw;" class="one"> div tag </div>
<div style="margin-left:3vw;" class="one"> div tag </div>
</div>
The HTML5 "dl", "dt" and "dd" tags are used to list data. The HTML definition list represents a term and a relevant description in the form of the list. The HTML definition list starts and ends with "dl" element (i.e. <dl> and </dl>). The terms are enclosed with "dt" element. The description is enclosed with the "dd" element.
Another usage of "dl", "dt" and "dd" elements is to create a dialog, where each "dt" specifies the name of the speaker, and each "dd" containis his/her words.
The <dl> tag (short for "description list") is used to specify (start) the definition list. This tag is commonly used to implement a glossary. You can put only <dt> and <dd> tags inside the <dl> tag.
The <dt> tag (short for "description term") is used to specify the definition terms or items in a definition list. You can put paragraphs, line breaks, images, links, lists, etc. inside the <dt> tag. You can also use a <dt> tag within <details> and <figure> tags to represent a caption for content.
The <dd> tag (short for "description definition") is used to describe an item within a list of defined terms enclosed by a definition list. You can put paragraphs, line breaks, images, links, lists, etc inside the <dd> tag.
Attributes: these elements have no other attributes than the global attributes, common to all elements.
Syntax: >
<dl>
<dt></dt>
<dd>
</dd>
</dl>
Both start and end tag are required for the "dl" element; start tag is required but end tag optional for "dt" and "dd" elements.
some examples
example
PHP
A server side scripting language.
JavaScript
A client side scripting language.
code:
<div class="spec">
<dl class="example">
<dt>PHP</dt>
<dd>A server side scripting language.</dd>
<dt>JavaScript</dt>
<dd>A client side scripting language.</dd>
</dl>
</div>
The five aggregates, constituting what is generally
known as the personality:
form
sensation
perception
mental formations
conciousness
Zazen
Sitting meditation, taught in Zen as the most direct way to awakening.
code:
<div class="spec">
<h4>Zen terms</h4>
<dl class="example">
<dt><dfn>Four noble truths</dfn></dt>
<dd>
<ol>
<li>Life is suffering</li>
<li>Suffering is caused by desire</li>
<li>There is a path from desire and suffering</li>
<li>This path is the Eightfold Noble Path.</li>
</ol>
</dd>
<dt><dfn>Skandha</dfn></dt>
<p class="example">The five aggregates, constituting what is generally
known as the personality:</p>
<dd>
<ul>
<li>form</li>
<li>sensation</li>
<li>perception</li>
<li>mental formations</li>
<li>conciousness</li>
</ul>
</dd>
<dt><dfn>Zazen</dfn></dt>
<dd>Sitting meditation, taught in Zen as the most direct way to
awakening.</dd>
</dl>
</div>
example
Programming classes
These classes are organized for those among you who want to improve programming skills.
HTML classes
This is a course designed for beginners in HTML.
CSS classes
This course is for beginners in CSS and webpage formatting.
Python classes
These classes focus on python and is for beginners in python.
code:
<div class="spec">
<dl class="example">
<dt>Programming classes</dt>
<dd>These classes are organized for those among you who want to improve
programming skills.</dd>
<br>
<dt>HTML classes</dt>
<dd>This is a course designed for beginners in HTML.</dd>
<br>
<dt>CSS classes</dt>
<dd>This course is for beginners in CSS and webpage formatting.</dd>
<br>
<dt>Python classes</dt>
<dd>These classes focus on python and is for beginners in python.</dd>
</dl>
</div>
