Google Ads

Month: July 2018


What is New in HTML5?

The DOCTYPE declaration for HTML5 is very simple:

 

Code:

<!DOCTYPE html>

 

Code:

<meta charset="UTF-8">

 

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

Try Your Self ->

 


 

The default character encoding in HTML5 is UTF-8.

 


New HTML5 Elements

The most interesting new HTML5 elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New attributes of form elements like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

In the next chapter, HTML5 Support, you will learn how to “teach” older browsers to handle “unknown” (new) HTML elements.

 


 

New HTML5 API’s (Application Programming Interfaces)

The most interesting new API’s in HTML5 are:

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

Tip: HTML Local storage is a powerful replacement for cookies.

 


Removed Elements in HTML5

The following HTML4 elements have been removed in HTML5:

Removed Element Use Instead
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS, <s>, or <del>
<tt> CSS

 

In the chapter HTML5 Migration, you will learn how to easily migrate from HTML4 to HTML5.

 


HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1

From 1991 to 1999, HTML developed from version 1 to version 4.

In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The XHTML syntax was strict, and the developers were forced to write valid and “well-formed” code.

In 2004, W3C’s decided to close down the development of HTML, in favor of XHTML.

In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed. The WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older versions of HTML.

In 2004 – 2006, the WHATWG gained support by the major browser vendors.

In 2006, W3C announced that they would support WHATWG.

In 2008, the first HTML5 public draft was released.

In 2012, WHATWG and W3C decided on a separation:

WHATWG wanted to develop HTML as a “Living Standard”. A living standard is always updated and improved. New features can be added, but old functionality cannot be removed.

The WHATWG HTML5 Living Standard was published in 2012, and is continuously updated.

W3C wanted to develop a definitive HTML5 and XHTML standard.

The W3C HTML5 recommendation was released 28 October 2014.

W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016.

 

 


The value Attribute

The value attribute specifies the initial value for an input field:

 

Code:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Try Your Self ->

 


 

The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):

 

Code:

<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Try Your Self ->

 


 

The disabled Attribute

The disabled attribute specifies that the input field is disabled.

A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form:

 

Code:

<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Try Your Self ->

 


 

The size Attribute

The size attribute specifies the size (in characters) for the input field:

 

Code:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Try Your Self ->

 


 

The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:

 

Code:

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Try Your Self ->

 

With a maxlength attribute, the input field will not accept more than the allowed number of characters.

The maxlength attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code.

Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must be checked by the receiver (the server) as well!

 


HTML5 Attributes

HTML5 added the following attributes for <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

and the following attributes for <form>:

  • autocomplete
  • novalidate

 


The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.

Tip: It is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice versa.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

 

Code:

<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>

 

Try Your Self ->

 

Tip: In some browsers you may need to activate the autocomplete function for this to work.

 


The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that the form data should not be validated when submitted.

 

Code:

<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

 

Try Your Self ->

 


 

The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads.

 

Code:

<form action="/action_page.php">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.

Tip: To refer to more than one form, use a space-separated list of form ids.

 

Code:

<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 


 

The formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

The formaction attribute is used with type="submit" and type="image".

 

Code:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php" value="Submit to another page">
</form>

 

Try Your Self ->

 


 

The formenctype Attribute

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method=”post”).

The formenctype attribute overrides the enctype attribute of the <form> element.

The formenctype attribute is used with type="submit" and type="image".

 

Code:

<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>

 

Try Your Self ->

 


 

The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

The formmethod attribute can be used with type="submit" and type="image".

 

Code:

<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Submit using POST">
</form>

 

Try Your Self ->

 


 

The formnovalidate Attribute

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute can be used with type="submit".

 

Code:

<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>

 

Try Your Self ->

 


 

The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type="submit" and type="image".

 

Code:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

 

Try Your Self ->

 


 

The height and width Attributes

The height and width attributes specify the height and width of an <input
type="image">
element.

Always specify the size of images. If the browser does not know the size, the page will flicker while images load.

 

Code:

<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

 

Try Your Self ->

 


 

The list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

 

Code:

<form action="/action_page.php" method="get">

<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

 

Try Your Self ->

 


 

The min and max Attributes

The min and max attributes specify the minimum and maximum values for an <input> element.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

 

Code:

<form action="/action_page.php">

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>

<input type="submit">

</form>

 

Try Your Self ->

 


 

The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute works with the following input types: email, and file.

 

Code:

<form action="/action_page.php">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>

 

Try Your Self ->

 


 

The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element’s value is checked against.

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

 

Code:

<form action="/action_page.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>

 

Try Your Self ->

 


 

The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

The hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

 

Code:

<form action="/action_page.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 


 

The required Attribute

The required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

 

Code:

<form action="/action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>

 

Try Your Self ->

 


 

The step Attribute

The step attribute specifies the legal number intervals for an <input> element.

Example: if step=”3″, legal numbers could be -3, 0, 3, 6, etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

 

Code:

<form action="/action_page.php">
<input type="number" name="points" step="3">
<input type="submit">
</form>

 

Try Your Self ->

 


 

 

or

You can learn this full HTML Input Attributes tutorial by watching video !

 

 


This chapter describes the different input types for the <input> element.


Input Type Text

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

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

 


 

Input Type Password

<input type="password"> defines a password field:

 

Code;

<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

User name:

User password:

The characters in a password field are masked (shown as asterisks or circles).

 


 

Input Type Submit

<input type="submit"> defines a button for submitting 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:

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

If you omit the submit button’s value attribute, the button will get a default text:

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

If you change the input values and then click the “Reset” button, the form-data will be reset to the default values.

 


 

Input Type Radio

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

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

 

Code:

<form action="/action_page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

Male
Female
Other

 


 

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

 

Code:

<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

I have a bike
I have a car

 


 

Input Type Button

<input type="button"> defines a button:

 

Code:

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

 


HTML5 Input Types

HTML5 added several new input types:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

New input types that are not supported by older web browsers, will behave as <input type="text">.

 


Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

 

Code:

<form action="/action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

 

Code:

<form action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>

 

Try Your Self ->

 

You can also use the min and max attributes to add restrictions to dates:

 

Code:

<form action="/action_page.php">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

 

Code:

<form action="/action_page.php">
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>

 

Try Your Self ->

 


 

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds “.com” to the keyboard to match email input.

 

Code:

<form action="/action_page.php">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type File

The <input type="file"> defines a file-select field and a “Browse” button for file uploads.

 

Code:

<form action="/action_page.php">
Select a file: <input type="file" name="myFile"><br><br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Month

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

 

Code:

<form action="/action_page.php">
Birthday (month and year):
<input type="month" name="bdaymonth">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Number

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

 

Code:

<form action="/action_page.php">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

 

Code:

<form action="/action_page.php">
Quantity:
<input type="number" name="quantity"
min="0" max="100" step="10" value="30">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

 

Code:

<form action="/action_page.php" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

 

Code:

<form action="/action_page.php">
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Note: The tel type is currently only supported in Safari 8.

 

Code:

<form action="/action_page.php">
Telephone:
<input type="tel" name="usrtel">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

 

Code:

<form action="/action_page.php">
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds “.com” to the keyboard to match url input.

 

Code:

<form action="/action_page.php">
Add your homepage:
<input type="url" name="homepage">
<input type="submit">
</form>

 

Try Your Self ->

 


 

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

 

Code:

<form action="/action_page.php">
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>

 

Try Your Self ->

 


 

HTML Input Type Attribute

Tag Description
<input type=””> Specifies the input type to display

 


 

 

OR

Watch this full tutorial in Video

 

 


This chapter describes all HTML form elements.


The <input> Element

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

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

 

Code:

<input name="firstname" type="text">

 

Try Your Self ->

 

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

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

 

Code:

<form action="/action_page.php">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 

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:

 

Code:

<option value="fiat" selected>Fiat</option>

 

Try Your Self ->

 

Visible Values:

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

 

Code:

<form action="/action_page.php">
<select name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 

Allow Multiple Selections:

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

 

Code:

<form action="/action_page.php">
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

 

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

 

Code:

<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br>
<input type="submit">
</form>

 

Try Your Self ->

 

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

 

You can also define the size of the text area by using CSS:

 

Code:

<form action="/action_page.php">
<textarea name="message" style="width:200px; height:600px;">The cat was playing in the garden.</textarea>
<br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

The <button> Element

The <button> element defines a clickable button:

 

Code:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

 

Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

 


HTML5 Form Elements

HTML5 added the following form elements:

  • <datalist>
  • <output>

Note: Browsers do not display unknown elements. New elements that are not supported in older browsers will not “destroy” your web page.

 


HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

 

Code;

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

 

Try Your Self ->

 


 

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by a script).

 

Code:

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

 

Try Your Self ->

 


 

 

HTML Form Elements

= new in HTML5.

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

 


Or

Learn HTML Form Elements – HTML Code from Video Tutorial.

 


HTML Forms

 

In this tutorial you can learn how to create HTML Forms  !

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 


 

The <form> Element

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

<form>
.
form elements
.
</form>

 

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

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:

Type Description
<input type=”text”> Defines a one-line text input field
<input type=”radio”> Defines a radio button (for selecting one of many choices)
<input type=”submit”> Defines a submit button (for submitting the form)

You will learn a lot more about input types later in this tutorial.

 


 

Text Input

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

 

Code:

<h2>Text Input</h2>

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Try Your Self ->

 

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

 


 

Radio Button Input

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

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

 

Code:

<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

Male
Female
Other

 


 

The Submit Button

<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:

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 

This is how the HTML code above will be displayed in a browser:

First name:

Last name:


 

The Action Attribute

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:

 

Code:

<form action="/action_page.php">

 

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

 


 

The Target Attribute

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“:

 

Code:

<form action="/action_page.php" target="_blank">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 

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

 


 

The Method Attribute

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

 

Code:

<form action="/action_page.php" target="_blank" method="GET">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 

or

 

Code:

<form action="/action_page.php" target="_blank" method="POST">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 


 

When to Use GET?

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:

/action_page.php?firstname=Mickey&lastname=Mouse

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 want to bookmark the result
  • GET is better for non-secure data, like query strings in Google

When to Use POST?

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

 


The Name Attribute

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:

 

Code:

<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Try Your Self ->

 


 

Grouping Form Data with <fieldset>

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

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

 

Code:

<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

 

Try Your Self ->

 

his is how the HTML code above will be displayed in a browser:

 

Personal information:

First name:

Last name:

 

 

Here is the list of <form> attributes:

Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

You will learn more about the form attributes in the next chapters.

 

or

 

Learn HTML FORMS by video tutorial. It’s extra benefit of our site. Do not forget to thank on Comment.

 

 


XHTML is HTML written as XML.


What Is XHTML?

  • 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

Why XHTML?

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):

 

<html>
<head>
<title>This is bad HTML</title>

<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

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.

 


The Most Important Differences from HTML:

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

 


<!DOCTYPE ….> Is Mandatory

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.

This example shows an XHTML document with a minimum of required tags:

 

<!DOCTYPE html PUBLIC "-//horjeC//DTD XHTML 1.0 Transitional//EN"
"http://www.horje.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.horje.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
some content
</body>

</html>


XHTML Elements Must Be Properly Nested

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

<b><i>This text is bold and italic</b></i>

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

<b><i>This text is bold and italic</i></b>

XHTML Elements Must Always Be Closed

This is wrong:

<p>This is a paragraph
<p>This is another paragraph

This is correct:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

This is wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

This is correct:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

This is wrong:

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>

XHTML Attribute Names Must Be In Lower Case

This is wrong:

<table WIDTH="100%">

This is correct:

<table width="100%">

Attribute Values Must Be Quoted

This is wrong:

<table width=100%>

This is correct:

<table width="100%">

Attribute Minimization Is Forbidden

Wrong:

<input type="checkbox" name="vehicle" value="car" checked />

Correct:

<input type="checkbox" name="vehicle" value="car" checked="checked" />

Wrong:

<input type="text" name="lastname" disabled />

Correct:

<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML

  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

 


A URL is another word for a web address.

A URL can be composed of words (horje.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.


URL – Uniform Resource Locator

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.horje.com/html/default.asp follows these syntax rules:

 

scheme://prefix.domain:port/path/filename

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 horjehorje.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

Common URL Schemes

The table below lists some common schemes:

Scheme Short for Used for
http HyperText Transfer Protocol Common web pages. Not encrypted
https Secure HyperText Transfer Protocol Secure web pages. Encrypted
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer

URL Encoding

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.


Try It Yourself

 

If you click “Submit”, the browser will URL encode the input before it is sent to the server.

A page at the server will display the received input.

Try some other input and click Submit again.

 


ASCII Encoding Examples

Your browser will encode input, according to the character-set used in your page.

The default character-set in HTML5 is UTF-8.

Character From Windows-1252 From UTF-8
%80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85

For a complete reference of all URL encodings, visit our URL Encoding Reference.


To display an HTML page correctly, a web browser must know which character set (character encoding) to use.


What is Character Encoding?

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.


The HTML charset Attribute

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:

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For HTML5:

<meta charset="UTF-8">

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.


Differences Between Character Sets

The following table displays the differences between the character sets described above:

Numb ASCII ANSI 8859 UTF-8 Description
32 space
33 ! ! ! ! exclamation mark
34 quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
38 & & & & ampersand
39 apostrophe
40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
44 , , , , comma
45 hyphen-minus
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon
59 ; ; ; ; semicolon
60 < < < < less-than sign
61 = = = = equals sign
62 > > > > greater-than sign
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
65 A A A A Latin capital letter A
66 B B B B Latin capital letter B
67 C C C C Latin capital letter C
68 D D D D Latin capital letter D
69 E E E E Latin capital letter E
70 F F F F Latin capital letter F
71 G G G G Latin capital letter G
72 H H H H Latin capital letter H
73 I I I I Latin capital letter I
74 J J J J Latin capital letter J
75 K K K K Latin capital letter K
76 L L L L Latin capital letter L
77 M M M M Latin capital letter M
78 N N N N Latin capital letter N
79 O O O O Latin capital letter O
80 P P P P Latin capital letter P
81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
85 U U U U Latin capital letter U
86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
98 b b b b Latin small letter b
99 c c c c Latin small letter c
100 d d d d Latin small letter d
101 e e e e Latin small letter e
102 f f f f Latin small letter f
103 g g g g Latin small letter g
104 h h h h Latin small letter h
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l
109 m m m m Latin small letter m
110 n n n n Latin small letter n
111 o o o o Latin small letter o
112 p p p p Latin small letter p
113 q q q q Latin small letter q
114 r r r r Latin small letter r
115 s s s s Latin small letter s
116 t t t t Latin small letter t
117 u u u u Latin small letter u
118 v v v v Latin small letter v
119 w w w w Latin small letter w
120 x x x x Latin small letter x
121 y y y y Latin small letter y
122 z z z z Latin small letter z
123 { { { { left curly bracket
124 | | | | vertical line
125 } } } } right curly bracket
126 ~ ~ ~ ~ tilde
127 DEL
128 euro sign
129    NOT USED
130 single low-9 quotation mark
131 ƒ Latin small letter f with hook
132 double low-9 quotation mark
133 horizontal ellipsis
134 dagger
135 double dagger
136 ˆ modifier letter circumflex accent
137 per mille sign
138 Š Latin capital letter S with caron
139 single left-pointing angle quotation mark
140 ΠLatin capital ligature OE
141    NOT USED
142 Ž Latin capital letter Z with caron
143    NOT USED
144    NOT USED
145 left single quotation mark
146 right single quotation mark
147 left double quotation mark
148 right double quotation mark
149 bullet
150 en dash
151 em dash
152 ˜ small tilde
153 trade mark sign
154 š Latin small letter s with caron
155 single right-pointing angle quotation mark
156 œ Latin small ligature oe
157    NOT USED
158 ž Latin small letter z with caron
159 Ÿ Latin capital letter Y with diaeresis
160 no-break space
161 ¡ ¡ ¡ inverted exclamation mark
162 ¢ ¢ ¢ cent sign
163 £ £ £ pound sign
164 ¤ ¤ ¤ currency sign
165 ¥ ¥ ¥ yen sign
166 ¦ ¦ ¦ broken bar
167 § § § section sign
168 ¨ ¨ ¨ diaeresis
169 © © © copyright sign
170 ª ª ª feminine ordinal indicator
171 « « « left-pointing double angle quotation mark
172 ¬ ¬ ¬ not sign
173 ­ ­ ­ soft hyphen
174 ® ® ® registered sign
175 ¯ ¯ ¯ macron
176 ° ° ° degree sign
177 ± ± ± plus-minus sign
178 ² ² ² superscript two
179 ³ ³ ³ superscript three
180 ´ ´ ´ acute accent
181 µ µ µ micro sign
182 pilcrow sign
183 · · · middle dot
184 ¸ ¸ ¸ cedilla
185 ¹ ¹ ¹ superscript one
186 º º º masculine ordinal indicator
187 » » » right-pointing double angle quotation mark
188 ¼ ¼ ¼ vulgar fraction one quarter
189 ½ ½ ½ vulgar fraction one half
190 ¾ ¾ ¾ vulgar fraction three quarters
191 ¿ ¿ ¿ inverted question mark
192 À À À Latin capital letter A with grave
193 Á Á Á Latin capital letter A with acute
194 Â Â Â Latin capital letter A with circumflex
195 Ã Ã Ã Latin capital letter A with tilde
196 Ä Ä Ä Latin capital letter A with diaeresis
197 Å Å Å Latin capital letter A with ring above
198 Æ Æ Æ Latin capital letter AE
199 Ç Ç Ç Latin capital letter C with cedilla
200 È È È Latin capital letter E with grave
201 É É É Latin capital letter E with acute
202 Ê Ê Ê Latin capital letter E with circumflex
203 Ë Ë Ë Latin capital letter E with diaeresis
204 Ì Ì Ì Latin capital letter I with grave
205 Í Í Í Latin capital letter I with acute
206 Î Î Î Latin capital letter I with circumflex
207 Ï Ï Ï Latin capital letter I with diaeresis
208 Ð Ð Ð Latin capital letter Eth
209 Ñ Ñ Ñ Latin capital letter N with tilde
210 Ò Ò Ò Latin capital letter O with grave
211 Ó Ó Ó Latin capital letter O with acute
212 Ô Ô Ô Latin capital letter O with circumflex
213 Õ Õ Õ Latin capital letter O with tilde
214 Ö Ö Ö Latin capital letter O with diaeresis
215 × × × multiplication sign
216 Ø Ø Ø Latin capital letter O with stroke
217 Ù Ù Ù Latin capital letter U with grave
218 Ú Ú Ú Latin capital letter U with acute
219 Û Û Û Latin capital letter U with circumflex
220 Ü Ü Ü Latin capital letter U with diaeresis
221 Ý Ý Ý Latin capital letter Y with acute
222 Þ Þ Þ Latin capital letter Thorn
223 ß ß ß Latin small letter sharp s
224 à à à Latin small letter a with grave
225 á á á Latin small letter a with acute
226 â â â Latin small letter a with circumflex
227 ã ã ã Latin small letter a with tilde
228 ä ä ä Latin small letter a with diaeresis
229 å å å Latin small letter a with ring above
230 æ æ æ Latin small letter ae
231 ç ç ç Latin small letter c with cedilla
232 è è è Latin small letter e with grave
233 é é é Latin small letter e with acute
234 ê ê ê Latin small letter e with circumflex
235 ë ë ë Latin small letter e with diaeresis
236 ì ì ì Latin small letter i with grave
237 í í í Latin small letter i with acute
238 î î î Latin small letter i with circumflex
239 ï ï ï Latin small letter i with diaeresis
240 ð ð ð Latin small letter eth
241 ñ ñ ñ Latin small letter n with tilde
242 ò ò ò Latin small letter o with grave
243 ó ó ó Latin small letter o with acute
244 ô ô ô Latin small letter o with circumflex
245 õ õ õ Latin small letter o with tilde
246 ö ö ö Latin small letter o with diaeresis
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small letter o with stroke
249 ù ù ù Latin small letter u with grave
250 ú ú ú Latin small letter u with acute
251 û û û Latin small letter with circumflex
252 ü ü ü Latin small letter u with diaeresis
253 ý ý ý Latin small letter y with acute
254 þ þ þ Latin small letter thorn
255 ÿ ÿ ÿ Latin small letter y with diaeresis

The ASCII Character Set

ASCII uses the values from 0 to 31 (and 127) for control characters.

ASCII uses the values from 32 to 126 for letters, digits, and symbols.

ASCII does not use the values from 128 to 255.


The ANSI Character Set (Windows-1252)

ANSI is identical to ASCII for the values from 0 to 127.

ANSI has a proprietary set of characters for the values from 128 to 159.

ANSI is identical to UTF-8 for the values from 160 to 255.


The ISO-8859-1 Character Set

8859-1 is identical to ASCII for the values from 0 to 127.

8859-1 does not use the values from 128 to 159.

8859-1 is identical to UTF-8 for the values from 160 to 255.


The UTF-8 Character Set

UTF-8 is identical to ASCII for the values from 0 to 127.

UTF-8 does not use the values from 128 to 159.

UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.

UTF-8 continues from the value 256 with more than 10 000 different characters.

For a closer look, study our


The @charset CSS Rule

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:

@charset "UTF-8";

 


Learn HTML Symbols – HTML Code

HTML Symbol Entities

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.

 

Code:

<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

 

Try Your Self ->

 


 

Some Mathematical Symbols Supported by HTML

Char Number Entity Description
&#8704; &forall; FOR ALL
&#8706; &part; PARTIAL DIFFERENTIAL
&#8707; &exist; THERE EXISTS
&#8709; &empty; EMPTY SETS
&#8711; &nabla; NABLA
&#8712; &isin; ELEMENT OF
&#8713; &notin; NOT AN ELEMENT OF
&#8715; &ni; CONTAINS AS MEMBER
&#8719; &prod; N-ARY PRODUCT
&#8721; &sum; N-ARY SUMMATION

 

Some Greek Letters Supported by HTML

Char Number Entity Description
Α &#913; &Alpha; GREEK CAPITAL LETTER ALPHA
Β &#914; &Beta; GREEK CAPITAL LETTER BETA
Γ &#915; &Gamma; GREEK CAPITAL LETTER GAMMA
Δ &#916; &Delta; GREEK CAPITAL LETTER DELTA
Ε &#917; &Epsilon; GREEK CAPITAL LETTER EPSILON
Ζ &#918; &Zeta; GREEK CAPITAL LETTER ZETA

 


Some Other Entities Supported by HTML

Char Number Entity Description
© &#169; &copy; COPYRIGHT SIGN
® &#174; &reg; REGISTERED SIGN
&#8364; &euro; EURO SIGN
&#8482; &trade; TRADEMARK
&#8592; &larr; LEFTWARDS ARROW
&#8593; &uarr; UPWARDS ARROW
&#8594; &rarr; RIGHTWARDS ARROW
&#8595; &darr; DOWNWARDS ARROW
&#9824; &spades; BLACK SPADE SUIT
&#9827; &clubs; BLACK CLUB SUIT
&#9829; &hearts; BLACK HEART SUIT
&#9830; &diams; BLACK DIAMOND SUIT

 

 


Reserved characters in HTML must be replaced with character entities.

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


HTML 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:

 

Code:

&entity_name;OR

&#entity_number;

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.


 

Non-breaking Space

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.

Examples:

  • § 10
  • 10 km/h
  • 10 PM

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.


 

Some Other Useful HTML Character Entities

Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
double quotation mark &quot; &#34;
single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Note: Entity names are case sensitive.


Combining Diacritical Marks

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.

Here are some examples:

Mark Character Construct Result
 ̀ a a&#768;
 ́ a a&#769;
̂ a a&#770;
 ̃ a a&#771;
 ̀ O O&#768;
 ́ O O&#769;
̂ O O&#770;
 ̃ O O&#771;

You will see more HTML symbols in the next chapter of this tutorial.