DEV Community

Cover image for HTML 5
NIKHIL GAUTAM
NIKHIL GAUTAM

Posted on • Edited on

HTML 5

What Is HTML?
HTML stands for HyperText Markup Language, which can be a confusing term for many beginners. The best way to explain HTML is to examine the meaning of each word.

HyperText refers to text that contains links to other texts. Every time you click on a highlighted or underlined link that takes you to another page, you are using hypertext. As more and more pages use hypertext to link to each other, a “web” of pages starts to form. This is where we get the term World Wide Web.

Markup refers to the special symbols or codes that are inserted into a document to tell the web browser how to display the document data. For example, markup code may tell the browser to display a phrase in bold or italic text, or may tell the browser which parts of the document are headings and which are paragraphs. HTML is just one of a number of languages that uses markup code.

Language refers to the idea that the code is standardized. Just like regular spoken languages, there are certain rules that everyone must follow when writing HTML. This is so that all browsers can understand and interpret the code. There are many different programming languages, and you may have heard of some of the popular ones such as Java, Python and Ruby. Each language has its own unique set of rules, and many languages can be used in combination with HTML to create amazing webpages and applications.

What Does HTML Code Look Like?
Basically, HTML code looks just like regular text. The most identifiable feature of HTML code is the use of angle brackets. These angle brackets enclose the markup code which tells the browser how to display the document data.

Here’s an example of some simple HTML 5 code:

Introduction to HTML 5

  • Was published in October 2014 by the World Wide Web Consortium(W3C)
  • Is the latest and most enhance version of HTML
  • Supersedes HTML 4.02=1,XHTML 1.0 and XHTML 1.1
  • Is a standard for structuring and presenting content on the World Wide Web.
  • Ensures backward compatibility.

New Features Introduced in HTML 5

  • New Semantics > Provides you the new collection of tags which will help you out in creating your DOM.
  • Canvas > Help you in rendering the shapes and drawings and the runtime over the web page.
  • Geolocation > geographic location of any client who's making the request. So that you can give them service as per their location.
  • Microdata > When you're taking out the metadata within the tags of HTML.
  • Web Storage > Giving you the storage facility in the world wide web.
  • Web Messaging > giving you the feature of sending the message through the neetworks using the html5 .
  • IndexDB > An additional way to store the data, it is for storing some large amount of data.
  • Multimedia >

HTML5 Page Structure

(header, nav, main, article, section, aside, footer, address)

<header>
<div id="logo">HTML</div>
<nav>  
<ul>
    <li><a href="/">Home</a>
    <li><a href="/link">Page</a>
</ul>
</nav>
</header>
<main role="main">
<article>
<h2>Title 1</h2>
<p>Content 1</p>
</article>
<article>
<h2>Title 2</h2>
<p>Content 2</p>
</article>
</main>
<section>
A group of related content
</section>
<aside>
Sidebar
</aside>
<footer>
<p>&copy; HTML CheatSheet</p>
<address>
Contact <a href="mailto:me@htmlg.com">me</a>
</address>
</footer>
Enter fullscreen mode Exit fullscreen mode

Best resources to take references

  1. HTML Cheatsheet 2.HTML Standard 3.MDN Docs
  2. Emmet

Emmet : Emmet is a must use web developer toolkit. With Emmet you can rapidly create your markup.

Top comments (0)