If you are a beginner in front-end world or you are back-end programmer, like C#, Java, Python or SAP-ABAP and from time to time you must do some coding in HTML, CSS or JavaScript, than you are in a right place!
I will show in this short course the most important parts of Front-End world, which will allow you to make good, semantically correct and clean code even if you are a beginner or back-end developer.
Read other articles from that course:
You know probably how HTML looks like, you write your code where needed, and probably in most cases, it works properly. But did you check by validator.w3.org if it is fully correct HTML document? Is it good in SEO? Or maybe front-end developers from your team complain that your HTML code is not good enough?
If you can answer YES on any from above questions, it means that this article is for YOU 🙂
I’m not pretending here to make a full HTML tutorial, in this and other articles I will point only the common mistakes or misunderstandings done by beginners in front-end world. If you are looking for a very detailed and good HTML tutorial, just check Mozilla Developers Network here.
Table of Contents
HTML Document syntax
We will not focus on total basic. You know most probably how to write HTML tags, how to open it, how to close, write content, so it is possible for you to make code like below without any problems:
<div class="wrapper"> <h1>Hello</h1> <p>This is a FIRST paragraph with text</p> <p>This is a SECOND paragraph with text</p> </div>
But lets think about wider scope of HTML document. In nowadays, browsers are really smart. Browser can display correctly even invalid HTML code. But if its condition will be poor, it will affect e.g. SEO or it can work badly with JavaScript libraries.
Lets check the HTML document syntax from general to specific.
HTML document consist of 4 main parts which must appear to have 100% valid HTML code. Lets have an example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Hello my little HTML document</title>
</head>
<body>
This is the smallest possible, fully correct HTML document :)
</body>
</html>We can check above document with HTML validator and see that it is 100% correct HTML document:
Lets go now through all elements of above document:
- “Doctype” declaration – this is not a HTML tag, this is only a information for browser what kind of document it should expect below that line. Doctype in nowadays is very simple, we must write only
<!DOCTYPE html>to make it correct. - Next there is opening tag:
<html lang="en-US">which simply opens the HTML document and contains whole content inside it. Of course it must be closed on the end of document by</html>. It must contain attribute “lang” which tells browser what is the language of the website. - Next there is
<head>tag, which of course, is the header of the document, which contains all kind of meta data of the document, which describe its content or applies settings of the document for the browser. It must contain only the<title>tag. Content of the title tag is displayed at the top of the browser window or in the card label like on image below:
HTML title tag 4. The last, and the most important part is the
<body>of the document. It contains whole content of the website, so everything what you would like to display to the end user, must be placed between body tags. We can combine two above examples into one and have fully correct HTML document with a content to show to the end user.<!DOCTYPE html> <html lang="en-US"> <head> <title>Hello my little HTML document</title> </head> <body> <div class="wrapper"> <h1>Hello</h1> <p>Hello, this is the smallest, correct HTML document :)</p> <p>This is a FIRST paragraph with text</p> <p>This is a SECOND paragraph with text</p> </div> </body> </html>
HTML head content
HTML <head> tag should contain everything what describes your website or webapp, so the meta tags plus links to scrips and CSS styles. Yes, scripts should also be added in head, but with “async” or “defer” properties. Some longer time ago developers put external JavaScript files at the end of the HTML document, just before closing </body> tag, to not stop loading the whole content of the website till the external JS files will download.
But nowadays, we put everything, also JavaScript external files in head, but we add to it properties:
- async – downloading and execution of external JavaScript file will be triggered imminently when browser will read that line of html code.
- defer – downloading and execution of external JS file will be triggered after whole document has loaded. It is useful when we have scrips which are manipulating the DOM on current page.
Both, async and defer, will not block loading the content of the webpage. So… what is the difference in practice?
When we have a JavaScript code in external file, which is supposed to manipulate the DOM, so in practice the content of our webpage, than we must use DEFER property. Because then script will be executed when the content is in place. If the script will be executed before content is loaded, then it will not manipulate the DOM, because there will be NO DOM.
The proper content of tag is more or less like following, but of course it might vary and it is just an example:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dev-Bay.com examples</title>
<meta name="description" content="Tips for programmers">
<meta name="keywords" content="css, html, nodejs">
<meta property="og:image" content="img/og-logo.png">
<meta property="og:title" content="DEV-BAY.COM">
<meta property="og:description" content="Tips for programmers">
<meta property="og:type" content="website" />
<script type="text/javascript" src="js/MAIN.js" defer></script>
<link type="text/css" rel="stylesheet" href="css/STYLE.css">
<link type="image/ico" rel="shortcut icon" href="favicon.png">
</head>
In above code there are:
- Meta tags describing encoding of the page, compability with browsers, vieport (how webpage should behave on different screens according the Responsive Web Design)
- Description of the content with keywords
- “Open Graph Meta tags” – which are used by social media in grabbing the preview of the content of our website
- At the end there are, as mentioned earlier, the scripts and css styles.
- Favicon – icon which is displayed in the card name in browser:
HTML favicon IMPORTANT! Browsers like to cache favicons very deeply, so sometimes you can upload a new favicon to the server, but it will be still not visible in the browser. It might be confusing, but just make a “hard refresh” –
ctrl + shift + Rand it should be reloaded.
Continue reading on next article about HTML SEMANTIC ELEMENTS.
