Discover HTML5 - the best tool for creating websites

Would you like to start your adventure with website development? If you do, you absolutely need to know HTML5 - the basic tool of every Front End Developer. Forget the terrible Internet era of Flash - HTML5 guarantees simple work that will not cause you any problems!

frontend

Marcin | Frontend Engineering Analyst

December 1, 2015

8 minutes read

HTML is a markup language used for creating and viewing websites in a browser. It describes the structure of the document and modifies a plain text with effects such as paragraph, header, list or hyperlink. It also enables files’ embedding and allows to create forms for the communication with the server. Browsers use these markups for displaying elements in accordance to their role.

The example of a template:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8”>
        <title>Name of the website</title>
    </head>
    <body>
        <main>
            <h1>Hello world</h1>
            <article>
                <header>
                    <h2>Header of the article</h2>
                </header>
                <p>This is the paragraph of the article</p>
                <footer>Footer of the article</footer>
            </acrticle>
        </main>
    </body>
</html>

HTML5 doesn’t have to be installed

Developing and browsing websites in HTML does not require any installation and needed tools, such as the text editor or web browser, are already included in every operating system. To make your work easier, it’s worth to use dedicated editors or IDE (Integrated Development Environment), but it is not necessary for the purpose of learning HTML.

New attributes

Some new attributes were added to already existing tags - the most popular among them are:

<input type=”text” autofocus> - input is selected immediately after the page loads;
<input type=”text” placeholder=”example text”> - adds a example text to the input;
<input type=”email”> - forces the user to type a valid e-mail address (with @ sign);
<input type=”number”> - allows the input of only numbers, it can also set the scope of these numbers. Mobile browsers receive a keyboard layout for numbers appears;
<input type=”range”> - we can set the value’s range on the axis;
<input type=”search”> - that type of field is useful for mobile devices - we have an access to a different keyboard layout that helps in searching;
<input type=”tel”> - mobile devices receive a different keyboard layout that supports input of phone numbers.

New API in HTML5

History API – is used to manipulate the website’s address via JavaScript. It’s particularly useful for ajax-based websites;
File API – this API allows to receive precise information about the uploading file without the usage of server-based technologies;
Local Storage - gives you the ability to store data on the browser. After saving you can access it until the removal from browsers' cache;
Geolocation – with users' allowance it is possible to check their approximate location;
Web Sockets – supports continuous and current data exchange between the web browser and the server. For this you will need a special API that has to be used via JavaScript as well as the adequately prepared server;
Drag and Drop – allows to drag and drop files without the need of using external libraries.

HTML and Flash – comparison

Flash used to be an alternative for HTML. Its purpose was to liven up the website and make it eye-catching, what was attracting users. Nowadays Flash is not supported on mobile devices, what disrupt or enables proper loading of websites. Additionally, Flash slows computers down and has vulnerabilities that allow to infect the computers or even take over website users’ computers.

Thanks to HTML and CSS we are able to create responsive websites and adjust them to various screen resolutions - if we were to use Flash for RWD, we wouldn’t be able to get satisfactory quality of websites. Additionally, mobiles devices don’t allow to run Flash on websites without special settings. Moreover, it’s not as easy to develop websites with Flash as it is with HTML5, it requires a special software. If you want to browse Flash-based websites, the same software has to be also installed on your computer and/or browser.

HTML5 adds new elements that simplify developing websites and eliminate few additional JavaScript libraries. HTML5 can replace Flash, but due to the lack of support from some web browsers – especially older ones – some tags can’t be used in every project. Even the newest web browsers don’t support all new functions. Because of that few functions can’t be used:

details – additional content that user can mark as seen or hidden;
dialog – defines a dialog box;
mark – marks selected text;
menu – reintroduced in HTML5, this element defines an additional context menu list;
meter – contains the value for given scale;
progress – usel for describing the progress made in the task;
summary – shows the header for the <details> tag;
time – returns date or time value;
wbr – makes it possible to break a line if the text does not fit in a single line;
input type=”color” – shows the color picker/palette;
input type=”date” – simply a data picker;
input type=”time” – time picker;

HTML-based websites are easily modifiable – we don’t have to edit the whole file like in case of Flash technology, but only a specific subpage/element that requires modifications.

Summary

PROS	CONS
Div is less important than in previous versions and the new elements are given more power	Not fully supported
Can replace Flash	Browser-dependent
New functionalities such as: History API, Geolocation, File API	CSS is required for styling the website

HTML5 greatly changed Frontend Developers’ approach to work – creating and using HTML-based websites is way easier and doesn’t require installing many applications. Additionally, the usage of CSS3 and JavaScript allows to replace problematic Flash technology on websites, what makes users’ and developers’ life easier. Despite the fact that some web browsers (such as Internet Explorer) don’t support HTML5, it’s still the best tool for websites’ development – you only need a browser and a simple notepad to edit a website.

Thanks to the new standard it’s possible to develop HTML5-based games – you can check out the Principles of HTML5 Game Design article on our blog.