This is a first article in the series dedicated to beginners in HTML5 programming. In this example, we’ll create a simple Hello World HTML5 application with complete descriptions of all...
This is a first article in the series dedicated to beginners in HTML5 programming. In this example, we’ll create a simple Hello World HTML5 application with complete descriptions of all tags and their meaning, in order to to bring HTML5 to beginning with writing HTML code.
To start the project, I’ve created following project structure.
- Project Name
‘CSS’ folder
‘main.css’ - this is the file where the styling of the HTML document goes
- ‘myFirstHTML.html’ – this file holds the HTML code of the application
Following screenshot outlines the structure and how it looks inside the IDE:
HTML Code
To build an HTML file, we need it to be properly structured. To do so, I’ve used following HTML code organization:
Following screenshot outlines the HTML code and it’s organization:
So, let’s go step-by-step over how my application code is defined:
2.1 Document Meta Data
I started with the . This must be the very first declaration of any HTML document. It’s crucial to remember that this declaration is not an actual HTML tag. It serves only as an instruction to the web browser, telling it which version of HTML the rest of the page will be written in.
The reason why I added and not just is due to nature of stating that this is an HTML5 type of application. Leaving it as <! doctype > only declarations would signify that this is HTML 4.01 type of implementation.
2.2 Document Meta Data
<head>
Head tag is an initial element of an HTML5 application. The reason we need to add
element is due to a fact, that this is a placeholder for all of the metadata that will be used later inside and tags. The meta tags that sit inside the element will describe the metadata that I’ll use within my HTML document. That said, it’s good to remember, that none of the data inside the meta tag are displayed in the HTML body of the browser. The meta tags are strictly a description of metadata, such as document’s title, character set, styles, links, scripts, and other meta information.
Some of the meta data that I’ve decided to use in my HTML5 application are following:
<meta charset="UTF-8">
As you can see, I didn’t use typical: , as this would tell the browser that I am using HTML 4.01 type of document and because this is HTML5 application, it would be an incorrect statement.
Instead, I used , which is a correct way to indicate to the browser that this is an HTML5 type of application. In here, the Charset attribute specifies the character encoding for the HTML document. The reason I’ve initialized charset attribute as UTF-8 is simple. The UTF-8 is one of the best and most universal character encodings available. As a matter of fact, it’s proficient at encoding all possible characters.
<meta name="description" content="My First's HTML5 Web Page">
This meta tag serves as a definition of my web page. It’s a good practice to insert the description of the page within meta tag, as it’s a lot easier to see what page should do. Additionally, when HTML5 page is indexed by the search engines, description tag also becomes visible in search results (under the title tag).
<link rel="stylesheet" href="css/main.css">
The next tag I’ve decided to use inside my HEAD element is tag, which always defines links between HTML document and any other external sources. As I’ve explained earlier in my project structure section, I’ve moved all styles inside the ‘CSS’ folder. It is because, it’s not a good practice to use inline HTML styling. The cascading style sheets were invented to simplify definitions of styles and also to externalize them. And that’s what I did. I’ve moved the styles into the main.css file inside the CSS folder. Link tag in this case instructs the browser, that css/main.css is the location of the CSS styles.
