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.
Download NetBeans IDE from: https://netbeans.org/downloads/
Create an application project structure
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
- ‘CSS’ folder
Following screenshot outlines the structure and how it looks inside the IDE:
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 <!doctype html>. 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 <!doctype html> and not just <!doctype> 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 tag is an initial element of an HTML5 application. The reason we need to add <head> element is due to a fact, that this is a placeholder for all of the metadata that will be used later inside <html> and <body> tags. The meta tags that sit inside the <head> 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:
As you can see, I didn’t use typical: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>, 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 <meta charset=”UTF-8″>, 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 <link> 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.
The <title> tag is obligatory in all HTML documents, not just HTML5 applications such as mine. Title tag always defines the title of the document, which appears as a title at the top of the browser window toolbar. Another reason to have it included inside the HEAD element is that when visitors of our application add it to favorites, this will become the default name of the bookmark and additionally, it also becomes the name under which our page will become indexed in the search engines.
Now, that I am done describing meta data, I can close the head tag and end the meta section of my HTML5 application.
2.3 Document Body
The next step is to define the actual body of my HTML5 document, which appears to all visitors of my web application.
The <body> tag defines the document’s body. This indicates to browser that this is what eventually will be displayed to visitors of the page as a content of the HTML5 document. This element encompasses all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
For the purposes of my document, the only wording that I wanted to show on the screen is the screen were the words: ‘Hello, World!’. I’ve decided to accomplish the task, by using the <div> tag, which defines a section of an HTML document. Please note that this DIV tag is later styles by using CSS file, linking of which I’ve explained earlier. I could have as well used paragraph <p> tag, or html heading tag: <h1> to <h6> here, however the div tag felt the most appropriate.
This is indicates to browser that we’re done with the body section of our document.
2.4 Document Body
This is indicates to browser that the HTML document is concluded.
To describe how the DIV tag element is rendered on screen, I’ve decided to control the layout of my ‘myFirstHTML.html’page by using CSS style sheet. While the CSS can be added to HTML as an inline code or by including <style> tag inside the <head> section. I went for a cleaner external CSS approach. I have used an external CSS file to describe the style of the DIV tag I’ve used to display the wording: ‘Hello, World!’.
CSS Code Screenshot:
So, what have I done here?
I’ve simply stated that body of the document (everything inside the <body> tag) should use:
- background color: gainsboro.
And that everything inside the div section should be rendered using:
- Verdana font (and fallback on sans-serif default, if Verdana is not available)
- At Font size = 40pt – I’ve used ‘pt’ as size of the font identified. I could have used ‘em’ for scalability or ‘px’ for pixels as well, however points are used in print media, which is useful for those users who decide to print the page on paper. A single point equals to 1/72 of an inch. I also like the fact, that points, similarly to pixels are fixed and won’t scale in size.
- Blue color – this indicates that the font color should be set to blue, to all the text inside the div tag.
To conclude, this is what the final HTML5 application looks like when rendered inside the browser: