on 03-Dec-2018 (Mon)

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

Example

Remember to define borders for both the table and the table cells.

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

To make a cell span more than one column, use the colspan attribute:

Example

To make a cell span more than one row, use the rowspan attribute:

Example

To add a caption to a table, use the <caption> tag:

Example

To define a special style for a special table, add an id attribute to the table:

Example

Now you can define a special style for this table:

And add more styles:

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example

The CSS list-style-type property is used to define the style of the list item marker:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

The type attribute of the <ol> tag, defines the type of the list item marker:

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

List can be nested (lists inside lists):

Example

Note: List items can contain new list, and other HTML elements, like images and links, etc.

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example

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

Example

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

This is an inline <span> element inside a paragraph.

Example

Block level elements in HTML:

Inline elements in HTML:

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

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

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

Example

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

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

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

Example

The HTML class attribute is used to define equal styles for elements with the same class name.

So, all HTML elements with the same class attribute will have the same format and style.

The HTML class attribute can also be used on inline elements:

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:

HTML elements can have more than one class name, each class name must be separated by a space.

Example

Style elements with the class name "city", also style elements with the class name "main":

Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:

Example

The class name can also be used by JavaScript to perform certain tasks for elements with the specified class name.

JavaScript can access elements with a specified class name by using the getElementsByClassName() method:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:

Tip: The id attribute can be used on any HTML element.

Note: The id value is case-sensitive.

Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

First, create a bookmark with the id attribute:

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example

JavaScript can access an element with a specified id by using the getElementById() method:

An HTML iframe is defined with the <iframe> tag:

The src attribute specifies the URL (web address) of the inline frame page.

Use the height and width attributes to specify the size of the iframe.

The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

Or you can use CSS to set the height and width of the iframe:

Example

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

With CSS, you can also change the size, style and color of the iframe's border:

Example

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

JavaScript makes HTML pages more dynamic and interactive.

The <script> tag is used to define 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.

To select an HTML element, JavaScript very often uses the document.getElementById() method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts:

Example

A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files like:

• Web pages
• Images
• Style sheets
• JavaScripts

An absolute file path is the full URL to an internet file:

Example

A relative file path points to a file relative to the current page.

In this example, the file path points to a file in the images folder located at the root of the current web:

Example

Try it Yourself »

It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

The <title> element defines the title of the document, and is required in all HTML/XHTML documents.

The <title> element:

• defines a title in the browser tab
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine results

The <style> element is used to define style information for a single HTML page:

Example

The <link> element is used to link to external style sheets:

Example

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.

Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.

Define the character set used:

Define a description of your web page:

Define keywords for search engines:

Define the author of a page:

Refresh document every 30 seconds:

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> viewport element in all your web pages:

A <meta> viewport element 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.

The <script> element is used to define client-side JavaScripts.

This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

Example

The <base> element specifies the base URL and base target for all relative URLs in a page:

Example

W3Schools does not recommend omitting the <html> and <body> tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).

However, omitting the <head> tag has been a common practice for quite some time now.

Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element

There are five different ways to create multicolumn layouts. Each way has its pros and cons:

• HTML tables (not recommended)
• CSS float property
• CSS flexbox
• CSS framework
• CSS grid

HTML Tables

The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.

Tip: Do NOT use tables for your page layout!

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.

CSS Grid View

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Disadvantages: Does not work in IE nor in Edge 15 and earlier.

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Try it Yourself »

Note: A web page should look good on any device!

When making responsive web pages, add the following <meta> element in all your web pages:

Example

This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down :

Example

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below change depending on the width:

Example

The text size can be set with a "vw" unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Resize the browser window to see how the text size scales.

Example

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Computer Code

The HTML <kbd> element represents user input, like keyboard input or voice commands.

Text surrounded by <kbd> tags is typically displayed in the browser's default monospace font:

Example

Result:

The HTML <samp> element represents output from a program or computing system.

Text surrounded by <samp> tags is typically displayed in the browser's default monospace font:

Example

Result:

The HTML <code> element defines a fragment of computer code.

Text surrounded by <code> tags is typically displayed in the browser's default monospace font:

Example

Result:

Notice that the <code> element does not preserve extra whitespace and line-breaks.

To fix this, you can put the <code> element inside a <pre> element:

Example

Result:

x = 5;
y = 6;
z = x + y;

The HTML <var> element defines a variable.

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

Example

Result:

Reserved characters in HTML must be replaced with character entities.

Characters that are not present on your keyboard can also be replaced by entities.

Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

OR

To display a less than sign (<) we must write: &lt; or &#60;

Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for numbers is good.

A common character entity used in HTML is the non-breaking space: &nbsp;

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the &nbsp; character entity.

The non-breaking hyphen (&#8209;) lets you use a hyphen character (‑) that won't break.

A diacritical mark is a "glyph" added to a letter.

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.

Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.

To add such symbols to an HTML page, you can use an HTML entity name.

If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.

ASCII was the first character encoding standard (also called character set). ASCII defined 128 different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .

ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.

ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes.

Because ANSI and ISO-8859-1 were so limited, HTML 4 also supported UTF-8.

UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

The default character encoding for HTML5 is UTF-8.

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

For HTML4:

For HTML5:

If a browser detects ISO-8859-1 in a web page, it defaults to ANSI, because ANSI is identical to ISO-8859-1 except that ANSI has 32 extra characters.

You can use the CSS @charset rule to specify the character encoding used in a style sheet:

Example

Set the encoding of the style sheet to Unicode UTF-8:

A URL is another word for a web address.

A URL can be composed of words (w3schools.com), or an Internet Protocol (IP) address (192.68.20.50).

Most people enter the name when surfing, because names are easier to remember than numbers.

Web browsers request pages from web servers by using a URL.

A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.

A web address like https://www.w3schools.com/html/default.asp follows these syntax rules:

Explanation:

• scheme - defines the type of Internet service (most common is http or https)
• prefix - defines a domain prefix (default for http is www)
• domain - defines the Internet domain name (like w3schools.com)
• port - defines the port number at the host (default for http is 80)
• path - defines a path at the server (If omitted: the root directory of the site)
• filename - defines the name of a document or resource

The table below lists some common schemes:

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.

URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.

URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.

URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

• XHTML stands for EXtensible HyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

Many pages on the internet contain "bad" HTML.

This HTML code works fine in most browsers (even if it does not follow the HTML rules):

Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret "bad" markup.

XML is a markup language where documents must be marked up correctly (be "well-formed").

If you want to study XML, please read our XML tutorial.

XHTML was developed by combining the strengths of HTML and XML.

XHTML is HTML redesigned as XML.

Document Structure

• XHTML DOCTYPE is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element

XHTML Attributes

• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden

An XHTML document must have an XHTML DOCTYPE declaration.

A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.

In HTML, some elements can be improperly nested within each other, like this:

In XHTML, all elements must be properly nested within each other, like this:

This is wrong:

This is correct:

This is wrong:

This is correct:

This is wrong:

This is correct:

This is wrong:

This is correct:

This is wrong:

This is correct:

Wrong:

Correct:

Wrong:

Correct:

1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values

The HTML <form> element defines a form that is used to collect user input:

An HTML form contains form elements.

Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

Here are some examples:

<input type="text"> defines a one-line input field for text input:

Example

<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example

<input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data:

If the action attribute is omitted, the action is set to the current page.

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

The default value is "_self" which means the form will be submitted in the current window.

To make the form result open in a new browser tab, use the value "_blank":

Example

Other legal values are "_parent", "_top", or a name representing the name of an iframe.

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

Example

or:

Example

The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in the page address field:

Notes on GET:

• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the result
• GET is better for non-secure data, like query strings in Google

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Notes on POST:

• POST has no size limitations, and can be used to send large amounts of data.
• Form submissions with POST cannot be bookmarked

Each input field must have a name attribute to be submitted.

If the name attribute is omitted, the data of that input field will not be sent at all.

This example will only submit the "Last name" input field:

Example

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example

The most important form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example

If the type attribute is omitted, the input field gets the default type: "text".

All the different input types are covered in the next chapter.

The <select> element defines a drop-down list:

Example

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example

Visible Values:

Use the size attribute to specify the number of visible values:

Example

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

Example