HTML (Hypertext Markup Language) is an XML-compliant system of annotating documents with 'tags'. It is used specifically to create content for web pages and web applications, which can then be shared over a network.
Apart from text, the current version of HTML supports many different types of media, including images and videos.
An h1–h6 element must have both a start tag and an end tag.1
h1–h6 elements are block level elements by default (CSS style: display: block).2
h1–h6 elements should not be confused with the section element
Heading tags (h1–h6) are not related to the head tag.
Permitted Content: phrasing content
The different CSS-styles for headings differ usually in font-size and margin. The following CSS-settings for h1–h6 elements can serve as an orientation (characterized as 'informative' by the W3C)
Search engine spiders (the code that adds a page to a search engine) automatically pays more attention to higher importance (h1 has most, h2 has less, h3 has even less, ...) headings to discern what a page is about.
The various table elements and their content attributes together define the table model. The <table> element is the container element for table models/tabular data. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap. The list below describes the various elements in the table model:
<table> - The container element for table models/tabular data. <table> represents data with more than one dimension in the form of a table.<caption> - Table caption or title (Like a figcaption to a figure)<col> - A column (a no-content element)<colgroup> - A grouping of columns<thead> - Table header (only one)<tbody> - Table body / content (multiple are okay)<tfoot> - Table footer (only one)<tr> - Table row<th> - Table header cell<td> - Table data cellSemantically, tables are meant for holding tabular data. You can think of it as a way to display and describe data that would make sense in a spreadsheet (columns and rows).
Using tables for layout is not recommended. Instead, use CSS rules for layout and formatting, including display: table.
One notable exception typically displayed in the industry regarding using <table> layout is in regards to HTML email: some email clients, including Outlook, rolled back to older rendering engines after Microsoft lose their monopoly case vs. the EU. In order for Microsoft to make IE not part of the OS, they simply rolled back Outlook's rendering engine to an earlier version of Trident. This rollback simply doesn't support modern web technologies, so using <table> based layouts for HTML email is the only way to ensure cross-browser/platform/client compatibility.
As with other HTML5 void elements, <input> is self-closing and may be written <input />. HTML5 does not require this slash.
The following are valid input types in HTML:
The following are newly introduced input types as a part of HTML 5 standard. Some of these types are not supported by all web browsers. In the case where a type is not supported, the input element will default to the text type.
To check which browsers support which types, you can go to caniuse.com.
The HTML5 standards does not list the main element as a sectioning element.
See Also
You can add a list-style-type CSS property to an <ul> tag in order to change what kind of icon is used to mark each list item, for example <ul style="list-style-type:disc">. The following list-style-types are permitted:
You can also add a type attribute to an <ol> tag in order to change how numbering is done, for example <ol type="1">. The following types are permitted:
Anything starting with <!-- and ending with --> is a comment. Comments cannot contain two adjacent dashes (--), and must end with exactly two dashes (i.e. ---> is not correct).
Comments are not visible on a web page and cannot be styled with CSS. They can be used by the page's developer to make notes within the HTML, or to hide certain content during development.
For dynamic or interactive pages, hiding and showing content is done with JavaScript and CSS rather than with HTML comments.
JavaScript can be used to get the content of HTML comment nodes and these nodes can be dynamically created, added and removed from the document but this will not affect how the page is displayed.
Since HTML comments are part of the page's source code, they are downloaded to the browser along with the rest of the page. The source code can typically be viewed using the web browser's menu option to "View Source" or "View Page Source."
An iframe is used to embed another document in the current HTML document.
You CAN use iframes for displaying:
You SHOULD use an iframe as a last resort, as it has problems with bookmarking and navigation, and there are always better options other than an iframe. This SO question should help you understand more about the ups and downs of iframes.
Some sites cannot be displayed using an iframe, because they enforce a policy called Same-origin policy. This means that the site that the iframe lies on must be on the same domain as the one to be displayed.
This policy also applies to manipulating content that lives inside of an iFrame. If the iFrame is accessing content from a different domain, you will not be able to access or manipulate the content inside of an iFrame.
The iframe element on W3C
sandbox attributeThe sandbox attribute, when set, adds extra restrictions to the iframe. A space separated list of tokens can be used to relax these restrictions.
| Value | Details |
|---|---|
allow-forms | Allows forms to be submitted. |
allow-pointer-lock | Enables the JavaScript pointer API. |
allow-popups | Popups can be created using window.open or <a target="_blank" |
allow-same-origin | The iframe document uses its real origin instead of being given a unique one. If used with allow-scripts the iframe document can remove all sandboxing if it's from the same origin as the parent document. |
allow-scripts | Enables scripts. The iframe document and parent document may be able to communicate with each other using the postMessage() API. If used with allow-same-origin the iframe document can remove all sandboxing if it's from the same origin as the parent document. |
allow-top-navigation | Allows the iframe's content to change the location of the top level document. |
class and id are global attributes, and may therefore be assigned to any HTML element.HTML5, the class and id attributes can be used on any element. In HTML 4.0.1, they were off-limits to the <base>, <head>, <html>, <meta>, <param>, <script>, <style> and <title> tags.The value of the lang attribute must be a valid BCP 47 language tag or the empty string (if the language is unknown).
The BCP 47 language tags are listed in the IANA Language Subtag Registry.
The relevant WCAG 2.0 Success Criteria are:
The related WCAG 2.0 Techniques are:
The <!DOCTYPE> declaration is not an HTML tag. It is used for specifying which version of HTML the document is using. This is referred to as the document type declaration (DTD).
The <!DOCTYPE> declaration is NOT case sensitive. To check if the HTML of your Web pages is valid, go to W3C's validation service.
The <form> element represents a section that contains form-associated elements (e.g. <button> <fieldset> <input> <label> <output> <select> <textarea>) that submits information to a server. Both starting (<form>) and ending (</form>) tags are required.
canvas is only a container for graphics, and the actual drawing of graphics is done by JavaScript.SVG is an XML-based language for creating scalable vector images. It can be written directly into an HTML document or embedded from external SVG files. Inline SVG can be restyled and modified using CSS and JavaScript respectively.
Browser support for SVG varies, but can be ascertained here.
For more comprehensive information, see the SVG documentation.
The meta tag is an HTML tag used to set the metadata of the HTML document. Meta tags need to go in the head element. A page may have any number of meta tags.
The meta tag keywords is not typically used by robots. Most search engines determine what keywords fit with the content on the web pages. That being said, nothing says you should no longer include the keywords meta tag.
The meta data of a page is mostly used by the browser (like the scaling of a document) and web crawling spiders used by search engines (Google, Yahoo!, Bing).
The spec gives a number of standardized metadata names for use with <meta name> and standardized metadata pragma directives for use with <meta http-equiv>. However, many services across the internet (web crawlers, authoring tools, social sharing services, etc.) use the <meta name> form as a generic extension point for metadata. Some of these are listed on the spec's wiki page.
A void element cannot have any content but may have attributes. Void elements are self-closing, so they must not have a closing tag.
In HTML5, the following elements are void:
areabasebrcolembedhrimginputkeygenlinkmetaparamsourcetrackwbrThe code element should be used for any kind of "string that a computer would recognize" (HTML5), for example:
For variables, the var element can be used.
For computer output, the samp element can be used.
For user input, the kbd element can be used.
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.0 | 3.5 (1.9.1) | 9.0 | 10.50 | 3.1 |
<audio>: PCM in WAVE | (Yes) | 3.5 (1.9.1) | No support | 10.50 | 3.1 |
<audio>: Vorbis in WebM | (Yes) | 4.0 (2.0) | No support | 10.60 | 3.1 |
<audio>: Streaming Vorbis/Opus in WebM via MSE | ? | 36.0 | ? | ? | ? |
<audio>: Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | No support | 10.50 | No support |
<audio>: MP3 | (Yes) | (Yes) | 9.0 | (Yes) | 3.1 |
<audio>: MP3 in MP4 | ? | ? | ? | ? | (Yes) |
<audio>: AAC in MP4 | (Yes) | (Yes) | 9.0 | (Yes) | 3.1 |
<audio>: Opus in Ogg | 27.0 | 15.0 (15.0) | ? | ? | ? |
<video>: VP8 and Vorbis in WebM | 6.0 | 4.0 (2.0) | 9.0 | 10.60 | 3.1 |
<video>: VP9 and Opus in WebM | 29.0 | 28.0 (28.0) | ? | (Yes) | ? |
<video>: Streaming WebM via MSE | ? | 42.0 (42.0) | ? | ? | ? |
<video>: Theora and Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | No support | 10.50 | No support |
<video>: H.264 and MP3 in MP4 | (Yes) | (Yes) | 9.0 | (Yes) | (Yes) |
<video>: H.264 and AAC in MP4 | (Yes) | (Yes) | 9.0 | (Yes) | 3.1 |
| any other format | No support | No support | No support | No support | 3.1 |
The maximum value for tabindex should not exceed 32767 as per W3C section 17.11.1
Unless specified default value is -1
An element with a value of 0, an invalid value, or no tabindex value should be placed after the elements with a positive index in the sequential order of keyboard navigation.
ARIA is a specification for semantically describing rich web applications. Following ARIA standards can increase accessibility for those using assistive technologies (such as a screen reader) to access your content.
Global attributes are simply attributed which can be applied to any element in the entire document.
cite and blockquote elements should not be used for the purpose of representing a conversation, transcripts of conversations, dialogues in scripts, records of instant messages and other situations in which different players take turns in the speech.
If the embed JavaScript code (file) is used to manipulate http://stackoverflow.com/documentation/javascript/503/document-object-model-dom Elements, place your <script></script> tags right before the closing </body> tag or use JavaScript methods or libraries (such as jQuery to handle a variety of browsers) that makes sure the DOM is read and ready to be manipulated.
The above parameters list is modified from the MDN docs: <map> and <area>.
It is feasible to create an image map's coordinates with for an image with simpler shapes (such as in the introductory example above) with an image editor that shows coordinates (such as GIMP). However, it might be easier in general to use an image map generator, such as this one.
The <progress> element is not supported in versions of Internet Explorer less than 10
The <progress> element is the wrong element to be used for something that is just a gauge, rather than the task progress. For example, showing the usage of disk space by using the <progress> element is inappropriate. Instead, the <meter> element is available for this type of use cases.
The manifest file is a simple text file, which tells the browser what to cache (and what to never cache). The recommended file extension for manifest files is: ".appcache" The manifest file has three sections:
CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time
NETWORK - Files listed under this header require a connection to the server, and will never be cached
FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible