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>
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:
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
</body> tag, to not stop loading the whole content of the website till the external JS files will download.
- 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?
The proper content of tag is more or less like following, but of course it might vary and it is just an example:
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:
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.