revision:
The <main> tag - a semantic tag - specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
There must not be more than one "main" element in a document. The "main" element must NOT be a descendant of an "article", "aside", "footer", "header", or "nav" element.
The <main> tag doesn't contribute to the document's outline. Unlike elements such as <body>, headings such as <h2>, etc., <main> doesn't affect the DOM's concept of the structure of the page. It's strictly informative.
Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.
Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.
Codes:
<header style="margin-left:4vw;">Gecko facts</header>
<main style="margin-left:4vw;">
<p class="spec">Geckos are a group of usually small, usually nocturnal lizards.
They are found on every continent except Australia.</p>
<p class="spec">Many species of gecko have adhesive toe pads which enable them
to climb walls and even windows.</p>
</main>
The apple is the pomaceous fruit of the apple tree.
These bright red apples are the most common found in many supermarkets.
...
...
These juicy, green apples make a great filling for apple pies.
...
...
Codes:
<main style="margin-left:4vw;">
<h3>Apples</h3>
<p class="spec">The apple is the pomaceous fruit of the apple tree.</p>
<article style="margin-left:2vw;">
<h4>Red Delicious</h4>
<p class="spec">These bright red apples are the most common found in
many supermarkets.</p>
<p class="spec">... </p>
<p class="spec">... </p>
</article>
<article style="margin-left:2vw;">
<h4>Granny Smith</h4>
<p class="spec">These juicy, green apples make a great filling for apple
pies.</p>
<p class="spec">... </p>
<p class="spec">... </p>
</article>
</main>
The <map> tag is used to define an image map, i.e. an image with clickable areas. An image map allows geometric areas on an image to be associated with hypertext link. The required "name" attribute of the <map> element is associated with the <img>'s "usemap" attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that define the clickable areas in the image map. This element is used only within a <map> element.
name ; value: name; required; specifies the name of the image map.
alt ; value: text; specifies an alternate text for the area; required if the "href attribute" is present.
coords ; value: coordinates ;specifies the coordinates of the area.
download ; value: filename; specifies that the target will be downloaded when a user clicks on the hyperlink.
href ; value: URL ; specifies the hyperlink target for the area.
hreflang ; value: language_code ; specifies the language of the target URL.
media ; value: media query; Specifies what media/device the target URL is optimized for.
referrerpolicy ; value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url; specifies which referrer information to send with the link.
rel ; value: alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag; specifies the relationship between the current document and the target URL.
shape ; value: default, rect (x1, y1, x2, y2; from top-left to bottom-right), circle (x, y, radius; circle center and radius), poly (x1, y1, x2, y2, . . . xn, yn; coordinates of the edges of the polygon); specifies the shape of the area.
target ; value: _blank, _parent, _self, _top, framename; specifies where to open the target URL.
type ; value: media_type ; specifies the media type of the target URL.
<map name="">
<area>
<area>
<area>
. . . .. . .
</map>
Click on the computer, the phone, or the cup of coffee to go to a new page.
<div>
<img src="../pics/map.jpg" alt="map" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://www.lwitters.com/coding.php">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://www.lwitters.com/blogging.php">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://lwitters-1.com">
</map>
</div>
<div>
<img src ="../pics/image-map-1.png" width="316" height="131" alt="holidays" usemap ="#holy">
<map name="holy">
<area shape ="rect" coords ="9,10,62,123" href ="https://lwitters.com" alt="square" target="_blank">
<area shape ="circle" coords ="126,76,41" href ="https:/lwitters-1.com" target="_blank" alt="Circle">
<area shape ="poly" coords ="182,15,218,15,218,95,310,95,310,122,182,122" href ="https:/wikipedia.com"
target="_blank" alt="L shape">
</map>
</div>
see also "HTML-10-image maps.html" under tutorials, and "images-map" under topics.
The <mark> tag defines text that should be marked or highlighted. Most browsers will display the <mark> element with the following default values: "background-color: yellow"; "color: black";. This can be changed using CSS background-color property.
Typical use cases for <mark> include:
when used in a quotation (<q>) or block quote (<blockquote>), it generally indicates text which is of special interest but is not marked in the original source material, or material which needs special scrutiny even though the original author didn't think it was of particular importance. Think of this like using a highlighter pen in a book to mark passages that you find of interest.
Otherwise, <mark> indicates a portion of the document's content which is likely to be relevant to the user's current activity. This might be used, for example, to indicate the words that matched a search operation.
Don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate CSS applied to it.
Do not forget to buy milk today.
code:
<p class="example">Do not forget to buy <mark>milk</mark> today.</p>
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.
coding:
<blockquote class="example">
It is a period of civil war. Rebel spaceships, striking from a
hidden base, have won their first victory against the evil
Galactic Empire. During the battle, <mark>Rebel spies managed
to steal secret plans</mark> to the Empire’s ultimate weapon,
the DEATH STAR, an armored space station with enough power to
destroy an entire planet.
</blockquote>
The Math test is on Friday.
code:
<p class="example">The Math test is on <mark style="background-color: red;">Friday</mark>.</p>
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services. There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the "meta" tag.
charset ; value: character_set; specifies the character encoding for the HTML document.
content ; value: text; specifies the value associated with the http-equiv or name attribute.
http-equiv ; value: content-security-policy, content-type, default-style, refresh; provides an HTTP header for the information/value of the content attribute.
name ; value: application-name, author, description, generator, keywords, viewport; specifies a name for the metadata;
Codes:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Codes:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
<meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-tags-list">
<meta name="date" content="2019-08-04" scheme="YYYY-MM-DD">
The <meter> HTML element represents either a scalar value within a known range or a fractional value.This is also known as a gauge.
Examples: disk usage, the relevance of a query result, etc. The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag. Always add the <label> tag for best accessibility practices.
By default, the <meter> background is green and gray. With CSS the background color can be customized.
The <meter> tag is not supported in Edge 12 (or earlier).
form ; value: form_id; specifies which form the <meter> element belongs to.
high ; value: number; specifies the range that is considered to be a high value.
low ; value: number; specifies the range that is considered to be a low value.
max ; value: number; specifies the maximum value of the range.
min ; value: number; specifies the minimum value of the range. Default value is 0.
optimum ; value: number; specifies what value is the optimal value for the gauge.
value ; value: number; required. Specifies the current value of the gauge.
<label> . . . </label>
<meter> . . . </meter>
example
code:
<div>
<label class="example" for="fuel">fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100 </meter>
</div>
code:
<div class="spec">
<label class="example" for="disk_c">disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
<label class="example" for="disk_d">disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>
</div>
He got a
code:
<p class="example">He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
code:
<div class="spec">
<meter class="example" value="4" min="0" max="10">4 out of 10</meter> 4 out of 10<br>
<meter class="example" value="0.75">75%</meter> 75%
</div>
code:
<div class="spec">
<ol class="example">
<li><meter min="0" max="100" value="25">25%</meter></li>
<li><meter min="100" max="200" value="150">50%</meter></li>
<li><meter min="0" max="100" value="75">75%</meter></li>
<li><meter min="0" max="800" value="400">50%</meter></li>
</ol>
<dl class="example">
<dt>Width:</dt>
<dd><meter min="0" max="200" value="123" title="millimeters">123mm</meter></dd>
<dt>Height:</dt>
<dd><meter min="0" max="100" value="25" optimum="30" title="millimeters">25mm</meter></dd>
</dl>
</div>