HTML5 Global Attributes
New : New global attributes in HTML5.| Attribute | Value | Description |
|---|---|---|
| accesskey | character | Specifies a keyboard shortcut to access an element |
| class | classname | Specifies a classname for an element (used for stylesheets) |
| contenteditableNew | true false | Specifies if the user is allowed to edit the content or not |
| contextmenuNew | menu_id | Specifies the context menu for an element |
| dir | ltr rtl | Specifies the text direction for the content in an element |
| draggableNew | true false auto | Specifies whether or not a user is allowed to drag an element |
| dropzoneNew | copy move link | Specifies what happens when dragged items/data is dropped in the element |
| hiddenNew | hidden | Specifies that the element is not relevant. Hidden elements are not displayed |
| id | id | Specifies a unique id for an element |
| lang | language_code | Specifies a language code for the content in an element |
| spellcheckNew | true false | Specifies if the element must have its spelling and grammar checked |
| style | style_definition | Specifies an inline style for an element |
| tabindex | number | Specifies the tab order of an element |
| title | text | Specifies extra information about an element |
HTML <q> Tag
ExampleA short quotation is marked up as follows:
Try it yourself » |
Definition and Usage
The <q> tag defines a short quotation.The browser will insert quotation marks around the quotation.
HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow for better input control and validation.This chapter covers the new input types:
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Browser Support
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| No | 4.0 | 9.0 | 10.0 | No | |
| url | No | 4.0 | 9.0 | 10.0 | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | 10.0 | No |
| search | No | 4.0 | 11.0 | 10.0 | No |
| color | No | No | 11.0 | No | No |
Input Type - email
The email type is used for input fields that should contain an e-mail address.The value of the email field is automatically validated when the form is submitted.
Example
Try it yourself » |
Input Type - url
The url type is used for input fields that should contain a URL address.The value of the url field is automatically validated when the form is submitted.
Example
Try it yourself » |
Input Type - number
The number type is used for input fields that should contain a numeric value.You can also set restrictions on what numbers are accepted:
Example
Try it yourself » |
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value allowed |
| min | number | Specifies the minimum value allowed |
| step | number | Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) |
| value | number | Specifies the default value |
Tip: Safari on the iPhone recognizes the number input type, and changes the on-screen keyboard to match it (shows numbers).
Input Type - range
The range type is used for input fields that should contain a value from a range of numbers.The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
Example
Try it yourself » |
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value allowed |
| min | number | Specifies the minimum value allowed |
| step | number | Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) |
| value | number | Specifies the default value |
Input Type - Date Pickers
HTML5 has several new input types for selecting date and time:- date - Selects date, month and year
- month - Selects month and year
- week - Selects week and year
- time - Selects time (hour and minute)
- datetime - Selects time, date, month and year (UTC time)
- datetime-local - Selects time, date, month and year (local time)
Example
Try it yourself » |
Input type "week": Try it yourself
Input type "time": Try it yourself
Input type "datetime": Try it yourself
Input type "datetime-local": Try it yourself
Input Type - search
The search type is used for search fields, like a site search, or Google search.The search field behaves like a regular text field.
Input Type - color
The color type is used for input fields that should contain a color.This input type will allow you to select a color from a color picker:
Example
| Color: <input type="color" name="user_color" /> |
Try it yourself »
HTML Elements
An HTML element is everything from the start tag to the end tag:| Start tag * | Element content | End tag * |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href="default.htm" > | This is a link | </a> |
| <br /> |
HTML Element Syntax
- An HTML element starts with a start tag / opening tag
- An HTML element ends with an end tag / closing tag
- The element content is everything between the start and the end tag
- Some HTML elements have empty content
- Empty elements are closed in the start tag
- Most HTML elements can have attributes
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML elements).HTML documents consist of nested HTML elements.
HTML Document Example
| <html> <body> <p>This is my first paragraph.</p> </body> </html> |
HTML Example Explained
The <p> element:| <p>This is my first paragraph.</p> |
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
| <body> <p>This is my first paragraph.</p> </body> |
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
| <html> <body> <p>This is my first paragraph.</p> </body> </html> |
The element has a start tag <html> and an end tag </html>.
The element content is another HTML element (the body element).
Don't Forget the End Tag
Some HTML elements might display correctly even if you forget the end tag:| <p>This is a paragraph <p>This is a paragraph |
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
Empty HTML Elements
HTML elements with no content are called empty elements.<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
Try it Yourself - Examples
HTML linksHow to create links in an HTML document.
(You can find more examples at the bottom of this page)
HTML Hyperlinks (Links)
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:
- To create a link to another document, by using the href attribute
- To create a bookmark inside a document, by using the name attribute
HTML Link Syntax
The HTML code for a link is simple. It looks like this:| <a href="url">Link text</a> |
Example
| <a href="http://www.w3schools.com/">Visit W3Schools</a> |
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. You can link from an image or any other HTML element.
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window or a new tab:
Example
Try it yourself » |
HTML Links - The name Attribute
The name attribute specifies the name of an anchor.The name attribute is used to create a bookmark inside an HTML document.
Note:
The upcoming HTML5 standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor.
Using the id attribute actually works also for HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
A named anchor inside an HTML document:| <a name="tips">Useful Tips Section</a> |
| <a href="#tips">Visit the Useful Tips Section</a> |
| <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a> |
Basic Notes - Useful Tips
Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href="http://www.w3schools.com/html/".Tip: Named anchors are often used to create "table of contents" at the beginning of a large document. Each chapter within the document is given a named anchor, and links to each of these anchors are put at the top of the document.
Tip: If a browser does not find the named anchor specified, it goes to the top of the document. No error occurs.
 | More Examples |
How to use an image as a link.
Link to a location on the same page
How to link to a bookmark.
Break out of a frame
How to break out of a frame (if your site is locked in a frame).
Create a mailto link
How to link to a mail message (will only work if you have mail installed).
Create a mailto link 2
Another mailto link.
HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Defines an anchor |
HTML <tt> <i> <b> <big> <small> Tags
ExampleFormat text in a document:
Try it yourself » |
Definition and Usage
The <tt>, <i>, <b>, <big>, and <small> tags are all font-style tags. Font-style tags are defined in HTML4, but it is strongly recommended to use CSS styling instead.| Tag | Description |
|---|---|
| <i> | Renders as italic text |
| <b> | Renders as bold text |
| <big> | Renders as bigger text |
| <tt> | Renders as teletype text |
| <small> | Renders as smaller text |
Browser Support
The <tt>, <i>, <b>, <big>, and <small> tags are supported in all major browsers.
Differences Between HTML and XHTML
NONEStandard Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.The <tt>, <i>, <b>, <big>, and <small> tags support the following standard attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| class | classname | Specifies a classname for an element | STF |
| dir | rtl ltr | Specifies the text direction for the content in an element | STF |
| id | id | Specifies a unique id for an element | STF |
| lang | language_code | Specifies a language code for the content in an element | STF |
| style | style_definition | Specifies an inline style for an element | STF |
| title | text | Specifies extra information about an element | STF |
| xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Event Attributes
The <tt>, <i>, <b>, <big>, and <small> tags support the following event attributes:| Attribute | Value | Description | DTD |
|---|---|---|---|
| onclick | script | Script to be run on a mouse click | STF |
| ondblclick | script | Script to be run on a mouse double-click | STF |
| onmousedown | script | Script to be run when mouse button is pressed | STF |
| onmousemove | script | Script to be run when mouse pointer moves | STF |
| onmouseout | script | Script to be run when mouse pointer moves out of an element | STF |
| onmouseover | script | Script to be run when mouse pointer moves over an element | STF |
| onmouseup | script | Script to be run when mouse button is released | STF |
| onkeydown | script | Script to be run when a key is pressed | STF |
| onkeypress | script | Script to be run when a key is pressed and released | STF |
| onkeyup | script | Script to be run when a key is released | STF |
HTML Tables
Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
| <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.To display a table with borders, specify the border attribute:
| <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
HTML Table Headers
Header information in a table are defined with the <th> tag.All major browsers will display the text in the <th> element as bold and centered.
| <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| More Examples |
How to create tables without borders.
Table headers
How to create table headers.
Table with a caption
How to add a caption to a table.
Table cells that span more than one row/column
How to define table cells that span more than one row or one column.
Tags inside a table
How to display elements inside other elements.
Cell padding
How to use cellpadding to create more white space between the cell content and its borders.
Cell spacing
How to use cellspacing to increase the distance between the cells.
The frame attribute
How to use the "frame" attribute to control the borders around the table.
HTML Table Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a table header |
| <tr> | Defines a table row |
| <td> | Defines a table cell |
| <caption> | Defines a table caption |
| <colgroup> | Defines a group of columns in a table, for formatting |
| <col /> | Defines attribute values for one or more columns 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 |
HTML Forms
HTML forms are used to pass data to a server.A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
| <form> . input elements . </form> |
HTML Forms - The Input Element
The most important form element is the input element.The input element is used to select user information.
An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.
The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:| <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> |
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password" /> defines a password field:| <form> Password: <input type="password" name="pwd" /> </form> |
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices:| <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form> |
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.| <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> |
Submit Button
<input type="submit" /> defines a submit button.A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
| <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> |
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
More Input Examples
Radio buttonsHow to create radio buttons.
Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.
Simple drop-down list
How to create a simple drop-down list.
Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.
Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.
Create a button
How to create a button.
Form Examples
Fieldset around form-dataHow to create a border around elements in a form.
Form with text fields and a submit button
How to create a form with two text fields and a submit button.
Form with checkboxes
How to create a form with two checkboxes and a submit button.
Form with radio buttons
How to create a form with two radio buttons, and a submit button.
Send e-mail from a form
How to send e-mail from a form.
HTML Form Tags
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input /> | Defines an input control |
| <textarea> | Defines a multi-line text input control |
| <label> | Defines a label for an input element |
| <fieldset> | Defines a border around elements in a form |
| <legend> | Defines a caption for a fieldset element |
| <select> | Defines a select list (drop-down list) |
| <optgroup> | Defines a group of related options in a select list |
| <option> | Defines an option in a select list |
| <button> | Defines a push button |
Color Values
HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF).
HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
Color Values
Try it yourself » |
16 Million Different Colors
The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.
To see the full list of color mixes when RED varies from 0 to 255, click on one of the HEX or RGB values below.
Shades of Gray
Gray colors are created by using an equal amount of power to all of the light sources.To make it easier for you to select the correct shade, we have created a table of gray shades for you:
| Gray Shades | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
Web Safe Colors?
Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette.
This is not important today, since most computers can display millions of different colors. Anyway, here is the list:
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
HTML Doctypes
| « Previous | Next Chapter » |
A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.
ExampleAn HTML document with a doctype of HTML 4.01 Transitional:
|
HTML Different Doctypes
The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
Tip: Always add a doctype to your pages. This helps the browsers to render the page correctly!HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed:| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed:| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
Tips and Notes
Look at our table of all HTML/XHTML elements, and which DTD each element appear in.Use W3C's Validator to check that you have written a valid HTML / XHTML document!
HTML DOCTYPE Element
| Tag | Description |
|---|---|
| <!DOCTYPE> | Defines the document type. This declaration goes before the <html> start tag |
Try-It-Yourself Examples
The title of a documentThe <title> tag defines the title of the document.
One target for all links
How to use the base tag to let all the links on a page open in a new window.
The HTML head Element
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.
The HTML title Element
The <title> tag defines the title of the document.The title element is required in all HTML/XHTML documents.
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
| <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> |
The HTML base Element
The <base> tag specifies a default address or a default target for all links on a page:| <head> <base href="http://www.w3schools.com/images/" /> <base target="_blank" /> </head> |
The HTML link Element
The <link> tag defines the relationship between a document and an external resource.The <link> tag is most used to link to style sheets:
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> |
The HTML style Element
The <style> tag is used to define style information for an HTML document.Inside the style element you specify how HTML elements should render in a browser:
| <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> |
The HTML meta Element
The <meta> tag provides metadata about the HTML document.The meta element will be explained in the next chapter.
The HTML script Element
The <script> tag is used to define a client-side script, such as a JavaScript.The script element will be explained in a later chapter.
HTML head Elements
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base /> | Defines a default address or a default target for all links on a page |
| <link /> | Defines the relationship between a document and an external resource |
| <meta /> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
URL - Uniform Resource Locator
When you click on a link in an HTML page, an underlying <a> tag points to an address on the world wide web.A Uniform Resource Locator (URL) is used to address a document (or other data) on the world wide web.
A web address, like this: http://www.w3schools.com/html/default.asp follows these syntax rules:
| scheme://host.domain:port/path/filename |
- scheme - defines the type of Internet service. The most common type is http
- host - defines the domain host (the default host for http is www)
- domain - defines the Internet domain name, like w3schools.com
- :port - defines the port number at the host (the default port number for http is 80)
- path - defines a path at the server (If omitted, the document must be stored at the root directory of the web site)
- filename - defines the name of a document/resource
Common URL Schemes
The table below lists some common schemes:| Scheme | Short for.... | Which pages will the scheme be used for... |
|---|---|---|
| http | HyperText Transfer Protocol | Common web pages starts with http://. Not encrypted |
| https | Secure HyperText Transfer Protocol | Secure web pages. All information exchanged are encrypted |
| ftp | File Transfer Protocol | For downloading or uploading files to a website. Useful for domain maintenance |
| file | A file on your computer |
HTML5 Video
Many modern websites shows videos. HTML5 provides a standard for showing them.
Video on the WebUntil now, there has never been a standard for showing video on a web page.Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include video, with the video element. Video FormatsCurrently, there are 3 supported video formats for the video element:
How It WorksTo show a video in HTML5, this is all you need:
It is also always a good idea to include the width and height attributes. Insert content between the <video> and </video> tags for browsers that do not support the video element:
To make the video work in Internet Explorer, Safari and future versions of Chrome, we must add a MPEG4 and WebM file. The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format:
All <video> Attributes
|
Tidak ada komentar:
Posting Komentar