HTML- HyperText Markup Language
Starting with the History of HTML, HTML was designed to be the publishing language of the newly created World Wide Web which started its life in 1989. The very first HTML standard (HTML+) was created in 1993. It was based on the well known SGML. After some years there is an update for the HTML standard as HTML2 which came to life in 1995. With the years, HTML becomes popular and in year 1997 HTML3.2 was out. W3C kept updating HTML and in late 1999 released the HTML 4 standard.
Use Of HTML
HTML is a markup language that implement the ‘mark’ part using tags (opening-closing tags). These tags are used to define the content (and sometimes the layout) of the information it ‘marks’.
A pseudo declaration of any HTML tag should look like this:
For example, to declare part of the text as a paragraph, we use the p tag, like this:
<p>Hi, my name is Silky Nanda</p>
Same for inserting an image we use img tag:
<img src="" alt="Hi This is Me!">
How HTMl5 Different From HTML4:
HTML4 has been a standard web development for more than 10 years. However, with the advent of smart-phones era, things have totally changed and that change has effected or rather revolutionized the way websites are developed. Now apart from targeting desktop PCs and laptops, web-developers have to keep in mind that their website would be accessed by mobile-user; and with the growing number of mobile users.
Though, HTML4 is still a W3C standard for browser applications, it doesn’t fully cater to the changing trends of the computing industry. Therefore, HTML5 has been developed with intent to cop-up with these new challenges in web industry.
HTML5 is more flexible, robust and advanced as compare to HTML4
Major characteristics that distinguish HTML5 from HTML4:
- Simplified and Clear Syntax – The syntax in HTML5 is extremely clear and simple as compared to HTML4. For Example:
<!DOCTYPE html>is enough to specify the document type in HTML5 which is too messy and lengthy in HTML4.
- Multimedia Elements – HTML5 contains built in support for integrated multimedia files into web page via video and audio tags. Previously, in HTML4, the multimedia content was integrated in web pages via third party plugins such as Silverlight and flash.
- Browser Compatibility – HTML4 is compatible with almost all web-browsers. HTML5 lags behind HTML4 in terms of compatibility with the browsers.
New Semantic Elements In HTML5 which are not in HTML4:
HTML5 offers new semantic elements to define different parts of a web page:
- section – represents a generic document or application section. It should be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
<section> <h1>Welcome</h1> <p>Hi, welcome to my site.</p> </section>
- article – The
<article>element specifies independent, self-contained content.An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
- aside – represents a piece of content that is only slightly related to the rest of the page.
<article> <p> The movie <em>The Little Mermaid</em> was first released to theatres in 1989. </p> <aside> The movie earned $87 million during its initial release. </aside> <p> More info about the movie... </p> </article>
- header – represents a group of introductory or navigational aids.
- footer – represents a footer for a section and can contain information about the author, copyright information, etc.
<article> <header> <h1>Place heading here</h1> <p>Text here</p> </header> <p>More text can be added here</p> </article> <footer> <p>Posted by: Silky Nanda</p> <p>Contact information: <a href="mailto:firstname.lastname@example.org"> email@example.com</a>.</p> </footer>
- nav – represents a section of the document intended for navigation.
- figure – represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.figcaption can be used as caption.
New Semantic Elements In HTML5:
HTML 5 has included several new media elements for displaying media content. Following are some of the most important media elements included in HTML5:
- Video tag
<video>– HTML5 defines a new element which specifies a standard way to embed a video file on a web page.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video>
- Audio tag
<audio>: HTML5 defines a new element which specifies a standard way to embed an audio file on a web page.
<audio controls> <source src="http://imgs.g4estatic.com/html/html4-vs-html5/test.mp3" type="audio/mpeg"> </audio>
Posted by Silky Nanda