revision:
The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it. Browsers usually render <s> text with a line through the middle. This resembles text that has been "crossed out" due to it being no longer accurate or relevant.
The <s> tag should not be used to define deleted text in a document, use the <del> tag for that.
Only 50 tickets left!
SOLD OUT!
code:
<p class="example"><s>Only 50 tickets left!</s></p>
<p class="example">SOLD OUT!</p>
Great coffee from just $50 $20!
coding:
<p class="example">Great coffee from just <s>$50</s> $20!</p>
I am studying in high school.
I am studying in an university.
code:
<div class="spec">
<p class="example"><s>I am studying in high school.</s></p>
<p class="example">I am studying in an university.</p>
</div>
code:
<div class="spec">
<s class="example">Today's Special: Salmon</s> SOLD OUT<br>
<span class="example" style="text-decoration:line-through;">Today's Special: Salmon</span> SOLD OUT
</div>
The <samp> tag contains sample output from a computer program or a script. In the browser, the content of the tag is displayed in a monospace font, by default.
The <samp> tag is a phrase tag indicating that a text section has structural meaning.
The default font face of the browser can be overridden with a CSS rule for the "samp" tag. However, the browser's preferences may take priority over any specified CSS.
The <output> tag can be used instead of <samp>, if you want an element to serve as a container for the output created by the website or JavaScript code.
You see an ordinary text here. But this is a sample text. And another ordinary text.
Codes:
<p class="spec">You see an ordinary text here. <samp>But this is a sample text.</samp>
And another ordinary text.</p>
I am trying to install a software on my system but it is continuously giving an error message:
Error 5: Access is denied.
Codes:
<p class="spec">I am trying to install a software on my system but it is continuously
giving an error message: </p>
<p class="spec"><samp>Error 5: Access is denied.</samp></p>
The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the "src attribute". Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
async ; value: async; specifies that the script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes) (only for external scripts).
crossorigin ; value: anonymous, use-credentials; sets the mode of the request to an HTTP CORS Request.
defer ; value: defer; specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing (only for external scripts).
integrity ; value: filehash; allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.
nomodule ; value: True, False: specifies that the script should not be executed in browsers supporting ES2015 modules.
referrerpolicy ; value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url; specifies which referrer information to send when fetching a script.
src ; value: URL; specifies the URL of an external script file.
type ; value: scripttype; specifies the media type of the script.
Codes:
<p class="spec" id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Codes:
<span style="margin-left:4vw;" onmouseover="myAlert();">
Bring your mouse here to see an alert
</span>
<script type="text/javascript">
function myAlert(){
alert("I am an event handler....");
return;
}
</script>
The <section> tag defines a section in a document.
The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.
Codes:
<section>
<h4>WWF History</h4>
<p class="spec">The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h3>WWF's Symbol</h3>
<p class="spec">The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to
the London Zoo in the same year of the establishment of WWF.</p>
</section>
Plastic flamingos have been used as garden ornaments since the late 1950s.
Codes:
<section>
<h4>Pink Flamingos</h4>
<p class="spec">Plastic flamingos have been used as garden ornaments
since the late 1950s.</p>
</section>
The <select> tag is used to create a drop-down list and is most often used in a form, to collect user input.
The "name" attribute is needed to reference the form data after the form is submitted (if you omit the "name" attribute, no data from the drop-down list will be submitted). The "id" attribute is needed to associate the drop-down list with a label. The <option> tags inside the <select> element define the available options in the drop-down list.
Always add the "label" tag for best accessibility practices!
autofocus ; value: autofocus; specifies that the drop-down list should automatically get focus when the page loads.
disabled ; value: disabled; specifies that a drop-down list should be disabled.
form ; value: form_id; defines which form the drop-down list belongs to.
multiple ; value: multiple: specifies that multiple options can be selected at once ;
name ; value: name; defines a name for the drop-down list.
required ; value: required: specifies that the user is required to select a value before submitting the form.
size ; value: number; defines the number of visible options in a drop-down list.
Codes:
<form style="margin-left:4vw;" action="action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
Codes:
<label style="margin-left: 4vw;" for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
The <small> tag defines smaller text (like copyright and other side-comments).
This tag is not deprecated, but it is possible to achieve richer (or the same) effect with CSS. The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.
This is some normal text.
This is some smaller text.
Codes:
<p class="spec">This is some normal text.</p>
<p class="spec"><small>This is some smaller text.</small></p>
This is the first sentence. This whole sentence is in small letters.
Codes:
<p class="spec">This is the first sentence.
<small>This whole sentence is in small letters.
</p>
The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>. The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.
media ;value: media_query; accepts any valid media query that would normally be defined in a CSS.
size ; value: ; specifies image sizes for different page layouts.
src ; value: URL; required when "source" is used in "audio" and "video"; specifies the URL of the media file.
srcset ; value: URL; required when 'source' is used in 'picture'; specifies the URL of the image to use in different situations.
type ; value: MIME-type; specifies the MIME-type of the resource.
Codes:
<audio controls>
<source src="../pics/horse.wav" type="audio/wav">
<source src="../pics/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Codes:
<video style="margin-left:4vw;" width="320" height="240" controls>
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
<source src="Wuzhen-20-10_02.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The tag is easily styled by CSS or manipulated with JavaScript using the "class" or "id" attribute.
The <span> tag is much like the <div> element, but <div> is a "block-level" element and <span> is an "inline" element. It is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the "class" or "id" attributes), or because they share attribute values, such as "lang". It should be used only when no other semantic element is appropriate.
My mother has blue eyes and my father has dark green eyes.
Codes:
<p class="spec">My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-weight:bold">
dark green</span> eyes.</p>
Add the basil, pine nuts and garlic to a blender and blend into a paste.
Gradually add the olive oil while running the blender slowly.
Codes:
<style>
span.ingredient {color: #f00;}
</style>
<p class="spec">Add the <span class="ingredient">basil</span>, <span
class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span>
to a blender and blend into a paste.</p>
<p class="spec">Gradually add the <span class="ingredient">olive oil</ span>
while running the blender
slowly.</p>
The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.
The <strong> tag is used to separate the text from the rest of the content. Browsers traditionally bold the text found within the <strong> tag. You can change this behavior with CSS.
This text is important!
code:
<p class="spec"><strong>This text is important!</strong></p>
... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight.
code:
<p class="spec">... the most important rule, the rule you can never forget,
no matter how much he cries, no matter how much he begs: <strong>never
feed him after midnight</strong>.</p>
Before proceeding, make sure you put on your safety goggles.
code:
<p class="spec">Before proceeding, <strong>make sure you put on your safety
goggles</strong>.</p>
Warning: that text was serious and this text is important.
code:
<p class="spec"><strong>Warning</strong>: that text was serious
and <strong>this text is important</strong>.</p>
Homework is due on April 21.
code:
<p class="spec">Homework is due on <strong>April 21</strong>.</p>
This is just normal text. This is important. And this is even more important!.
code:
<p class="spec">This is just normal text. <strong>This is important.
<strong>And this is even more important!</strong></strong>. </p>
The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser.
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used! To link to an external style sheet, use the <link> tag.
media ; value: media_query; specifies what media/device the media resource is optimized for.
type ; value: text/css; specifies the media type of the <style> tag;
This is a paragraph.
Codes:
<style>
h3 {color:red;}
p.one {color:blue;}
</style>
<div>
<h3>This is a heading</h3>
<p class="spec one">This is a paragraph.</p>
</div>
This text will be green. Inline styles take precedence over CSS included externally.
The style attribute can override it, though.
Codes:
<style type="text/css">
p.two {color: #26b72b;}
</style>
<p class="spec two">This text will be green. Inline styles take precedence over CSS included externally.</p>
<p class="spec two" style="color: blue">The <code>style</code> attribute can override it,
though.</p>
The <sub> tag defines subscript text, which appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O. You must use the <sub> tag only for typographical reasons. It shouldn't be used for styling purposes. If you want to change the vertical position of a text, you can use the CSS "vertical-align" property with the "sub" value.
The <sup> tag tag defines superscript text, which appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]..
<sub> . . . </sub>
<sup> . . . </sup>
This text contains subscript text.
This text contains superscript text.
code:
<p class="example">This text contains <sub>subscript</sub> text.</p>
<p class="example">This text contains <sup>superscript</sup> text.</p>
Formula of water - H2O, formula of alcohol - C2H5ОН
code:
<p class="example">Formula of water - H<sub>2</sub>O, formula of
alcohol - C<sub>2</sub>H<sub>5</sub>ОН</p>
E = mc2, where E — kinetic energy, m — mass, c — the speed of light.
code:
<p class="example">E = mc<sup>2</sup>, where E — kinetic energy,
m — mass, c — the speed of light.</p>
Almost every developer's favorite molecule is C8H10N4O2, which is commonly known as "caffeine."
coding:
<p class="example">Almost every developer's favorite molecule
is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O
<sub>2</sub>, which is commonly known as "caffeine."</p>
42 is 16.
coding:
<p class="example">4<sup>2</sup> is 16.</p>
The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.
The <summary> element should be the first child element of the <details> element. A "summary" element may only be used as the first child of a "details" element. The "summary" element's contents can be any heading content, plain text, or HTML that can be used within a paragraph. When the user clicks on the summary, the parent "details" element is toggled open or closed, and then a toggle event is sent to the "details" element, which can be used to let you know when this state change occurs.
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Codes:
<details style="margin-left:5vw;">
<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>
Codes:
<details open style="margin-left: 4vw;">
<summary>Overview</summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</details>
The <svg> tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. The svg element is a container that defines a new coordinate system and viewport.
It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
baseProfile ; value: none (default), full, basic, tiny; describes the minimum SVG language profile that the author believes is necessary to correctly render the content.Not supported after SVG2.
contentScriptType ; value: content-type; specifies the default scripting language for the given document fragment. Not supported after SVG2.
contentStyleType ; value: content-type; identifies the default style sheet language used by the SVG fragment. Not supported after SVG2.;
height ; value: length | percentage; defines the vertical length of rect.
preserveAspectRatio ; value: none, xMinYMin,br/> xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax; defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio.
preserveAspectRatio ; value: meet (default); defines that an image preserves its proportion and is visible.
preserveAspectRatio ; value:number; defines that an image preserves its proportion and the viewBox is scaled down as much as possible.
version ; value: number; defines the version of SVG used for the inner content of the element. Not supported after SVG2.
viewbox ; value: list-of-numbers; defines the bound of the SVG viewport for the current SVG fragment.;
width ; value: length | percentage; determines the width of the rect.
x ; value: length | percentage; determines the x coordinate of the svg container. It has no effect on outermost SVG elements.
y ; value: length | percentage; determines the y coordinate of the svg container. It has no effect on outermost SVG elements.;
Codes:
<svg width="100" height="100" style="margin-left: 4vw;">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
Codes:
<div style="display:flex; flex-flow:row wrap;margin-left:4vw;">
<svg width="180" height="180">
<rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray;
stroke:#1c87c9; stroke-width:4;"/>
</svg>
<svg width="200" height="200">
<circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
</svg>
<svg width="200" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray;
stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
</svg>