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.
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.
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:
<title>
<style>
<base>
<link>
<meta>
<script>
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:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
Here are some tips for creating good titles:
Go for a longer, descriptive title (avoid one- or two-word titles)
Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
Do not use just a list of words as the title (this may reduce the page's position in search results)
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.
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.
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.
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element.
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.
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.
Defines an HTML form for user input
| 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 |
Defines an input control
| 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 | inputname.dir | Specifies that the text direction will be submitted |
| disabled | 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 | |
| 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") |
Defines a multiline input control (text area). 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.
| 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 |
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 |
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.
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
| 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 |
Defines a group of related options in a <select> element (drop-down list).
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that an option-group should be disabled |
| label | text | Specifies a label for an option-group |
Defines an option in a drop-down 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.
| 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 |
Defines a label for an <input> element
Tip:The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.
| 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 |
Groups related elements in a form. The <fieldset> tag draws a box around the related elements.
Tip:The <legend> tag is used to define a caption for the <fieldset> element.
<form action="/action_page.php"></form>
<fieldset></fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"></input>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"></input>
<label for="email">Email:</label>
<input type="email" id="email" name="email"></input>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"></input>
<input type="submit" value="Submit"></input>
</fieldset>
</form>
| 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 |
Defines a caption for a <fieldset> element
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).
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser"></input>
<datalist id="browsers"></datalist>
<option value="Edge"></option>
<option value="Firefox"></option>
<option value="Chrome"></option>
<option value="Opera">
<option value="Safari">
</datalist>
Used to represent the result of a calculation (like one performed by a script).
<form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
<input type="range" id="a" value="50">
<input type="number" id="b" value="25">
<output name="x" for="a b"></output>
</form>
| 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 |
Defines an inline frame. An inline frame is used to embed another document (website) 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.
frame src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
| 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 | Default -nothing allowed 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 |
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:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
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).
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
| 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 (Client Side). 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.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
| Attribute | Value | Description |
|---|---|---|
| name | mapname | Required. Specifies the name of the image 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 |
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>.
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.
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
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.
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
The <svg> tag defines a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
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.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
| 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 |
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 |
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).
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
| 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") |
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.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
| 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 |
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:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
| 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 |
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.
<head>
<link rel="stylesheet" href="styles.css">
</head>
| 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 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 |
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
The <li> tag is used to define each list item.
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
The <li> tag is used to define each list item.
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
| Attribute | Value | Description |
|---|---|---|
| reversed | reversed | Specifies that the list order should be reversed (9,8,7...) |
| start | number | Specifies the start value of an ordered list |
| type | 1 A a I i | Specifies the kind of marker to use in the list |
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 |
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).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Defines a term/name in a description list
Defines a description of a term/name in a description list
The <table> tag defines an HTML table.
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
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-sidecan be used to align and place the caption.
The <th> tag defines a header cell in an HTML table. The text in <th> elements are bold and centered 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 |
The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.
The <td> tag defines a standard data cell in an HTML table.
The text in <td> elements are regular and left-aligned by default.
| Attribute | Value | Description |
|---|---|---|
| colspan | number | Specifies the number of columns a cell should span |
| headers | header_id | Specifies one or more header cells a cell is related to |
| rowspan | number | Sets the number of rows a cell should span |
The <thead> tag is used to group header content in an HTML table.
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.
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.
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)!
The <tbody> tag is used to group the body content in an HTML table.
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.
The <tfoot> tag is used to group footer content in an HTML table.
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.
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.
| Attribute | Value | Description |
|---|---|---|
| span | number | Specifies the number of columns a <col> element should span |
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
<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.
| Attribute | Value | Description |
|---|---|---|
| span | number | Specifies the number of columns a <col> element should span |
The <style> tag is used to define style information (CSS) for a document.
Inside the <style> element you specify how HTML elements should render in a browser.
Tip: To link to an external style sheet, use the <link> tag.
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.
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.
Tip: The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element
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.
The <section> tag defines a section in a document.
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:
Forum post
Blog post
News story
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.
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.
Tip:The <summary> tag is used in conjuction with <details> to specify a visible heading for the details.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions.</p>
</details>
| Attribute | Value | Description |
|---|---|---|
| open | open | Specifies that the details should be visible (open) to the user |
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.
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 |
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 |
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 |
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.
The class attribute specifies one or more class names for an element.
The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
| Value | Description |
|---|---|
| classname | Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element. |
The contenteditable attribute specifies whether the content of an element is editable or not.
Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.
| Value | Description |
|---|---|
| true | Specifies that the element is editable |
| false | Specifies that the element is not editable |
The data-* attributes is used to store custom data private to the page or application.
The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.
The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).
The data-* attributes consist of two parts:
The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
The attribute value can be any string
Note: Custom attributes prefixed with "data-" will be completely ignored by the user agent.
<li data-animal-type="bird">Owl</li>
The dir attribute specifies the text direction of the element's content.
The draggable attribute specifies whether an element is draggable or not.
Tip: Links and images are draggable by default.
Tip: The draggable attribute is often used in drag and drop operations. Read our HTML Drag and Drop tutorial to learn more.
| Value | Description |
|---|---|
| true | Specifies that the element is draggable |
| false | Specifies that the element is not draggable |
| auto | Uses the default behavior of the browser |
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
The lang attribute specifies the language of the element's content.
Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on.
The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.
The following can be spellchecked:
Text values in input elements (not password)
Text in <textarea> elements
Text in editable elements
| Value | Description |
|---|---|
| true | The element is to have its spelling and grammar checked |
| false | The element is not to be checked |
The style attribute specifies an inline style for an element.
The style attribute will override any style set globally, e.g. styles specified in the <style> tag or in an external style sheet.
The style attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
The tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
The translate attribute specifies whether the content of an element should be translated or not.
| Value | Description |
|---|---|
| yes | Specifies that the content of the element should be translated |
| no | Specifies that the content of the element must not be translated |
Defines an abbreviation or an acronym
Defines contact information for the author/owner of a document/article
Defines bold text
Isolates a part of text that might be formatted in a different direction from other text outside it
Overrides the current text direction
Defines a section that is quoted from another source
Defines the title of a work
Defines a piece of computer code
Defines text that has been deleted from a document
Specifies a term that is going to be defined within the content
Defines emphasized text
Defines a part of text in an alternate voice or mood
Defines a text that has been inserted into a document
Defines keyboard input
Defines marked/highlighted text
Defines a scalar measurement within a known range (a gauge)
Defines preformatted text
Represents the progress of a task
Defines a short quotation
Defines what to show in browsers that do not support ruby annotations
Defines an explanation/pronunciation of characters (for East Asian typography)
Defines a ruby annotation (for East Asian typography)
Defines text that is no longer correct
Defines sample output from a computer program
Defines smaller text
Defines important text
Defines subscripted text
Defines superscripted text
Defines a container for content that should be hidden when the page loads
Defines a specific time (or datetime)
Defines some text that is unarticulated and styled differently from normal text
Defines a variable
Defines a possible line-break