DEV Community

Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

Introduction to HTML5 – for Beginners

Introduction to HTML5 – for Beginners

HTML is an abbreviation for Hyper Text Markup Language. It is used to create web pages by utilising a markup language. HTML5 is the current and fifth version of HTML. It is more than just a new version of the HTML language with new elements and attributes.

One of the first new features you’ll notice when writing HTML5 documents is the doc type declaration. Any modern site should use the HTML doctype — this will ensure that you are using the latest version of HTML.

<!DOCTYPE HTML>
Enter fullscreen mode Exit fullscreen mode

The declaration of character encoding (charset) is also simplified. It will cover all of your character needs regardless of the language you use in your document.

<meta charset=“UTF-8”>
Enter fullscreen mode Exit fullscreen mode

HTML5 Advantages

The following are the primary advantages of HTML5:

  • All modern browsers support HTML5.
  • HTML5 is better suited to mobile devices. It is simple to use.
  • HTML5 can aid in the creation of visually appealing websites using CSS, JavaScript, and other scripting languages.
  • SVG (Scalable Vector Graphics) and other virtual graphics are supported by HTML5.
  • The code becomes cleaner primarily as a result of the replacement of tags with Semantic elements.

    New Elements in HTML5

    HTML5 introduces a number of new elements that add functionality to the creation of an appealing and dynamic website. You can make your code easier and faster with the help of these elements.

    • <article>
    • <aside>
    • <audio>
    • <canvas>
    • <datalist>
    • <details>
    • <embed>
    • <footer>
    • <header>
    • <nav>
    • <output>
    • progress>
    • <section>
    • <video>
    • and even more!

    New in HTML5

    Forms

    • The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.
    • Date pickers, color pickers, and numeric stepper controls have been added.
    • Input field types now include date, email, range, search, and URL to name a few.
    • PUT and DELETE form methods are now supported.

    HTML5 Graphics

    • we now have <canvas> is used to draw graphics, on the fly, via scripting
    • <picture> which defines a container for multiple image resources
    • <svg> which defines a container for SVG graphics.

    Integrated API (Application Programming Interfaces)

    • Drag and Drop
    • Audio and Video
    • Offline Web Applications
    • History
    • Local Storage
    • Geolocation
    • Web Messaging

    HTML Cheat Sheet

    If you want to learn more about HTML, grab my cheat sheet which is available on Gumroad.
    This product will assist you in learning the fundamental HTML elements in your Web Development journey. It is intended for both beginners and experts who want to brush up on their knowledge
    All of the resources are structured and organised in a straightforward and easy-to-read manner. They include interactive external links, images, tag names and code snippets to help you understand the topics better.

    Further reading

    Looking for a more detailed definition of HTML5? Then check out – HTML5 – MDN Web Docs Glossary: Definitions of Web-related terms | MDN

    See also

    What is HTML? Basics Explained
    How to Begin with Semantic HTML
    How to Create an HTML Boilerplate

    If you liked this article, then please share. You can also find me on Twitter for more updates.

Top comments (2)

Collapse
 
viren15152 profile image
Viren

Great post to help out new developers. Appreciate the time you took to do this mate.

Collapse
 
max88git profile image
Max Lockwood

Thanks man! I appreciate it. The main reason I write them is to try and help beginner developers and share knowledge.