HTML5 Tags Reference Summary

2020-Apr-28

Some newer and basic stuff

🚴 from w3schools.com

💨 by Eugene Ruthven

email Feedback About This Page

1. Block, Inline Elements 7. Common Input Restrictions
2. <label> 8. Other Input Attributes
3. <datalist> 9. Input form Attributes
4. <output> 10. <canvas>
5. <optgroup> 11. <svg>
6. Input Types 12. <code>, <pre>

Block, Inline Elements

Every HTML element has a default display value, depending on what type of element it is.

The two display values are:
block
and
inline

Block-level Elements

A block-level element always starts on a new line and takes up the full width available stretches out to the left and right as far as it can.

📚 <address> 📚 <dt> 📚 <hr> 📚 <section>
📚 <article> 📚 <fieldset> 📚 <li> 📚 <table>
📚 <aside> 📚 <figcaption> 📚 <main> 📚 <tfoot>
📚 <blockquote> 📚 <figure> 📚 <nav> 📚 <ul>
📚 <canvas> 📚 <footer> 📚 <noscript> 📚 <video>
📚 <dd> 📚 <form> 📚 <ol>  
📚 <div> 📚 <h1>-<h6> 📚 <p>  
📚 <dl> 📚 <header> 📚 <pre>  

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content.

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

📚 <a> 📚 <code> 📚 <object> 📚 <sub>
📚 <abbr> 📚 <dfn> 📚 <output> 📚 <sup>
📚 <acronym> 📚 <em> 📚 <q> 📚 <textarea>
📚 <b> 📚 <i> 📚 <samp> 📚 <time>
📚 <bdo> 📚 <img> 📚 <script> 📚 <tt>
📚 <big> 📚 <input> 📚 <select> 📚 <var>
📚 <br> 📚 <kbd> 📚 <small>  
📚 <button> 📚 <label> 📚 <span>  
📚 <cite> 📚 <map> 📚 <strong>  

The <span> Element

The <span> element is often used as a container for some text.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text.


<label>

Is useful for screen-reader users, because the screen-reader will read out load the label when the user is focused on the input element.

<label> also helps users who have difficulty clicking on very small regions - such as radio buttons or checkboxes.

When an user clicks the text within <label>, it toggles the radio button/checkbox.

The for attribute of the <label> tag has the id attribute of <input> to bind them together.


<datalist>

Specifies a list of pre-defined options for <input>.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> eelement.


<output>

Represents a calculation result ie. one performed by a script.


<optgroup>

Defines a group of related options in a drop-down list


Input Types

<input type="color">

Used for input field to contain a color. Depending on browser support, a color picker can show up in the input field.

<input type="date">

Used for input field to contain a date. Depending on browser support, a date picker can show up in the input field.

<input type="datetime-local">

A date and time input field, with no time zone.
Depending on browser support, a date picker can show up in the input field.

<input type="email">

should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when submitted.

<input type="file">

Defines a file-select field and a Browse button for file uploads.

<input type="image">

Define an image as a submit button:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

<input type="month">

Allows user to select a month and year.
Depending on browser support, a date picker can show up in the input field.

<input type="number">

Defines a numeric input field.
Can set restrictions on what numbers are accepted.

<input type="range">

Defines a control for entering a number whose exact value is not important - a slider control.
Default range is 0 to 100.
Can set restrictions on what numbers are accepted with attributes:
min
max
step

<input type="reset">

Will reset all form values to their default values

<input type="search">

Used for search fields - a search field behaves like a regular text field).

<input type="tel">

Fields for a telephone number.

<input type="time">

Allows user to select a time - no time zone.
Depending on browser support, a time picker can show up in the input field.

<input type="url">

Field for an URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds .com to the keyboard to match url input.

<input type="week">

Allows user to select a week and year.
Depending on browser support, a date picker can show up in the input field.


Common Input Restrictions:

checked

Specifies an input field should be pre-selected when the page loads - for type="checkbox" or type="radio"

disabled

Specifies an input field is disabled.

max

Specifies maximum value for an input field

maxlength

Specifies maximum number of characters for an input field.

min

Specifies minimum value for an input field

pattern

Specifies a regular expression to check input value against.

readonly

Specifies that an input field is read only - cannot be changed.

required

Specifies an input field is required - must be filled in.

size

Specifies width in characters of an input field.

step

Specifies legal number intervals for an input field.

value

Specifies default value for an input field.


Other Input Attributes

multiple

Specifies user is allowed to enter more than one value in an input field.
Works with the following input types:
email
file

placeholder

Specifies a short hint describing the expected value of an input field - a sample value or a short description of the expected format.
The short hint is displayed in the input field before the user enters a value.
The placeholder attribute works with the following input types:
text
search
url
tel
email
password

autofocus

Specifies an input field automatically gets focus when page loads.

height and width

Specify height and width of an <input type="image">.

list

Refers to a <datalist> that contains pre-defined options for an <input>.

autocomplete

Specifies whether a form or an input field should have autocomplete on or off.
Autocomplete allows the browser to predict the value. When an user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with:
<form>
and the following <input> types:
text
search
url
tel
email
password
datepickers
range
color


Input form Attributes

formaction

Specifies URL of file that will process the input when the form is submitted.
Note: This attribute overrides the action attribute of <form>.
The formaction attribute works with the following input types:
submit
and
image

formenctype

Specifies how form-data should be encoded when submitted - only for forms with method="post".
Note: This attribute overrides the enctype attribute of the <form>.
The formenctype attribute works with the following input types:
submit
and
image

formmethod

Defines the HTTP method for sending form-data to the action URL.
Note: This attribute overrides the method attribute of the <form>.
The formmethod attribute works with the following input types:
submit
and
image

formtarget

Specifies a name or a keyword that indicates where to display the response that is received after submitting the form.
Note: This attribute overrides the target attribute of the <form>.
The formtarget attribute works with the following input types:
submit
and
image

formnovalidate

Specifies that an <input> should not be validated when submitted.
Note: This attribute overrides the novalidate attribute of the <form>.
The formnovalidate attribute works with the following input types:
submit

novalidate

Is a <form> attribute.
When present, novalidate specifies that all of the form-data should not be validated when submitted.


<canvas>

Is used to draw graphics, on the fly, via JavaScript.
<canvas> is only a container for graphics. JavaScript must be used to actually draw graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

🚴 w3schools HTML Canvas Graphics


<svg>

<svg> is a container for SVG graphics.
SVG stands for Scalable Vector Graphics.
SVG is used to define graphics for the Web
SVG is a W3C recommendation

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly with JavaScript.


Computer Code Elements

<code>

<code> defines a piece of computer code.

<pre>

Within <pre> text is displayed in a fixed-width font - usually Courier. It preserves both spaces and line breaks.

<kbd>

<kbd> represents user input - keyboard input or voice commands.

Text surrounded by <kbd> tags is usually displayed in a monospace font.

<sample>

<sample> represents output from a program or computing system.<

Text surrounded by <sample> tags is typically displayed in a monospace font.

<var>

<var> defines a variable.

The variable could be in a mathematical expression or a variable in programming context.


🏆 🎈 The End!!! 🏁 📣