html
Block-level Elements
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
Bookmarks with ID and Links
<h2 id="C4">Chapter 4</h2> <a href="#C4">Jump to Chapter 4</a>
for=""
<label for="fname">First name:</label> The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
<kbd>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
<abbr></abbr>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<span>
A <span> element which is used to color a part of a text: The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> 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.
Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:
HTML Web Workers API
A web worker is a JavaScript running in the background, without affecting the performance of the page. When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.
aria-label=""
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities Screen reader-т хэрэглэдэг
autoplay and muted
Add muted after autoplay to let your video start playing automatically (but muted):
title=""
An attribute that creates a tool tip -a text box that appears as the user's mouse hovers over it Ex: Monet's <cite title= "Claude Monet"> Water Lilly</cite> is one of the most famous works of art.
POST
Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL) POST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked
GET
Appends the form data to the URL, in name/value pairs NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!) The length of a URL is limited (2048 characters) Useful for form submissions where a user wants to bookmark the result GET is good for non-secure data, like query strings in Google
attribute
Attributes are used to provide additional information about HTML elements. All HTML elements can have attributes. Attributes usually come in name/value pairs like: name="value"
<q></p>
Defines a short inline quotation <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<noscript>
Defines an alternate content for users that do not support client-side scripts
formmethod Attribute
Defines the HTTP method for sending form-data to the action URL. <form action="/action_page.php" method="get"> <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> <input type="submit" value="Submit using GET"> <input type="submit" formmethod="post" value="Submit using POST"></form>
<a></a>
HTML links are defined with the <a> tag:
HTML Web Storage API
HTML web storage; better than cookies. With web storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
<!DOCTYPE html>
It defines that this document is an HTML5 document
name=""
Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all.
HTML supporting audio format.
Only MP3, WAV, and Ogg audio are supported by the HTML standard.
HTML supporting video format.
Only MP4, WebM, and Ogg video are supported by the HTML standard.
<meta http-equiv="refresh" content="30">
Refresh document every 30 seconds:
SVG
Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation
Semantic HTML
Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning; if you need a button, use the <button> element (and not a <div> element). Semantic <button>Click Me</button> Non-semantic <div>Click Me</div>
HTML SSE API
Server-Sent Events (SSE) allow a web page to get updates from a server.
<img src="../picture.jpg">
The "picture.jpg" file is located in the folder one level up from the current folder
<img src="/images/picture.jpg">
The "picture.jpg" file is located in the images folder at the root of the current web
<img src="images/picture.jpg">
The "picture.jpg" file is located in the images folder in the current folder
<caption></caption>
The <caption> tag must be inserted immediately after the <table> tag. <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr>
<datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element. <form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
<fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element. <form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> < label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form>
<output> Element
The <output> element represents the result of a calculation (like one performed by a script). <form action="" oninput="x.value=a.value + ' гэдэн үг'"> <input type="text" id="a" name="a"> <output name="x" for="a"></output> </form>
<picture></picture>
The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device. <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg"></picture>
<select></select>
The <select> element defines a drop-down list: To define a pre-selected option, add the selected attribute to the option: <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected >Fiat</option> <option value="audi">Audi</option> </select>
<address></address>
The HTML <address> tag defines the contact information for the author/owner of a document or an article. <address>Written by John Doe.<br> Visit us at:<br>Disneyland<br> USA</address>
<bdo></bdo>
The HTML <bdo> tag is used to override the current text direction: <bdo dir="rtl">This text will be written from right to left</bdo>
<cite></cite>
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
<form></form>
The HTML <form> element is used to create an HTML form for user input:
<input>
The HTML <input> element is the most used form element.
<samp></samp>
The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
controls
The controls attribute adds video controls, like play, pause, and volume.
autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when the page loads. <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
form Attribute
The input form attribute specifies the form the <input> element belongs to. <form action="/action_page.php" id="form1"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"></form><label for="lname">Last name:</label><input type="text" id="lname" name="lname" form="form1">
formaction Attribute
The input formaction attribute specifies the URL of the file that will process the input when the form is submitted. <form action="/action_page.php"> <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> <input type="submit" value="Submit"> <input type="submit" formaction="/action_page2.php" value="Submit as Admin"></form>
formenctype Attribute
The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post"). <form action="/action_page_binary.asp" method="post"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data"value="Submit as Multipart/form-data"></form>
formnovalidate Attribute
The input formnovalidate attribute specifies that an <input> element should not be validated when submitted. The formnovalidate attribute works with the following input types: submit. <form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> <input type="submit" formnovalidate="formnovalidate"value="Submit without validation"></form>
formtarget Attribute
The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The formtarget attribute works with the following input types: submit and image. <form action="/action_page.php"> <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> <input type="submit" value="Submit"> <input type="submit" formtarget="_blank" value="Submit to a new window/tab"></form>
list Attribute
The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element. <form> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist></form>
pattern Attribute
The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. <form> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code"pattern="[A-Za-z]{3}" title="Three letter country code"></form>
placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value of an input field (a sample value or a short description of the expected format). <form> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>
required Attribute
The input required attribute specifies that an input field must be filled out before submitting the form. <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form>
step Attribute
The input step attribute specifies the legal number intervals for an input field.The step attribute works with the following input types: number, range, date, datetime-local, month, time and week. <form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"></form>
The min and max Attributes
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
novalidate Attribute
The novalidate attribute is a <form> attribute. <form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"></form>
novalidate
The novalidate attribute is a boolean attribute. When present, it specifies that the form-data (input) should not be validated when submitted. <form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit"> </form>
disabled
The value of a disabled input field will not be sent when submitting the form! <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
multiple
Use the multiple attribute to allow the user to select more than one value: <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>
autocomplete=""
When autocomplete is on, the browser automatically complete values based on values that the user has entered before. Default is on
metadata
data about data
<head>
element contains meta information about the HTML page
multiple Attribute
he input multiple attribute specifies that the user is allowed to enter more than one value in an input field. The multiple attribute works with the following input types: email, and file. <form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple></form>
method=""
he method attribute specifies the HTTP method to be used when submitting the form data. The default HTTP method when submitting form data is GET. URL variables - method="get" HTTP post transaction - method="post"
rgba
rgba(red, green, blue, alpha) rgba(255, 99, 71, 0.2) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
