This is a tutorial of how to learn basic HTML 5 easily with examples of HTML 5 tags. This tutorial aims for everyone who is interesting in web programming or web design using HTML 5. Please read this article from top to bottom to get fully understanding.
What is HTML?
HTML stands for Hyper Text Markup Language. It a scripting language that readable by the browser (standard) or by another application like Microsoft Word. Basically, all web browser (Chrome, Firefox, Internet Explorer, Opera) convert HTML tags to screen as viewable. Let take a real example:
- Open your web browser (Chrome/Firefox/Opera/Safari/IE)
- Write address on address box at the top of browser and write e.g: www.google.com
- Click Enter from keyboard then look at the page, should be like this
- Yes, you see simple google search with a textbox, search and feeling lucky button surrounded by few links only.
- Now, right click your mouse on blank area of page then click View Page Source
Terms About HTML
From this stage we found few terms about HTML they are:
- Web Browser is application for displaying web pages that accessing the internet on your Computer
- Page Source is group of special characters for building a single web page
- Syntax, another term for source code or group of word with special character defined
- Tag, is term for single syntax that build a source like "<html>" or <script>
Understanding HTML Tag
After few introduction, we will show a simple HTML page that shows few text in the browser. Just copy and paste to your text editor and save as simpleexample.html (don't save as text file or .txt)
<!doctype html> <head> <title> Simple Single HTML Page </title> </head> <body> <h1>Simple Single HTML Page</h1> Simple Single HTML Page </body> </html>
Right-click the file, then open by -> chrome or firefox. Then it will show text in the page.
Let me explain line by line.
This line is the core of HTML syntax, because this describes type of document or file. Every HTML page shoul starting with this line and ended with </html>. Every value of HTML must be surrounded by "<>" and "</>", in this case "<!doctype html>" and </html>".
<head> ... </head>
This line is the title of the page that show on top of browser or browser tab.
<body> ... </body>
This line is where main content put on the HTML page.
This is header text inside of the content.
Another thing is text under "<h1>..</h1>" without any tag, it treats as standard text without style if we put inside body.
That's it, a simple easy learning HTML 5, especially HTML itself.