Category: html5

Aug 10

HTML5 – New Tags

HTML5 – New Tags (Elements) ”; Previous Next The following tags (elements) have been introduced in HTML5 − Tags (Elements) Description <article> Represents an independent piece of content of a document, such as a blog entry or newspaper article <aside > Represents a piece of content that is only slightly related to the rest of the page. <audio> Defines an audio file. <canvas> This is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. <command> Represents a command the user can invoke. <datalist> Together with the a new list attribute for input can be used to make comboboxes <details> Represents additional information or controls which the user can obtain on demand <embed> Defines external interactive content or plugin. <figure> Represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. <footer> Represents a footer for a section and can contain information about the author, copyright information, et cetera. <header> Represents a group of introductory or navigational aids. <hgroup> Represents the header of a section. <keygen> Represents control for key pair generation. <mark> Represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. <meter> Represents a measurement, such as disk usage. <nav> Represents a section of the document intended for navigation. <output> Represents some type of output, such as from a calculation done through scripting. <progress> Represents a completion of a task, such as downloading or when performing a series of expensive operations. <ruby> Together with <rt> and <rp> allow for marking up ruby annotations. <section> Represents a generic document or application section <time> Represents a date and/or time. <video> Defines a video file. <wbr> Represents a line break opportunity. New types for <input> tag The input element”s type attribute now has the following new values − Type Description color Color selector, which could be represented by a wheel or swatch picker date Selector for calendar date datetime-local Date and time display, with no setting or indication for time zones datetime Full date and time display, including a time zone. email Input type should be an email. month Selector for a month within a given year number A field containing a numeric value only range Numeric selector within a range of values, typically visualized as a slider search Term to supply to a search engine. For example, the search bar atop a browser. tel Input type should be telephone number. time Time indicator and selector, with no time zone information url Input type should be URL type. week Selector for a week within a given year Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Server Sent Events

HTML – Server Sent Events ”; Previous Next Server Sent Events are a way of sending data from a server to a web page, without requiring the page to refresh or make requests. These events are useful for creating real-time applications, such as chat, news feeds, or notifications. Using SSE, we can push DOM events continuously from our web server to the visitor”s browser. The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling. Server-sent events standardize how we stream data from the server to the client. How to use SSE in Web Application? To use Server-Sent Events in a web application, we need to add an <eventsource> element to the document. The src attribute of <eventsource> element should point to an URL which provides a persistent HTTP connection that sends a data stream containing the events. Furthermore, the URL points to a PHP, PERL or any Python script which would take care of sending event data consistently. Instance Following is a sample HTML code of web application which would expect server time. <!DOCTYPE html> <html> <head> <script type=”text/javascript”> /* Define event handling logic here */ </script> </head> <body> <div id=”sse”> <eventsource src=”/cgi-bin/ticker.cgi” /> </div> <div id=”ticker”> <TIME> </div> </body> </html> Server Side Script for SSE A server side script should send Content-type header specifying the type text/event-stream as follows. print “Content-Type: text/event-streamnn”; After setting Content-Type, server side script would send an Event: tag followed by event name. Following code snippet would send Server-Time as event name terminated by a new line character. print “Event: server-timen”; Final step is to send event data using Data: tag which would be followed by integer of string value terminated by a new line character as follows − $time = localtime(); print “Data: $timen”; Finally, following is complete ticker.cgi written in Perl − #!/usr/bin/perl print “Content-Type: text/event-streamnn”; while(true){ print “Event: server-timen”; $time = localtime(); print “Data: $timen”; sleep(5); } Handle Server-Sent Events Let us modify our web application to handle server-sent events. Following is the final example. <!DOCTYPE html> <html> <head> <script type=”text/javascript”>document.getElementsByTagName(“eventsource”)[0].addEventListener(“server-time”, eventHandler, false); function eventHandler(event) { // Alert time sent by the server document.querySelector(”#ticker”).innerHTML = event.data; } </script> </head> <body> <div id=”sse”> <eventsource src=”/cgi-bin/ticker.cgi” /> </div> <div id=”ticker” name=”ticker”> [TIME] </div> </body> </html> Before testing Server-Sent events, I would suggest that you make sure your web browser supports this concept. Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Syntax

HTML5 – Syntax ”; Previous Next The HTML 5 language has a “custom” HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4. HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes, an attribute had to have a value and to close all empty elements. HTML5 comes with a lot of flexibility and it supports the following features − Uppercase tag names. Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional. The DOCTYPE DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD. HTML 5 authors would use simple syntax to specify DOCTYPE as follows − <!DOCTYPE html> The above syntax is case-insensitive. Character Encoding HTML 5 authors can use simple syntax to specify Character Encoding as follows − <meta charset = “UTF-8″> The above syntax is case-insensitive. The <script> tag It”s common practice to add a type attribute with a value of “text/javascript” to script elements as follows − <script type = “text/javascript” src = “scriptfile.js”></script> HTML 5 removes extra information required and you can use simply following syntax − <script src = “scriptfile.js”></script> The <link> tag So far you were writing <link> as follows − <link rel = “stylesheet” type = “text/css” href = “stylefile.css”> HTML 5 removes extra information required and you can simply use the following syntax − <link rel = “stylesheet” href = “stylefile.css”> HTML5 Elements HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between. The difference between start tags and end tags is that the latter includes a slash before the tag name. Following is the example of an HTML5 element − <p>…</p> HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. Most of the elements contain some content like <p>…</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link, meta, etc. Here is a complete list of HTML5 Elements. HTML5 Attributes Elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example. Following is the example of an HTML5 attribute which illustrates how to mark up a div element with an attribute named class using a value of “example” − <div class = “example”>…</div> Attributes may only be specified within start tags and must never be used in end tags. HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. Here is a complete list of HTML5 Attributes. HTML5 Document The following tags have been introduced for better structure − section − This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure. article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article. aside − This tag represents a piece of content that is only slightly related to the rest of the page. header − This tag represents the header of a section. footer − This tag represents a footer for a section and can contain information about the author, copyright information, et cetera. nav − This tag represents a section of the document intended for navigation. dialog − This tag can be used to mark up a conversation. figure − This tag can be used to associate a caption together with some embedded content, such as a graphic or video. The markup for an HTML 5 document would look like the following − <!DOCTYPE html> <html> <head> <meta charset = “utf-8”> <title>…</title> </head> <body> <header>…</header> <nav>…</nav> <article> <section> … </section> </article> <aside>…</aside> <footer>…</footer> </body> </html> Live Demo <!DOCTYPE html> <html> <head> <meta charset = “utf-8”> <title>…</title> </head> <body> <header role = “banner”> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> <nav> <ul> <li><a href = “https://www.tutorialspoint.com/html”>HTML Tutorial</a></li> <li><a href = “https://www.tutorialspoint.com/css”>CSS Tutorial</a></li> <li><a href = “https://www.tutorialspoint.com/javascript”> JavaScript Tutorial</a></li> </ul> </nav> <article> <section> <p>Once article can have multiple sections</p> </section> </article> <aside> <p>This is aside part of the web page</p> </aside> <footer> <p>Created by <a href = “https://tutorialspoint.com/”>Tutorials Point</a></p> </footer> </body> </html> It will produce the following result − Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Web Workers

HTML – Web Workers API ”; Previous Next HTML Web Workers are used to run computationally expensive tasks in background in a separate thread without interrupting user interface. All About Web Workers What are Web Workers? What is the need of Web Workers? How Web Workers Work? How to stop Web Workers? How to handle Web Workers errors? Browser Support of Web Workers What are Web Workers? Web Workers allows long tasks to be executed without yielding to keep the page unresponsive. Web Workers are background scripts and they are relatively heavy-weight, and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four-megapixel image. When a script is executing inside a Web Worker it cannot access the web page”s window object (window.document). Web Workers don”t have direct access to the web page and the DOM API. Although Web Workers cannot block the browser UI, they can still consume CPU cycles and make the system less responsive. What is the need of Web Workers? JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM. JavaScript will hang your browser in situation where CPU utilization is high. Let us take a simple example where JavaScript goes through a big loop, Your browser will become unresponsive when you run this code <!DOCTYPE html> <html> <head> <title>Big for loop</title> <script> function bigLoop() { for (var i = 0; i <= 10000000000; i += 1) { var j = i; } alert(“Completed ” + j + “iterations”); } function sayHello() { alert(“Hello sir….”); } </script> </head> <body> <input type=”button” onclick=”bigLoop();” value=”Big Loop” /> <input type=”button” onclick=”sayHello();” value=”Say Hello” /> </body> </html> The situation explained above can be handled using Web Workers which will do all the computationally expensive tasks without interrupting the user interface and typically run on separate threads. How Web Workers Work? Web Workers are initialized with the URL of a JavaScript file, which contains the code the worker will execute. This code sets event listeners and communicates with the script that spawned it from the main page. Following is the simple syntax: var worker = new Worker(”bigLoop.js”); If the specified JavaScript file exists, the browser will spawn a new worker thread, which is downloaded asynchronously. If the path to our worker returns a 404 error, the worker will fail silently. If our application has multiple supporting JavaScript files, we can import them using the importScripts() method which takes file name(s) as argument separated by comma as follows: importScripts(“helper.js”, “anotherHelper.js”); Once the Web Worker is spawned, communication between web worker and its parent page is done using the postMessage() method. Depending on the browser/version, the postMessage() method can accept either a string or JSON object as its single argument. Message passed by Web Worker is accessed using onmessage event in the main page. Below is the main page (hello.htm) which will spawn a web worker to execute the loop and to return the final value of variable j: <!DOCTYPE html> <html> <head> <title>Big for loop</title> <script> var worker = new Worker(”bigLoop.js”); worker.onmessage = function(event) { alert(“Completed ” + event.data + “iterations”); }; function sayHello() { alert(“Hello sir….”); } </script> </head> <body> <input type=”button” onclick=”sayHello();” value=”Say Hello” /> </body> </html> Following is the content of bigLoop.js file. This makes use of postMessage() API to pass the communication back to main page: for (var i = 0; i <= 1000000000; i += 1){ var j = i; } postMessage(j); The j variable from bigLoop.js is published using function `postMessage()`, Which then received at hello.htm using event attribute of `worker.onmessage = function(event) {}` Stopping Web Workers Web Workers don”t stop by themselves but the page that started them can stop them by calling terminate() method. worker.terminate(); A terminated Web Worker will no longer respond to messages or perform any additional computations. We cannot restart a worker; instead, we need to create a new worker using the same URL. Handling Errors The following shows an example of an error handling function in a Web Worker JavaScript file that logs errors to the console. With error handling code, above example would become as following: <!DOCTYPE html> <html> <head> <title>Big for loop</title> <script> var worker = new Worker(”bigLoop.js”); worker.onmessage = function(event) { alert(“Completed ” + event.data + “iterations”); }; worker.onerror = function(event) { console.log(event.message, event); }; function sayHello() { alert(“Hello sir….”); } </script> </head> <body> <input type=”button” onclick=”sayHello();” value=”Say Hello” /> </body> </html> Checking for Browser Support Following is the syntax to detect a Web Worker feature support available in a browser: <!DOCTYPE html> <html> <head> <title>Big for loop</title> <script src=”/js/modernizr-1.5.min.js”> </script> <script> if (Modernizr.webworkers) { alert(“You have web workers support.”); } else { alert(“You do not have web workers support.”); } </script> </head> <body> <p> Checking for Browser Support for web workers </p> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Question and Answers

HTML5 Questions and Answers ”; Previous Next HTML5 Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews. This section provides a useful collection of sample Interview Questions and Multiple Choice Questions (MCQs) and their answers with appropriate explanations. SN Question/Answers Type 1 HTML5 Interview Questions This section provides a huge collection of HTML5 Interview Questions with their answers hidden in a box to challenge you to have a go at them before discovering the correct answer. 2 HTML5 Online Quiz This section provides a great collection of HTML5 Multiple Choice Questions (MCQs) on a single page along with their correct answers and explanation. If you select the right option, it turns green; else red. 3 HTML5 Online Test If you are preparing to appear for a Java and HTML5 Framework related certification exam, then this section is a must for you. This section simulates a real online test along with a given timer which challenges you to complete the test within a given time-frame. Finally you can check your overall test score and how you fared among millions of other candidates who attended this online test. 4 HTML5 Mock Test This section provides various mock tests that you can download at your local machine and solve offline. Every mock test is supplied with a mock test key to let you verify the final score and grade yourself. Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Discussion

Discuss HTML5 ”; Previous Next HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a markup language. In this tutorial, we will discuss the features of HTML5 and how to use it in practice. Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Online Editor

HTML5 – Online Editor ”; Previous Next You do not need to have your own environment to start learning C programming! We have set up an online compiler for you that can be used to compile and execute the programs online. For most of the examples available in this tutorial, you will find a Try it option at the top right corner of the code box. Use it to verify the programs and check the outcome with different options. Feel free to modify any example and execute it online. A HTML5 editor where you can type your HTML / XHTML code and see the result online. Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Web Storage

HTML – Web Storage ”; Previous Next HTML Web Storage is a mechanism that helps web applications to stores data locally in users browsers. Types of Web Storage HTML introduces two mechanisms, similar to HTTP session cookies, for storing structured data on the client side, without sending it to the server. Session Storage Local Storage To use session storage or local storage in web application, we can access them through the window.sessionStorage and window.localStorage properties respectively. Examples of HTML Web Storage Here are some example that shows different ways of web storage in HTML. Session Storage The Session Storage is temporary and it gets cleared when the page session ends, which happens when the browser tab or window is closed. The data stored in session storage is specific to each tab or window. HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage, and it will be accessible to any page from the same site opened in that window, i.e., session and as soon as you close the window, the session would be lost. Example Following is the code which would set a session variable and access that variable. <!DOCTYPE html> <html> <body> <script type=”text/javascript”> if( sessionStorage.hits ){ sessionStorage.hits = Number(sessionStorage.hits) +1; } else { sessionStorage.hits = 1; } document.write(“Total Hits :” + sessionStorage.hits ); </script> <p> Refresh the page to increase number of hits. </p> <p> Close the window and open it again and check the result. </p> </body> </html> Local Storage The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current session. It does not expire and remains in the browser until it is manually deleted by the user or by the web application. In particular, web applications may wish to store megabytes of user data, such as entire user-authored documents or a user”s mailbox, on the client side for performance reasons. Again, cookies do not handle this case well, because they are transmitted with every request. HTML5 introduces the localStorage attribute which would be used to access a page”s local storage area without no time limit and this local storage will be available whenever you would use that page. Example Following is the code which would set a local storage variable and access that variable every time this page is accessed, even next time, when you open the window; <!DOCTYPE html> <html> <body> <script type=”text/javascript”> if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; } else { localStorage.hits = 1; } document.write(“Total Hits :” + localStorage.hits ); </script> <p> Refresh the page to increase number of hits. </p> <p> Close the window and open it again and check the result. </p> </body> </html> Delete Web Storage Storing sensitive data on local machine could be dangerous and could leave a security hole. The Session Storage Data would be deleted by the browsers immediately after the session gets terminated. However, to clear a local storage setting, we need to call localStorage.remove(”key”); where ”key” is the key of the value we want to remove. If we want to clear all settings, the localStorage.clear() method can be called. Example Following is the code which would clear complete local storage; <!DOCTYPE html> <html> <body> <script type=”text/javascript”> localStorage.clear(); // Reset number of hits. if( localStorage.hits ){ localStorage.hits = Number(localStorage.hits) +1; } else { localStorage.hits = 1; } document.write(“Total Hits :” + localStorage.hits ); </script> <p> Refreshing the page would not to increase hit counter. </p> <p> Close the window and open it again and check the result. </p> </body> </html> Reson to birng Web Storage over Cookies The web storage is introduced to overcome the following drawbacks of cookies. Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data. Cookies are included with every HTTP request, thereby sending data unencrypted over the internet. Cookies are limited to about 4 KB of data. Not enough to store required data. Print Page Previous Next Advertisements ”;

Aug 10

HTML5 – Geolocation

HTML – Geolocation API ”; Previous Next HTML Geolocation API used by web applications to access geographical location of user. Most of the modern browsers and mobile devices support Geolocation API. JavaScript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map. Syntax var geolocation = navigator.geolocation; The geolocation object is a service object that allows widgets to retrieve information about the geographic location of the device. Geolocation Methods The geolocation object provides the following methods: Method Description getCurrentPosition() This method retrieves the current geographic location of the user. watchPosition() This method retrieves periodic updates about the current geographic location of the device. clearWatch() This method cancels an ongoing watchPosition call. Following is a sample code to use any of the above methods: function getLocation() { var geolocation = navigator.geolocation; geolocation.getCurrentPosition(showLocation, errorHandler); watchId = geolocation.watchPosition(showLocation, errorHandler, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }); navigator.geolocation.clearWatch(watchId); } Here showLocation and errorHandler are callback methods which would be used to get actual position as explained in next section and to handle errors if there is any. Location Properties Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method that retrieves the location information. These methods are called asynchronously with an object Position which stores the complete location information. The Position object specifies the current geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed. The following table describes the properties of the Position object. For the optional properties if the system cannot provide a value, the value of the property is set to null. Property Type Description coords objects Specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed. coords.latitude Number Specifies the latitude estimate in decimal degrees. The value range is [-90.00, +90.00]. coords.longitude Number Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00]. coords.altitude Number [Optional] Specifies the altitude estimate in meters above the WGS 84 ellipsoid. coords.accuracy Number [Optional] Specifies the accuracy of the latitude and longitude estimates in meters. coords.altitudeAccuracy Number [Optional] Specifies the accuracy of the altitude estimate in meters. coords.heading Number [Optional] Specifies the device”s current direction of movement in degrees counting clockwise relative to true north. coords.speed Number [Optional] Specifies the device”s current ground speed in meters per second. timestamp date Specifies the time when the location information was retrieved and the Position object created. Following is a sample code which makes use of position object. Here showLocation method is a callback method: function showLocation( position ) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; … } Handling Errors Geolocation is complicated, and it is very much required to catch any error and handle it gracefully. The geolocation methods getCurrentPosition() and watchPosition() make use of an error handler callback method which gives PositionError object. This object has following two properties: Property Type Description code Number Contains a numeric code for the error. message String Contains a human-readable description of the error. The following table describes the possible error codes returned in the PositionError object. Code Constant Description 0 UNKNOWN_ERROR The method failed to retrieve the location of the device due to an unknown error. 1 PERMISSION_DENIED The method failed to retrieve the location of the device because the application does not have permission to use the Location Service. 2 POSITION_UNAVAILABLE The location of the device could not be determined. 3 TIMEOUT The method was unable to retrieve the location information within the specified maximum timeout interval. Following is a sample code which makes use of PositionError object. Here errorHandler method is a callback method: function errorHandler( err ) { if (err.code == 1) { // access is denied } … } Position Options Following is the actual syntax of getCurrentPosition() method: getCurrentPosition(callback, ErrorCallback, options) Here third argument is the PositionOptions object which specifies a set of options for retrieving the geographic location of the device. Following are the options which can be specified as third argument: Property Type Description enableHighAccuracy Boolean Specifies whether the widget wants to receive the most accurate location estimate possible. By default this is false. timeout Number The timeout property is the number of milliseconds your web application is willing to wait for a position. maximumAge Number Specifies the expiry time in milliseconds for cached location information. Following is a sample code which shows how to use above mentioned methods: function getLocation() { var geolocation = navigator.geolocation; geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000}); } Examples of HTML Geolocation API Here are some examples that shows how to access geolocation in HTML. Get Current Location The following code shows how to access current location of your device using JavaScript and

Aug 10

HTML5 – Entities

HTML – Entities ”; Previous Next HTML Entities are used to represent characters that are reserved in HTML or have special meanings. This can also used to display characters that are not available on a standard keyboard. Entities start with ampersand(`&`) and end with semi column(`;`). For Example: > (greater than) = &gt; < (less than) = &lt; HTML Character Entities Name and Code You cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag. We can use entity names or entity numbers to display reserved HTML characters, ie to display a less than sign (<) we must write: &lt; or &#60; HTML processors must support following five special characters listed in the table that follows. Symbol Description Entity Name Number Code “ quotation mark &quot; &#34; ” apostrophe  &apos; &#39; & ampersand &amp; &#38; < less-than &lt; &#60; > greater-than &gt; &#62; HTML Non Breaking Spaces Name and Code In HTML, You can add spaces between elements and texts using `&nbsp` entity. Unlike space given from space bar this space will not break into new line. Two words that are separated by `&nbsp` will stick together even at the end of line. If you write 5 spaces in your text using space bar, the browser will only add 1 space. To add real spaces to your text, you can use the `&nbsp` character entity. Example of HTML Entities Let”s look into the following example we are displaying some character entities and the escape symbols in code. <!DOCTYPE html> <html> <head> <title>HTML Character Entities</title> </head> <body> <h1>HTML Character Entities</h1> <table> <tr> <th>Symbol</th> <th>Entity</th> </tr> <tr> <td>”</td> <td>&amp;quot;</td> </tr> <tr> <td>&</td> <td>&amp;amp;</td> </tr> </tr> <tr> <td>”</td> <td>&amp;apos;</td> </tr> </table> This is &nbsp; &nbsp; &nbsp; example of &nbsp; &nbsp; &nbsp; &amp;nbsp; character </body> </html> There is also a long list of special characters in HTML 4.0. In order for these to appear in your document, you can use either the numerical codes or the entity names. For example, to insert a copyright symbol you can use either of the following: &copy; 2007 or &#169; 2007 ISO 8859-1 Symbol Entities Name and Code Following are the ISO 8859-1 Symbol Entities that are listed below: Result Description Entity Name Number Code   non-breaking space &nbsp; &#160; ¡ inverted exclamation mark &iexcl; &#161; ¤ currency &curren; &#164; ¢ cent &cent; &#162; £ pound &pound; &#163; ¥ yen &yen; &#165; ¦ broken vertical bar &brvbar; &#166; § section &sect; &#167; ¨ spacing diaeresis &uml; &#168; © copyright &copy; &#169; ª feminine ordinal indicator &ordf; &#170; « angle quotation mark (left) &laquo; &#171; ¬ negation &not; &#172; ­ soft hyphen &shy; &#173; ® registered trademark &reg; &#174; ™ trademark &trade; &#8482; ¯ spacing macron &macr; &#175; ° degree &deg; &#176; ± plus-or-minus  &plusmn; &#177; ² superscript 2 &sup2; &#178; ³ superscript 3 &sup3; &#179; ´ spacing acute &acute; &#180; µ micro &micro; &#181; ¶ paragraph &para; &#182; · middle dot &middot; &#183; ¸ spacing cedilla &cedil; &#184; ¹ superscript 1 &sup1; &#185; º masculine ordinal indicator &ordm; &#186; » angle quotation mark (right) &raquo; &#187; ¼ fraction 1/4 &frac14; &#188; ½ fraction 1/2 &frac12; &#189; ¾ fraction 3/4 &frac34; &#190; ¿ inverted question mark &iquest; &#191; × multiplication &times; &#215; ÷ division &divide; &#247; ISO 8859-1 Character Entities Name and Code Let”s look into the ISO 8859-1 Character Entities that are listed below: Result Description Entity Name Number Code À capital a, grave accent &Agrave; &#192; Á capital a, acute accent &Aacute; &#193; Â capital a, circumflex accent &Acirc; &#194; Ã capital a, tilde &Atilde; &#195; Ä capital a, umlaut mark &Auml; &#196; Å capital a, ring &Aring; &#197; Æ capital ae &AElig; &#198; Ç capital c, cedilla &Ccedil; &#199; È capital e, grave accent &Egrave; &#200; É capital e, acute accent &Eacute; &#201; Ê capital e, circumflex accent &Ecirc; &#202; Ë capital e, umlaut mark &Euml; &#203; Ì capital i, grave accent &Igrave; &#204; Í capital i, acute accent &Iacute; &#205; Î capital i, circumflex accent &Icirc; &#206; Ï capital i, umlaut mark &Iuml; &#207; Ð capital eth, Icelandic &ETH; &#208; Ñ capital n, tilde &Ntilde; &#209; Ò capital o, grave accent &Ograve; &#210; Ó capital o, acute accent &Oacute; &#211; Ô capital o, circumflex accent &Ocirc; &#212; Õ capital o, tilde &Otilde; &#213; Ö capital o, umlaut mark &Ouml; &#214; Ø capital o, slash &Oslash; &#216; Ù capital u, grave accent &Ugrave; &#217; Ú capital u, acute accent &Uacute; &#218; Û capital u, circumflex accent &Ucirc; &#219; Ü capital u, umlaut mark &Uuml; &#220; Ý capital y, acute accent &Yacute; &#221; Þ capital THORN, Icelandic &THORN; &#222; ß small sharp s, German &szlig; &#223; à small a, grave accent &agrave; &#224; á small a, acute accent &aacute; &#225; â small a, circumflex accent &acirc; &#226; ã small a, tilde &atilde; &#227; ä small a, umlaut mark &auml; &#228; å small a, ring &aring; &#229; æ small ae &aelig; &#230; ç small c, cedilla &ccedil; &#231; è small e, grave accent &egrave; &#232; é small e, acute accent &eacute; &#233; ê small e, circumflex accent &ecirc; &#234; ë small e, umlaut mark &euml; &#235; ì small i, grave accent &igrave; &#236; í small i, acute accent &iacute; &#237; î small i, circumflex accent &icirc; &#238; ï small i, umlaut mark &iuml; &#239; ð small eth, Icelandic &eth; &#240; ñ small n, tilde &ntilde; &#241; ò small o, grave accent &ograve; &#242; ó small o, acute accent &oacute; &#243; ô small o, circumflex accent &ocirc; &#244; õ small o, tilde &otilde; &#245; ö small o, umlaut mark &ouml; &#246; ø small o, slash &oslash; &#248; ù small u, grave accent &ugrave; &#249; ú small u, acute accent &uacute; &#250; û small u, circumflex accent &ucirc; &#251; ü small u, umlaut mark &uuml; &#252; ý small y, acute accent &yacute; &#253; þ small thorn, Icelandic &thorn; &#254; ÿ small y,