Revision:
The <a> tag defines a hyperlink, which is used to link from one page to another.
download ; value: filename ; specifies that the target will be downloaded when a user clicks on the hyperlink.
href ; value: url; specifies the URL of the page the link goes to.
hreflang ; value: language code; specifies the language of the linked document.
media ; value: media_query; specifies what media/device the linked document is optimized for.
ping ; value: list_of_URLs; specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
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, external, help, license, next, nofollow, noreferrer, noopener, prev, search, tag; specifies the relationship between the current document and the linked document.
target ; value: _blank, _parent, _self, _top; specifies where to open the linked document.
type ; value: media_type; specifies the media type of the linked document.
The most important attribute of the <a> element is the "href" attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: an unvisited link is underlined and blue, a visited link is underlined and purple, an active link is underlined and red. If the <a> tag has no "href" attribute, it is only a placeholder for a hyperlink.
A linked page is normally displayed in the current browser window, unless you specify another target. Use CSS to style links.
example
An image as a link:
code:
<p class="spec">An image as a link: <a href="https://www.lwitters.com">
<img border="0" alt="my website" src="../../pics/cartoon.jpg" width="100" height="100">
</a></p>
example
If you set the target attribute to "_blank", the link will open in a new browser window or a new tab.
code:
<a class="spec" href="https://www.lwitters.com" target="_blank" rel="noopener">Visit my website!</a>
<p class="spec">If you set the target attribute to "_blank", the link will open in a new
browser window or a new tab.</p>
example
To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute.
code:
<p class="spec">To create a link that opens in the user's email program (to let them send a new email), use mailto:
inside the href attribute.</p>
<p class="spec"><a href="mailto:[email protected]">Send email</a></p>
example
code:
<a class="spec" href="#top">Go to top of the page</a>
example
code:
<a class="spec" href="javascript:alert('Hi there, how are you!');">execute JavaScript</a>
The<abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
It is not necessarily a requirement to use the <abbr> when presenting an abbreviation. It is simply a tag that can be useful in many cases when doing so (for example, using the title attribute to expand on the abbreviation, or using style sheets to apply to the <abbr> element).
example
The WHO was founded in 1948.
Code:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
example
CSS is a language that describes the style of an HTML document.
Code:
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr>
</dfn> is a language that describes the style of an HTML document.</p>
example
There are many PMRs
Codes:
<p>There are many <abbr title="Physical Matter Realities">PMRs</abbr></p>
The <address> tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.
example
Code:
<address style="margin-left:4vw;">
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
example
Code:
You can contact us directly at <a mailto="[email protected]">
[email protected]</a>.
example
Codes:
<address style="margin-left:4vw;">
For more information on the above article, contact:
<a href="mailto:[email protected]">.... </a>
</address>
The <area> tag defines an area inside an image map (i.e. an image with clickable areas). <area> elements are always nested inside a <map> tag. The "usemap" attribute in <img> is associated with the <map> element's "name" attribute, and creates a relationship between the image and the 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, circle, poly; 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.
example
Click on the computer, the phone, or the cup of coffee to go to a new page.
Codes:
<p class="example">Click on the computer, the phone, or the cup of coffee to go to a new page.</p>
<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/dig_art.php">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://lwitters-1.com">
</map>
example
example
Codes:
<img src ="../../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" rel="noopener">
<area shape ="circle" coords ="126,76,41" href ="https:/lwitters-1.com" target="_blank" rel="noopener" alt="Circle">
<area shape ="poly" coords ="182,15,218,15,218,95,310,95,310,122,182,122" href ="https:/wikipedia.com"
target="_blank" rel="noopener" alt="L shape">
</map>
The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
example
Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.
Codes:
<article>
<h4>Microsoft Edge</h4>
<p class="spec">Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
example
Rain.
Periods of rain.
Heavy rain.
Codes:
<article class="forecast">
<h4>Weather forecast for Seattle</h4>
<article class="day-forecast">
<h5 style="margin-left:4vw;">03 March 2018</h5>
<p class="spec" style="margin-left:4vw;">Rain.</p>
</article>
<article class="day-forecast">
<h5 style="margin-left:4vw;">04 March 2018</h5>
<p class="spec" style="margin-left:4vw;">Periods of rain.</p>
</article>
<article class="day-forecast">
<h5 style="margin-left:4vw;">05 March 2018</h5>
<p class="spec" style="margin-left:4vw;">Heavy rain.</p>
</article>
The <aside> tag defines some content aside from the content it is placed in. The <aside> content should be indirectly related to the surrounding content. It is often placed as a sidebar in a document. The <aside> element does not render as anything special in a browser. However, you can use CSS to style the element.
example
Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.
Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.
Code:
<style>
aside {width: 40%; padding-left: .5vw; margin-left: .5vw; float: right; box-shadow:
inset 0.5vw 0 0.5vw -0.5vw #29627e; font-style: italic; color: #29627e;}
aside > p {margin: .5vw;}
</style>
<div>
<p class="spec">Salamanders are a group of amphibians with a lizard-like appearance,
including short legs and a tail in both larval and adult forms.</p>
<aside>
<p class="spec">The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p class="spec">Several species of salamander inhabit the temperate rainforest of the
Pacific Northwest, including the Ensatina, the Northwestern Salamander and the
Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and
other small creatures.</p>
</div>
The <audio> tag is used to embed sound content in a document, such as music or other audio streams. The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element. There are three supported audio formats in HTML: MP3, WAV, and OGG.
autoplay : value: autoplay; specifies that the audio will start playing as soon as it is ready.
controls : value: controls; specifies that audio controls should be displayed (such as a play/pause button etc).
loop : value: loop; specifies that the audio will start over again, every time it is finished.
muted : value: muted; specifies that the audio output should be muted.
preload : value: auto, metadata, none; specifies if and how the author thinks the audio should be loaded when the page loads.
src : value: URL; specifies the URL of the audio file.
example
Code:
<audio style="margin-left:6vw;" controls>
<source src="../../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
example
Code:
<audio style="margin-left:6vw;" src="../../pics/horse.wav" controls loop>
Your browser does not support the audio element.
</audio>