HTML5 Tutorial HTML5 is a Web page (or HTML document) in a plain text file that has been encoded using Hypertext Markup Language (HTML) to appear in a Web browser. Here is a meaning of HTML word-by-word:
Hypertext: – is a text that a user will click to jump from one document to another document. This is a reference of Web pages to link to one another.
Markup: – are the tags that apply layout and formatting conventions to plain text. In a simple way, the plain text is “marked up” with the tags.
Language: – is a reference to the fact that HTML is considered as a programming language.
Unicode:- An international encoding standard for use with different languages and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and programs. Unicode is a character encoding standard that has widespread acceptance. … They store letters and other characters by assigning a number for each one. Before Unicode was invented, there were …
In simple terms, HTML5 is a Web page (or HTML document) in a plain text file that has been encoded using Hypertext Markup Language (HTML) to appear in a Web browser. Here is a meaning of HTML word-by-word: Hypertext is a text that a user will click to jump from one document to another document. …
New features in HTML5 HTML5 introduces a number of new elements and attributes that help in building a modern website. Following are the great features introduced in HTML5. New Semantic Elements:- These are like <header>, <footer>, and <section>. Forms 2.0:- Improvements to HTML web forms where new attributes have been introduced for <input> tag. Persistent Local Storage:- To …
HTML5 Syntax Rules HTML5 is coming with lots of flexibility and support the followings Rules: Uppercase tag names. Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional.
Here, you will learn how to Access a notepad in windows and write the script. Steps for Windows 7 1. Click on Start Button on the bottom left corner of the desktop. 2. Select All Programs. 3. Click on Accessories Tab. 4. Select Notepad option. 5. A notepad window has …
How to Access Notepad, Save Document and Run the script on the Browser Read More »
Setting Up the Document Structure HTML is the way from where a user can get creative with their Web content, but there must be an underlying structure in place for Web browsers to read and render the Web pages properly. Which means the document should contain certain tags that represent its major sections and indicate …
Specifying the Document Type Here, you will learn how to specify the document type. So whenever you start creating an HTML5 document, the first line of the document should be: <!DOCTYPE html> The DOCTYPE tag always begins with an exclamation point and is always placed at the beginning of the document. Most of the HTML tags are not case-sensitive, but the word DOCTYPE …
All of the HTML code except the DOCTYPE tag is placed within the two sided <html> tag. The tags <html> and </html> serve as a “wrapper” around all the other tags in the document of HTML. In addition, the document should have two sections: a Head and a Body. Description of the Head Section The Head section is defined by the two-sided tag …
Creating Paragraphs and Line Breaks Here, you will learn how paragraph and line break tags has been used in the document. These tags are used within the <body> section of the document, type the text that will appear on the Web page. Description of Paragraph Tag Each paragraph of text should be enclosed in a two-sided …
Creating Headings <p>The HTML standard defines six levels of headings, <h1> through <h6>.The higher the heading number, the smaller the size of text is shown on the screen.</p> <p>HTML5 introduces a new tag called <hgroup>. When you enclose a stack of headings within <hgroup>, only the first heading in the stack will appear, the others …
Applying Bold and Italic Formatting Applying bold and italic styles are two ways of making text attractive. These styles are generally used in paragraphs rather than in headings. For bold and italics text, use the <b> and <i> tags, respectively. These are two sided tags that enclose the text to be formatted. If you want to apply both bold …
The <article> element is used for an article, which is known to be an independently distributable document, like an article in a magazine. There are some element attributes of an <article> Element:- Accesskey Class Contenteditable Contextmenu Dir Draggable Hidden Id Lang Spellcheck Style Tabindex Title
The <aside> element represents an aside to the text, such as a sidebar. Basically <aside> Tag is used in sidebar of a page, whenever user clicks on the index, it redirects the user on the related content. There are some attributes of <aside> element:- Accesskey Class Contenteditable Contextmenu Dir Draggable Hidden Id Lang Spellcheck Style Tabindex title
The <audio>Element is used for playing the audio (sound) file in the browser with full user control support. The <audio> Element contains an extra child element called SOURCE, which is used to call the exact media file which has been played in the browser. There are three different formats for the <audio>element MP3 Wav Ogg There are some attributes of <audio> element:- Autoplay Controls …
The <canvas> tag is used to draw graphics by using the JavaScript. The <canvas> tag is only a container for graphics. Basically this tag is used for graphical representation with the help of javascript. There are some attributes of <canvas> element:- height width You will learn more about it in further chapters.
The <command> element is basically used to show the command functions like to save a file, open a file or anything else. It can be used for radio buttons, checkboxes and command button to invoke the particular function. The <command> Element can be used inside the MENU Element or outside anywhere in the BODY. There are some attributes of <command> element:- accesskey checked class …
The <datalist> element specifies a list of pre-defined options for an <input> element. The <datalist> element is used to provide an “autocomplete” feature on <input> elements. So that users will see a drop-down list of pre-defined options as they input data. The <input> elements list attribute is used to bind it with a <datalist> element. …
The <details> tag specifies additional details that a user can view or hide on demand. It is also used to create an interactive device that a user can open and close. There are some attributes of <details> element:- Accesskey Class Contenteditable Contextmenu Dir Draggable Hidden Id Lang Open Spellcheck Style Tabindex title A user will store the actual details …
The <embed> tag defines a container for an external application or interactive content (a plug-in). There are some attributes of <embed> element:- Height Src Type Width The src attribute gives the URL of the resource <embed> tag defines a container for an external application or interactive content (a plug-in). There are some attributes of <embed> element:- Height Src Type Width The src attribute gives the URL of the resource you want …
The <figcaption> element defines the figure caption for a <figure> element. There are some attributes of <figcaption> element:- Accesskey Class Contenteditable Contextmenu Dir Draggable Hidden Id Lang Spellcheck Style Tabindex Title The <figcaption> element can be placed as the first or last child of the <figure> element. Here we will illustrate an example putting the <figcaption> element in the script: In this example we will use the …