revision:
The <label> tag defines a label for several HTML elements : <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime-local">, <input type="email">, <input type="file">, <input type="month">, <input type="number"> <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel"> <input type="text">, <input type="time">, <input type="url">, <input type="week">, <meter>, <progress>, <select>
Proper use of labels with the elements above will benefit: screen reader users (will read out loud the label, when the user is focused on the element) and users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).
The "for" attribute of <label> must be equal to the"id" attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.
for ; value: element_id; specifies the "id" of the form element the label should be bound to.
form ; value: form_id; specifies which form the label belongs to.
Click on one of the text labels to toggle the related radio button:
Codes:
<p class="spec">Click on one of the text labels to toggle the related radio button:</p>
<form style="margin-left:4vw;" action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Codes:
<style>
.preference {display: flex; justify-content: space-between; width: 25%; margin: .5vw;}
</style>
<div>
<div class="preference" style="margin-left: 4vw;">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
<div class="preference" style="margin-left: 4vw;">
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas">
</div>
The <legend> tag defines a caption for the <fieldset> element. The <legend> element is used to add a caption to a group of related form <input> elements that have been grouped together into a <fieldset>.
It provides titles for form sections, providing a nice alternative to the "headline" elements. The titles are designed to be used with the "fieldset" element, and (strictly speaking) should only be used inside of one. Organizing form fields into "fieldset" groups, with appropriate "legend" captions can help make complicated forms more attractive and easier to use.
Codes:
<form style="margin-left: 4vw;" action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Codes:
<form style="margin-left: 4vw;" action="/action_page.php">
<fieldset>
<legend style="float:right">Personalia:</legend><br>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
The <li> tag defines a list item. The tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
In "ul" and "menu", the list items will usually be displayed with bullet points. In "ol", the list items will usually be displayed with numbers or letters.
value ; value: number; only for <ol> lists; specifies the start value of a list item. The following list items will increment from that number.
The ol element defines an ordered list:
The ul element defines an unordered list:
Codes:
<p class="spec" style="margin-left: 3vw;">The ol element defines an ordered list:</p>
<ol style="margin-left: 3vw;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p class="spec" style="margin-left: 3vw;">The ul element defines an unordered list:</p>
<ul style="margin-left: 3vw;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Codes:
<ol style="margin-left: 3vw;">
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>
The <link> tag defines the relationship between the current document and an external resource. The tag is most often used to link to external style sheets. But, it is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
The <link> element is an empty element, it contains attributes only.
crossorigin ; value: anonymous, use-credentials; specifies how the element handles cross-origin requests.
href ; value: URL; specifies the location of the linked document.
hreflang ; value: language_code; specifies the language of the text in the linked document.
media ; value: media_query; specifies on what device the linked document will be displayed.
referrerpolicy ; value: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url; specifies which referrer to use when fetching the resource.
rel ; value: alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet; required, specifies the relationship between the current document and the linked document.
sizes ; value: HeightxWidth, any; specifies the size of the linked resource. Only for rel="icon".
title ; value: ; defines a preferred or an alternate stylesheet.
type ; value: media_type; specifies the media type of the linked document.
Codes:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Codes:
<link href="main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png">
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
<link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">