| Tag | Description |
|---|---|
| <!DOCTYPE> | Defines the document type |
| <html> | Defines an HTML document |
| <head> | Contains metadata/information for the document |
| <title> | Defines a title for the document |
| <body> | Defines the document's body |
| <h1> to <h6> | Defines HTML headings |
| <p> | Defines a paragraph |
| <br> | Inserts a single line break |
| <hr> | Defines a thematic change in the content |
| <!--...--> | Defines a comment |
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
In HTML 5, the declaration is simple:
In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).
HTML 4.01:
XHTML 1.1:
Tip: The <!DOCTYPE> declaration is NOT case sensitive.
A simple HTML document:
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
Note: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
| Attribute | Value | Description |
|---|---|---|
| xmlns | http://www.w3.org/1999/xhtml | Specifies the XML namespace attribute (If you need your content to conform to XHTML) |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following elements can go inside the <head> element:
The <base> tag (specifies a default URL and target for all links on a page) goes inside <head>:
<html>
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html>
The <style> tag (adds style information to a page) goes inside <head>:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
The <link> tag (links to an external style sheet) goes inside <head>:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
Most browsers will display the <head> element with the following default values:
head {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:
Here are some tips for creating good titles:
So, try to make the title as accurate and meaningful as possible!
Note: You can NOT have more than one <title> element in an HTML document.
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
Add a background image to a document (with CSS):
<html>
<head>
<style>
body {
background-image: url(w3s.png);
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
Set the background color of a document (with CSS):
<html>
<head>
<style>
body {
background-color: #E6E6FA;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
Set the color of text in a document (with CSS):
<html>
<head>
<style>
body {
color: green;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>This is some text.</p>
<p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>
</body>
</html>
Set the color of unvisited links in a document (with CSS):
<html>
<head>
<style>
a:link {
color:#0000FF;
}
</style>
</head>
<body>
<p><a href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
Set the color of active links in a document (with CSS):
<html>
<head>
<style>
a:active {
color:#00FF00;
}
</style>
</head>
<body>
<p><a href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
Set the color of visited links in a document (with CSS):
<html>
<head>
<style>
a:visited {
color:#FF0000;
}
</style>
</head>
<body>
<p><a href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
The six different HTML headings:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.
Set the background color and text color of headings (with CSS):
Set the alignment of headings (with CSS):
Most browsers will display the <h1> element with the following default values:
Most browsers will display the <h2> element with the following default values:
Most browsers will display the <h3> element with the following default values:
Most browsers will display the <h4> element with the following default values:
Most browsers will display the <h5> element with the following default values:
Most browsers will display the <h6> element with the following default values:
A paragraph is marked up as follows:
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element.
Align text in a paragraph (with CSS):
Style paragraphs with CSS:
More on paragraphs:
Poem problems in HTML:
Most browsers will display the <p> element with the following default values:
Insert single line breaks in a text:
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
Note: Use the <br> tag to enter line breaks, not to add space between paragraphs.
Use <br> in a poem:
Use the <hr> tag to define thematic changes in the content:
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
Align a <hr> element (with CSS):
A noshaded <hr> (with CSS):
Set the height of a <hr> element (with CSS):
Set the width of a <hr> element (with CSS):
Most browsers will display the <hr> element with the following default values:
An HTML comment:
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.
You can use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text):
Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.
| Tag | Description |
|---|---|
| <acronym> | Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <abbr> | Defines an abbreviation or an acronym |
| <address> | Defines contact information for the author/owner of a document/article |
| <b> | Defines bold text |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <center> | Not supported in HTML5. Use CSS instead. Defines centered text |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <del> | Defines text that has been deleted from a document |
| <dfn> | Specifies a term that is going to be defined within the content |
| <em> | Defines emphasized text |
| <font> | Not supported in HTML5. Use CSS instead. Defines font, color, and size for text |
| <i> | Defines a part of text in an alternate voice or mood |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <small> | Defines smaller text |
| <strike> | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <sub> | Defines subscripted text |
| <sup> | Defines superscripted text |
| <template> | Defines a container for content that should be hidden when the page loads |
| <time> | Defines a specific time (or datetime) |
| <tt> | Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines some text that is unarticulated and styled differently from normal text |
| <var> | Defines a variable |
| <wbr> | Defines a possible line-break |
Example
An abbreviation is marked up as follows:
Definition and Usage
The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
Example
Contact information for Example.com:
Definition and Usage
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
Make some text bold (without marking it as important):
The <b> tag specifies bold text without any extra importance.
Note: According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should be denoted with the <mark> tag.
Tip: You can also use the following CSS to set bold text: "font-weight: bold;".
Example
Isolate the usernames from the surrounding text-direction settings:
Definition and Usage
BDI stands for Bi-Directional Isolation.
The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.
This element is useful when embedding user-generated content with an unknown text direction.
Example
Specify the text direction:
Example
A section that is quoted from another source:
The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements (look at example below to see how to remove the indentation).
Tip: Use <q> for inline (short) quotations.
Example
Define the title of a work with the <cite> tag:
Definition and Usage
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
Example
Define some text as computer code in a document:
The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).
Also look at:
| Tag | Description |
|---|---|
| <samp> | Defines sample output from a computer program |
| <kbd> | Defines keyboard input |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
Example
A text with a deleted part, and a new, inserted part:
The <del> tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies a URL to a document that explains the reason why the text was deleted/changed |
| datetime | YYYY-MM-DDThh:mm:ssTZD | Specifies the date and time of when the text was deleted/changed |
Example
Mark up a term with <dfn>:
The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content.
The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.
The term inside the <dfn> tag can be any of the following:
1. Just as the content of the <dfn> element:
2. Or, with the title attribute added:
3. Or, with an tag inside the element:
4. Or, with the id attribute added. Then, whenever a term is used, it can refer back to the definition with an tag:
Example
Mark up emphasized text in a document:
Example
Mark up text that is set off from the normal prose in a document:
The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Use the <i> element only when there is not a more appropriate semantic element, such as:
Example
A text with a deleted part, and a new, inserted part:
Definition and Usage
The <ins> tag defines a text that has been inserted into a document. Browsers will usually underline inserted text.
Tip: Also look at the <del> tag to markup deleted text.
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies a URL to a document that explains the reason why the text was inserted/changed |
| datetime | YYYY-MM-DDThh:mm:ssTZD | Specifies the date and time when the text was inserted/changed |
Example
Define some text as keyboard input in a document:
Definition and Usage
The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).
Also look at:
| Tag | Description |
|---|---|
| <code> | Defines a piece of computer code |
| <samp> | Defines sample output from a computer program |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
Example
Highlight parts of a text:
Definition and Usage
The <mark> tag defines text that should be marked or highlighted.
Example
Use the meter element to display a scalar value within a given range (a gauge):
Definition and Usage
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.
Tip: Always add the <label> tag for best accessibility practices!
| Attribute | Value | Description |
|---|---|---|
| form | form_id | Specifies which form the <meter> element belongs to |
| high | number | Specifies the range that is considered to be a high value |
| low | number | Specifies the range that is considered to be a low value |
| max | number | Specifies the maximum value of the range |
| min | number | Specifies the minimum value of the range. Default value is 0 |
| optimum | number | Specifies what value is the optimal value for the gauge |
| value | number | Required. Specifies the current value of the gauge |
Example
Preformatted text:
Definition and Usage
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
Also look at:
| Tag | Description |
|---|---|
| <code> | Defines a piece of computer code |
| <samp> | Defines sample output from a computer program |
| <kbd> | Defines keyboard input |
| <var> | Defines a variable |
Example
Show a progress bar:
The <progress> tag represents the completion progress of a task.
Tip: Always add the <label> tag for best accessibility practices!
Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.
Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies how much work the task requires in total. Default value is 1 |
| value | number | Specifies how much of the task has been completed |
Example
Mark up a short quotation:
The <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Tip: Use <blockquote> for long quotations.
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies the source URL of the quote |
Example
A ruby annotation:
The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.
Use <rp> together with <ruby> and <rt>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.
Example
A ruby annotation:
Definition and Usage
The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
Use <rt> together with <ruby> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.
Example
A ruby annotation:
Definition and Usage
The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
Use <rt> together with <ruby> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.
Example
A ruby annotation:
Definition and Usage
The <ruby> tag specifies a ruby annotation.
A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.
Use <ruby> together with <rt> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that do not support ruby annotations.
Example
Mark up text that is no longer correct:
Definition and Usage
The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it.
The <s> tag should not be used to define deleted text in a document, use the <del> tag for that.
Example
Define some text as sample output from a computer program in a document:
Definition and Usage
The <samp> tag is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.
Also look at:
| Tag | Description |
|---|---|
| <code> | Defines a piece of computer code |
| <kbd> | Defines keyboard input |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
Example
Define a smaller text:
Definition and Usage
The <small> tag defines smaller text (like copyright and other side-comments).
Tip: This tag is not deprecated, but it is possible to achieve richer (or the same) effect with CSS.
Example
Define important text in a document:
Definition and Usage
The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.
Tip: Use the <b> tag to specify bold text without any extra importance!
Example
Subscript text:
Definition and Usage
The <sub> tag defines subscript text. Subscript text 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.
Tip: Use the <sup> tag to define superscripted text.
Example
Superscript text:
Definition and Usage
The <sup> tag defines superscript text. Superscript text 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].
Tip: Use the <sub> tag to define subscript text.
Example
Use <template> to hold some content that will be hidden when the page loads. Use JavaScript to display it:
Definition and Usage
The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.
The content inside <template> can be rendered later with a JavaScript.
You can use the <template> tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
Example
How to define a time and a date:
Definition and Usage
The <time> tag defines a specific time (or datetime).
The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
| Attribute | Value | Description |
|---|---|---|
| datetime | datetime | Represent a machine-readable format of the <time> element |
Example
Mark up a misspelled word with the <u> tag:
Definition and Usage
The <u> tag represents some text that is unarticulated and styled differently from normal text, such as misspelled words or proper names in Chinese text. The content inside is typically displayed with an underline. You can change this with CSS (see example below).
Tip: Avoid using the <u> element where it could be confused for a hyperlink!
Example
Define some text as variables in a document:
Definition and Usage
The <var> tag is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.
Also look at:
| Tag | Description |
|---|---|
| <code> | Defines a piece of computer code |
| <samp> | Defines sample output from a computer program |
| <kbd> | Defines keyboard input |
| <pre> | Defines preformatted text |
Example
A text with word break opportunities:
Definition and Usage
The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.
Tip: When a word is too long, the browser might break it at the wrong place. You can use the <wbr> element to add word break opportunities.
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <button> | Defines a clickable button |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Example
An HTML form with two input fields and one submit button:
Definition and Usage
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
| Attribute | Value | Description |
|---|---|---|
| accept-charset | character_set | Specifies the character encodings that are to be used for the form submission |
| action | URL | Specifies where to send the form-data when a form is submitted |
| autocomplete | on off | Specifies whether a form should have autocomplete on or off |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how the form-data should be encoded when submitting it to the server (only for method="post") |
| method | get post | Specifies the HTTP method to use when sending form-data |
| name | text | Specifies the name of a form |
| novalidate | novalidate | Specifies that the form should not be validated when submitted |
| rel | external help license next nofollow noopener noreferrer opener prev search | Specifies the relationship between a linked resource and the current document |
| target | _blank _self _parent _top | Specifies where to display the response that is received after submitting the form |
Example
An HTML form with three input fields; two text fields and one submit button:
Definition and Usage
The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
The different input types are as follows:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"> (default value)<input type="time"><input type="url"><input type="week">Tips and Notes
Tip: Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.
| Attribute | Value | Description |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type | Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file") |
| alt | text | Specifies an alternate text for images (only for type="image") |
| autocomplete | on off | Specifies whether an <input> element should have autocomplete enabled |
| autofocus | autofocus | Specifies that an <input> element should automatically get focus when the page loads |
| checked | checked | Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| dirname | inputname.dir | Specifies that the text direction will be submitted |
| disabled | disabled | Specifies that an <input> element should be disabled |
| form | form_id | Specifies the form the <input> element belongs to |
| formaction | URL | Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image") |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image") |
| formmethod | get post | Defines the HTTP method for sending data to the action URL (for type="submit" and type="image") |
| formnovalidate | formnovalidate | Defines that form elements should not be validated when submitted |
| formtarget | _blank _self _parent _top framename | Specifies where to display the response that is received after submitting the form (for type="submit" and type="image") |
| height | pixels | Specifies the height of an <input> element (only for type="image") |
| list | datalist_id | Refers to a <datalist> element that contains pre-defined options for an <input> element |
| max | number date | Specifies the maximum value for an <input> element |
| maxlength | number | Specifies the maximum number of characters allowed in an <input> element |
| min | number date | Specifies a minimum value for an <input> element |
| minlength | number | Specifies the minimum number of characters required in an <input> element |
| multiple | multiple | Specifies that a user can enter more than one value in an <input> element |
| name | text | Specifies the name of an <input> element |
| pattern | regexp | Specifies a regular expression that an <input> element's value is checked against |
| placeholder | text | Specifies a short hint that describes the expected value of an <input> element |
| readonly | readonly | Specifies that an input field is read-only |
| required | required | Specifies that an input field must be filled out before submitting the form |
| size | number | Specifies the width, in characters, of an <input> element |
| src | URL | Specifies the URL of the image to use as a submit button (only for type="image") |
| step | number any | Specifies the interval between legal numbers in an input field |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week | Specifies the type <input> element to display |
| value | text | Specifies the value of an <input> element |
| width | pixels | Specifies the width of an <input> element (only for type="image") |
Example
A multi-line text input control (text area):
Definition and Usage
The <textarea> tag defines a multi-line text input control.
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area is specified by the cols and rows attributes (or with CSS).
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 text area will be submitted).
The id attribute is needed to associate the text area with a label.
Tip: Always add the <label> tag for best accessibility practices!
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a text area should automatically get focus when the page loads |
| cols | number | Specifies the visible width of a text area |
| dirname | textareaname.dir | Specifies that the text direction of the textarea will be submitted |
| disabled | disabled | Specifies that a text area should be disabled |
| form | form_id | Specifies which form the text area belongs to |
| maxlength | number | Specifies the maximum number of characters allowed in the text area |
| name | text | Specifies a name for a text area |
| placeholder | text | Specifies a short hint that describes the expected value of a text area |
| readonly | readonly | Specifies that a text area should be read-only |
| required | required | Specifies that a text area is required/must be filled out |
| rows | number | Specifies the visible number of lines in a text area |
| wrap | hard soft |
Specifies how the text in a text area is to be wrapped when submitted in a form |
Example
A clickable button is marked up as follows:
Definition and Usage
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!
Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that a button should automatically get focus when the page loads |
| disabled | disabled | Specifies that a button should be disabled |
| form | form_id | Specifies which form the button belongs to |
| formaction | URL | Specifies where to send the form-data when a form is submitted. Only for type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how form-data should be encoded before sending it to a server. Only for type="submit" |
| formmethod | get post |
Specifies how to send the form-data (which HTTP method to use). Only for type="submit" |
| formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission. Only for type="submit" |
| formtarget | _blank _self _parent _top framename |
Specifies where to display the response after submitting the form. Only for type="submit" |
| name | name | Specifies a name for the button |
| type | button reset submit |
Specifies the type of button |
| value | text | Specifies an initial value for the button |
Example
Create a drop-down list with four options:
Definition and Usage
The <select> element is used to create a drop-down list.
The <select> element 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.
Tip: Always add the <label> tag for best accessibility practices!
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
Example
Group related options with <optgroup> tags:
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that an option-group should be disabled |
| label | text | Specifies a label for an option-group |
Example
A drop-down list with four options:
Definition and Usage
The <option> tag defines an option in a select list.
<option> elements go inside a <select>, <optgroup>, or <datalist> element.
Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.
Tip: If you have a long list of options, you can group related options within the <optgroup> tag.
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that an option should be disabled |
| label | text | Specifies a shorter label for an option |
| selected | selected | Specifies that an option should be pre-selected when the page loads |
| value | text | Specifies the value to be sent to a server |
Example
Three radio buttons with labels:
Definition and Usage
The <label> tag defines a label for several elements:
Proper use of labels with the elements above will benefit:
<label> element, it toggles the input (this increases the hit area). | Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Example
Group related elements in a form:
Definition and Usage
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
Tips and Notes
Tip: The <legend> tag is used to define a caption for the <fieldset> element.
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that a group of related form elements should be disabled |
| form | form_id | Specifies which form the fieldset belongs to |
| name | text | Specifies a name for the fieldset |
Example
Group related elements in a form:
Example
A datalist with pre-defined options (connected to an <input> element):
Definition and Usage
The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).
Example
Perform a calculation and show the result in an <output> element:
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the relationship between the result of the calculation, and the elements used in the calculation |
| form | form_id | Specifies which form the output element belongs to |
| name | name | Specifies a name for the output element |
| Tag | Description |
|---|---|
| <frame> | Not supported in HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5. Defines a set of frames |
| <noframes> | Not supported in HTML5. Defines an alternate content for users that do not support frames |
| <iframe> | Defines an inline frame |
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Tip: Use CSS to style the <iframe> (see example below).
Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the <iframe> is.
| Attribute | Value | Description |
|---|---|---|
| allow | Specifies a feature policy for the <iframe> | |
| allowfullscreen | true false | Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method |
| allowpaymentrequest | true false | Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API |
| height | pixels | Specifies the height of an <iframe>. Default height is 150 pixels |
| loading | eager lazy | Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met |
| name | text | Specifies the name of an <iframe> |
| referrerpolicy | 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 when fetching the iframe |
| sandbox | allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation | Enables an extra set of restrictions for the content in an <iframe> |
| src | URL | Specifies the address of the document to embed in the <iframe> |
| srcdoc | HTML_code | Specifies the HTML content of the page to show in the <iframe> |
| width | pixels | Specifies the width of an <iframe>. Default width is 300 pixels |
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines a client-side image map |
| <area> | Defines an area inside an image map |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <picture> | Defines a container for multiple image resources |
| <svg> | Defines a container for SVG graphics |
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example below).
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy | Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
The <map> tag is used to define an image map. An image map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.
| Attribute | Value | Description |
|---|---|---|
| name | mapname | Required. Specifies the name of the image map |
Another image map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
<area> elements are always nested inside a <map> tag.
Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for the area. Required if the href attribute is present |
| coords | coordinates | Specifies the coordinates of the area |
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the hyperlink target for the area |
| hreflang | language_code | Specifies the language of the target URL |
| media | media query | Specifies what media/device the target URL is optimized for |
| referrerpolicy | 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 | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Specifies the relationship between the current document and the target URL |
| shape | default rect circle poly | Specifies the shape of the area |
| target | _blank _parent _self _top framename | Specifies where to open the target URL |
| type | media_type | Specifies the media type of the target URL |
Another image map, with clickable areas:
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> tag is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.
Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>.
Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.
Tip: For a complete reference of all the properties and methods, please visit our HTML Canvas Reference.
| Attribute | Value | Description |
|---|---|---|
| height | pixels | Specifies the height of the canvas. Default value is 150 |
| width | pixels | Specifies the width of the canvas Default value is 300 |
Another <canvas> example:
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
//Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
The <figcaption> tag defines a caption for a <figure> element.
The <figcaption> element can be placed as the first or last child of the <figure> element.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
Tip: The <figcaption> element is used to add a caption for the <figure> element.
The <picture> tag gives web developers more flexibility in specifying image resources.
The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
The <picture> element contains two tags: one or more <source> tags and one <img> tag.
The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.
Tip: The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.
The <svg> tag defines a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
To learn more about SVG, please read our SVG Tutorial.
Example
Play a sound file:
Definition and Usage
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.
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the audio will start playing as soon as it is ready |
| controls | controls | Specifies that audio controls should be displayed (such as a play/pause button etc) |
| loop | loop | Specifies that the audio will start over again, every time it is finished |
| muted | muted | Specifies that the audio output should be muted |
| preload | auto metadata none | Specifies if and how the author thinks the audio should be loaded when the page loads |
| src | URL | Specifies the URL of the audio file |
Example
An audio player with two source files. The browser will choose the first <source> it supports:
Definition and Usage
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.
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Required when <source> is used in <audio> and <video>. Specifies the URL of the media file |
| srcset | URL | Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations |
| type | MIME-type | Specifies the MIME-type of the resource |
Example
A video with subtitle tracks for two languages:
Definition and Usage
The <track> tag specifies text tracks for <audio> or <video> elements.
This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.
Tracks are formatted in WebVTT format (.vtt files).
| Attribute | Value | Description |
|---|---|---|
| default | default | Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate |
| kind | captions chapters descriptions metadata subtitles | Specifies the kind of text track |
| label | text | Specifies the title of the text track |
| src | URL | Required. Specifies the URL of the track file |
| srclang | language_code | Specifies the language of the track text data (required if kind="subtitles") |
Example
Play a video:
Definition and Usage
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
There are three supported video formats in HTML: MP4, WebM, and OGG.
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the video will start playing as soon as it is ready |
| controls | controls | Specifies that video controls should be displayed (such as a play/pause button etc). |
| height | pixels | Sets the height of the video player |
| loop | loop | Specifies that the video will start over again, every time it is finished |
| muted | muted | Specifies that the audio output of the video should be muted |
| poster | URL | Specifies an image to be shown while the video is downloading, or until the user hits the play button |
| preload | auto metadata none | Specifies if and how the author thinks the video should be loaded when the page loads |
| src | URL | Specifies the URL of the video file |
| width | pixels | Sets the width of the video player |
Example
Create a link to W3Schools.com:
Definition and Usage
The <a> tag defines a hyperlink, which is used to link from one page to another.
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:
| Attribute | Value | Description |
|---|---|---|
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the URL of the page the link goes to |
| hreflang | language_code | Specifies the language of the linked document |
| media | media_query | Specifies what media/device the linked document is optimized for |
| ping | 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 | 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 | 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 | _blank _parent _self _top | Specifies where to open the linked document |
| type | media_type | Specifies the media type of the linked document |
Default CSS Settings
Most browsers will display the element with the following default values:
Example
Link to an external style sheet:
Definition and Usage
The <link> tag defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
The <link> element is an empty element, it contains attributes only.
| Attribute | Value | Description |
|---|---|---|
| crossorigin | anonymous use-credentials | Specifies how the element handles cross-origin requests |
| href | URL | Specifies the location of the linked document |
| hreflang | language_code | Specifies the language of the text in the linked document |
| media | media_query | Specifies on what device the linked document will be displayed |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer to use when fetching the resource |
| rel | 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 | HeightxWidth any | Specifies the size of the linked resource. Only for rel="icon" |
| title | Defines a preferred or an alternate stylesheet | |
| type | media_type | Specifies the media type of the linked document |
Example
A set of navigation links:
Definition and Usage
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dir> | Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <dd> | Defines a description of a term/name in a description list |
Example
An unordered HTML list:
Definition and Usage
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Example
Two different ordered lists (the first list starts at 1, and the second starts at 50):
Example
One ordered (<ol>) and one unordered (<ul>) HTML list:
Definition and Usage
The <li> tag defines a list item.
The <li> 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.
| Attribute | Value | Description |
|---|---|---|
| value | number | Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number |
Example
A description list, with terms and descriptions:
Definition and Usage
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).
Example
A description list, with terms and descriptions:
Definition and Usage
The <dt> tag defines a term/name in a description list.
The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).
Example
A description list, with terms and descriptions:
Definition and Usage
The <dd> tag is used to describe a term/name in a description list.
The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <caption> | Defines a table caption |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
Example
A simple HTML table, containing two columns and two rows:
Definition and Usage
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
Example
A table with a caption:
Definition and Usage
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.
Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.
Example
A simple HTML table with three rows, two header cells and four data cells:
Definition and Usage
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
| Attribute | Value | Description |
|---|---|---|
| abbr | text | Specifies an abbreviated version of the content in a header cell |
| colspan | number | Specifies the number of columns a header cell should span |
| headers | header_id | Specifies one or more header cells a cell is related to |
| rowspan | number | Specifies the number of rows a header cell should span |
| scope | col colgroup row rowgroup | Specifies whether a header cell is a header for a column, row, or group of columns or rows |
Example
A simple HTML table with three rows; one header row and two data rows:
Definition and Usage
The <tr> tag defines a row in an HTML table.
Example
A simple HTML table, with two rows and four table cells:
Definition and Usage
The <td> tag defines a standard data cell in an HTML table.
An HTML table has two kinds of cells:
<td> element)The text in <td> elements are regular and left-aligned by default.
The text in <th> elements are bold and centered by default.
Example
An HTML table with a <thead>, <tbody>, and a <tfoot> element:
Definition and Usage
The <thead> tag is used to group header content in an HTML table.
The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
Note: The <thead> element must have one or more <tr> tags inside.
The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption> and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!
Example
An HTML table with a <thead>, <tbody>, and a <tfoot> element:
The <tbody> tag is used to group the body content in an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
Note: The <tbody> element must have one or more <tr> tags inside.
The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!
Example
An HTML table with a <thead>, <tbody>, and a <tfoot> element:
Definition and Usage
The <tfoot> tag is used to group footer content in an HTML table.
The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
Note: The <tfoot> element must have one or more <tr> tags inside.
The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!
Set the background color of the three columns with the <colgroup> and <col> tags:
Definition and Usage
The <col> tag specifies column properties for each column within a <colgroup> element.
The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Example
Set the background color of the three columns with the <colgroup> and <col> tags:
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
| Tag | Description |
|---|---|
| <style> | Defines style information for a document |
| <div> | Defines a section in a document |
| <span> | Defines a section in a document |
| <header> | Defines a header for a document or section |
| <footer> | Defines a footer for a document or section |
| <main> | Specifies the main content of a document |
| <section> | Defines a section in a document |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <dialog> | Defines a dialog box or window |
| <summary> | Defines a visible heading for a <details> element |
| <data> | Adds a machine-readable translation of a given content |
Example
Use of the <style> element to apply a simple style sheet to an HTML document:
The <style> tag is used to define style information (CSS) for a document.
Inside the <style> the element you specify how HTML elements should render in a browser.
Tips and Notes
Note: 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 (see example below)!
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
Example
A <div> section in a document that is styled with CSS:
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the <div> element.
Example
A <span> element which is used to color a part of a text:
Definition and Usage
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.
Example
A header for an <article>:
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.
Example
A footer section in a document:
The <footer> tag defines a footer for a document or section.
A <footer> element typically contains:
You can have several <footer> elements in one document.
Example
Specify the main content of the document:
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Example
Use CSS to style the <main> element:
Example
Two sections in a document:
Example
Three articles with independent, self-contained content:
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.
Potential sources for the <article> element:
Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below).
Use CSS to style the
Example
Display some content aside from the content it is placed in:
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.
Tip: The <aside> content is often placed as a sidebar in a document.
Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).
Example
Specify details that the user can open and close on demand:
Definition and Usage
The <details> tag specifies additional details that the user can open and close on demand.
The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.
Any sort of content can be put inside the <details> tag.
Example
Using the <dialog> element:
Definition and Usage
The <dialog> tag defines a dialog box or subwindow.
The <dialog> element makes it easy to create popup dialogs and modals on a web page.
Example
Using the <summary> element:
The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.
Note: The <summary> element should be the first child element of the <details> element.
Example
The following example displays product names but also associates each name with a product number:
The <data> tag is used to add a machine-readable translation of a given content.
This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.
Tip: If the content is time- or date-related, use the <time> element instead.
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <meta> | Defines metadata about an HTML document |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document |
Example :-
A simple HTML document, with a <title> tag inside the head section:
Definition and Usage
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following elements can go inside the <head> element:
Example
The <base> tag (specifies a default URL and target for all links on a page) goes inside <head>:
Example
Describe metadata within an HTML document:
Definition and Usage
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below).
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh | Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport | Specifies a name for the metadata |
Examples
Define keywords for search engines:
Define a description of your web page:
Define the author of a page:
Refresh document every 30 seconds:
Setting the viewport to make your website look good on all devices:
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Example
Specify a default URL and a default target for all links on a page:
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be inside the <head> element.
| Attribute | Value | Description |
|---|---|---|
| href | URL | Specifies the base URL for all relative URLs in the page |
| target | _blank _parent _self _top | Specifies the default target for all hyperlinks and forms in the page |
| Tag | Description |
|---|---|
| <script> | Defines a client-side script |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet |
| <embed> | Defines a container for an external (non-HTML) application |
| <object> | Defines an embedded object |
| <param> | Defines a parameter for an object |
Example
Write "Hello JavaScript!" with JavaScript:
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.
| Attribute | Value | Description |
|---|---|---|
| async | 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 | anonymous use-credentials | Sets the mode of the request to an HTTP CORS Request |
| defer | 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 | filehash | Allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated |
| nomodule | True False | Specifies that the script should not be executed in browsers supporting ES2015 modules |
| referrerpolicy | 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 | URL | Specifies the URL of an external script file |
| type | scripttype | Specifies the media type of the script |
In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.
This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:
Example
Use of the
The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.
The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.
Example
An embedded image:
Example
An embedded image:
Example
Set the "autoplay" parameter to "true", so the sound will start playing as soon as the page loads: