image Credit: en.wikipedia.org
Learn Html5 from Scratch
This article mentions about all the core concepts that will enable you to learn Html5 from scratch. Before going in to the details, we have to address all the basic things that relate to html from came into existence in the web development world
Why do we need html ?
HTML implies Hyper Text Markup Language. It is utilized to make website pages. We need to compose our HTML in word processor or notepad or any html editor.
This is the markup composing language used to make the simple as well as some advanced documents on the Internet. HTML is like SGML, despite the fact that it is not a strict subset of that language.
HTML characterizes the structure and design of a Web Document by utilizing a whole lots of tags and their attributes. The right structure for a HTML begins with <HTML > <HEAD> (enter here what the document is about) <BODY> and finishes with <BODY> <HTML>. All the data you’d like to incorporate into your Website page fits in the middle of the <BODY> and <BODY> tags.
What is SGML?
SGML (Standard Generalized Markup Language) is a standard for how to present the markups or attributes set in a document. Such a detail is itself a document type definition (DTD). SGML is not in itself any sort of language, but rather a portrayal of how to indicate one. It is metadata.
What is DTD?
The DTD indicates the guidelines for the markup language, so that the programs render the web page accurately. HTML5 is not in view of SGML, and does not require a reference to a DTD. Tip: Dependably add the <!DOCTYPE> affirmation to your HTML reports, so that the program comprehends what sort of document to anticipate.
What is metadata?
Metadata is frequently suggested to as ‘information about information’ and one of the ways it’s done on website pages is by method for the “meta” tag. The composition of meta tags are unique and can not be used by any other tag. The meta tag can likewise be utilized to process a HTTP response header (like redirection to an alternate page) and it has properties like http-equiv and charset, the points of interest about these have been depicted clearly on the Mozilla Designer System.
What are HTML Tags?
There are many different tags used to format and design the data in a Page. Tags are likewise, used to indicate hypertext links. These permit Web engineers to direct clients to other Site pages with just a tick of the mouse on either a picture or words.
Examples of basic html tags
Metadata for the document
Sectioning tags
Text Content tags
Inline text placement tags
Image and multimedia
HTML supports various multimedia resources such as images, audio, and video.
Element Description
<area>The HTML <code><area></code> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.
<audio> The HTML <audio> element is used to embed sound content in documents. It may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one.
<map> The HTML <map> element is used with <area> elements to define an image map (a clickable link area).
<track> The HTML <track> element is used as a child of the media elements—<audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.
<video> The HTML <video> element is used to embed video content. It may contain several video sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one.
Embedded content
In addition to regular multimedia content, HTML can include a variety of other content, even if it’s not always easy to interact with.
Element Description
<embed> The HTML <embed> Element represents an integration point for an external application or interactive content (in other words, a plug-in).
<object> The HTML Embedded Object Element (<object>) represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
<param> The HTML <param> Element (or HTML Parameter Element) defines parameters for <object>.
<source> The HTML <source> element is used to specify multiple media resources for <picture>, <audio> and <video> elements. It is an empty element. It is commonly used to serve the same media in multiple formats supported by different browsers.
Scripting
In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.
Element Description
<canvas> The HTML <canvas> Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the <canvas> block. That content will be rendered both on older browsers that don’t support canvas and in browsers with JavaScript disabled.
<noscript> The HTML <noscript> Element defines a section of html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
<script> The HTML Script Element (<script>) is used to embed or reference an executable script within an HTML or XHTML document.
Demarcating edits
These elements let you provide indications that specific parts of the text have been altered.
Element Description
<del> The HTML Deleted Text Element (<del>) represents a range of text that has been deleted from a document. This element is often (but need not be) rendered with strike-through text.
<ins> The HTML <ins> Element (or HTML Inserted Text) HTML represents a range of text that has been added to a document.
Table content
The elements here are used to create and handle tabular data.
Element Description
<caption> The HTML <caption> Element (or HTML Table Caption Element) represents the title of a table. Though it is always the first descendant of a <table>, its styling, using CSS, may place it elsewhere, relative to the table.
<col> The HTML Table Column Element (<col>) defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
<colgroup> The HTML Table Column Group Element (<colgroup>) defines a group of columns within a table.
<table> The HTML Table Element (<table>) represents data in two dimensions or more.
<tbody> The HTML Table Body Element (
<td> The Table cell HTML element (<td>) defines a cell of a table that contains data. It participates in the table model.
<tfoot> The HTML Table Foot Element (<tfoot>) defines a set of rows summarizing the columns of the table.
<th> The HTML Table Header Cell Element (<th>) defines a cell that is a header for a group of cells of a table. The group of cells that the header refers to is defined by the scope and headers attribute.
<thead> The HTML Table Head Element (<thead>) defines a set of rows defining the head of the columns of the table.
<tr> The HTML Table Row Element (<tr>) defines a row of cells in a table. Those can be a mix of <td> and <th> elements.
Forms
HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There’s a great deal of added information about this available in the HTML forms guide.
Element Description
<button> The HTML <button> Element represents a clickable button.
<datalist> The HTML Datalist Element (<datalist>) contains a set of <option> elements that represent the values available for other controls.
<fieldset> The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
<form> The HTML <form> element represents a document section that contains interactive controls to submit information to a web server.
<input> The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user. How an <input> works varies considerably depending on the value of its type attribute.
<keygen> The HTML <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <keygen> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.
<label> The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element.
<legend> The HTML <legend> Element (or HTML Legend Field Element) represents a caption for the content of its parent <fieldset>.
<meter> The HTML <meter> Element represents either a scalar value within a known range or a fractional value.
<optgroup> In a Web form, the HTML <optgroup> element creates a grouping of options within a <select> element.
<option> In a Web form, the HTML <option> element is used to create a control representing an item within a <select>, an <optgroup> or a <datalist> HTML5 element.
<output> The HTML <output> element represents the result of a calculation or user action.
<progress> The HTML <progress> Element is used to view the completion progress of a task. While the specifics of how it’s displayed is left up to the browser developer, it’s typically displayed as a progress bar. Javascript can be used to manipulate the value of progress bar.
<select> The HTML select (<select>) element represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.
Interactive elements
HTML offers a selection of elements which help to create interactive user interface objects.
Element Description
<details> The HTML Details Element (<details>) is used as a disclosure widget from which the user can retrieve additional information.
<dialog> The HTML <dialog> element represents a dialog box or other interactive component, such as an inspector or window. <form> elements can be integrated within a dialog by specifying them with the attribute method=”dialog”. When such a form is submitted, the dialog is closed with a returnValue attribute set to the value of the submit button used.
<menu> The HTML <menu> element represents a group of commands that a user can perform or activate. This includes both list menus, which might appear across the top of a screen, as well as context menus, such as those that might appear underneath a button after it has been clicked.
<menuitem> The HTML <menuitem> element represents a command that a user is able to invoke through a popup menu. This includes context menus, as well as menus that might be attached to a menu button.
<summary> The HTML summary element (<summary>) is used as a summary, caption, or legend for the content of a <details> element.
Web Components
Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can even create custom versions of standard HTML elements, as well.
Note: The elements for Web Components are are defined in the World Wide Web Consortium (W3C) Web Components collection of specifications rather than the HTML specification. In addition, the Web Components specification has not been finalized and is subject to change.
Element Description
<content> The HTML <content> element is used inside of Shadow DOM as an insertion point. It is not intended to be used in ordinary HTML. It is used with Web Components.
<decorator>
<element> The HTML <element> element is used to define new custom DOM elements.
<shadow> The HTML <shadow> element is used as a shadow DOM insertion point. You might use it if you have created multiple shadow roots under a shadow host. It is not useful in ordinary HTML. It is used with Web Components.
<template> The HTML template element <template> is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
Obsolete and deprecated elements
Warning: These are old HTML elements which are deprecated and should not be used. You should never use them in new projects, and should replace them in old projects as soon as you can. There are listed here for informational purposes only.
Element Description
<acronym> The HTML Acronym Element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.
<applet> The HTML Applet Element (<applet>) identifies the inclusion of a Java applet.
<basefont> The HTML basefont element (<basefont>) establishes a default font size for a document. Font size then can be varied relative to the base font size using the <font> element.
<big> The HTML Big Element (<big>) makes the text font size one size bigger (for example, from small to medium, or from large to x-large) up to the browser’s maximum font size.
<blink> The HTML Blink Element (<blink>) is a non-standard element causing the enclosed text to flash slowly.
<center> The HTML Center Element (<center>) is a block-level element that can contain paragraphs and other block-level and inline elements. The entire content of this element is centered horizontally within its containing element (typically, the <body>).
<dir> The HTML directory element (<dir>) represents a directory, namely a collection of filenames.
<frame> <frame> is an HTML element which defines a particular area in which another HTML document can be displayed. A frame should be used within a <frameset>.
<frameset> <frameset> is an HTML element which is used to contain <frame> elements.
<isindex> <isindex> is an HTML element which is used for putting a text field in the document for querying document. <isindex> is intented to use inside of <head> element by W3C, however browsers provide support wherever it is used in the document.
<listing> The HTML Listing Element (<listing>) renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML 2 standard recommended that lines shouldn’t be broken when not greater than 132 characters.
<noembed> The <noembed> element is a deprecated and non-standard way to provide alternative, or “fallback”, content for browsers that do not support the <embed> element or do not support embedded content an author wishes to use.
<plaintext> The HTML Plaintext Element (<plaintext>) renders everything following the start tag as raw text, without interpreting any HTML. There is no closing tag, since everything after it is considered raw text.
<spacer> <spacer> is an HTML element which is used for inserting white spaces to web pages. It was created by NetScape for achieving same effect as a single-pixel layout GIF image, which was something web designers used to use to add white spaces to web pages, without actually using a GIF. However <spacer> is not supported by any major browser and same effects can be created with various CSS rules. In Mozilla applications, support for this element was removed in Gecko 2.0. Therefore usage of <spacer> is unnecessary.
<strike> The HTML Strikethrough Element (<strike>) renders text with a strikethrough, or a line through it.
<tt> The HTML Teletype Text Element (<tt>) produces an inline element displayed in the browser’s default monotype font. This element was intended to style text as it would display on a fixed width display, such as a teletype. It probably is more common to display fixed width type using the <code> element.
<xmp> The HTML Example Element (<xmp>) renders text between the start and end tags without interpreting the HTML in between and using a monospaced font. The HTML2 specification recommended that it should be rendered wide enough to allow 80 characters per line.
All the information for the tags section (in the form of images or texts) have been referenced from Mozilla Developers under fair usage license
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Contributions:
jswisher
Dvincent
adminisrator
groovecoder
teoli
serv-inc
lewiscartman
microsoft
Sheppy
Sanantananda
wakka27
fscholz
Jeremie
onei
eddyng23
cherrylover85
altigere
davidsuisse1
cdac
BenB
ethertank
Gerv
What is Html attribute?
An HTML attribute is a modifier of a HTML element(s).It can either adjusts the default usefulness of a an element or gives usefulness to certain component elements not able to work accurately without them. In HTML linguistic structure, an attribute is added to a HTML begin tag.