Hello everyone. The aim of this article is to provide basic HTML knowledge and get you familiar with common tags and statements which you need to get started with your first HTML page.

DOCTYPE

Document type declaration also known as DOCTYPE informs the browser about markup language in which the current page is written in.

It is the first line in every HTML page and is written as:

<!DOCTYPE html>

html

Truth be told, I don’t know exactly why the <html> tag is used. But I know it is a common practice to use it as a wrapper for all your other tags except DOCTYPE.

You should also include lang attribute in your <html> tag to declare language of web page and to assist search engines and browsers

<!DOCTYPE html>
<html lang="en">

</html>

head

<head> section contains the information about the page which is readable by browsers, search engines, and other sites.

Some common things which are included in <head> are:

Meta tags (useful to search engines)
Title tag (page title, shows up in your browser tab)
Link tag (use to link your CSS files in HTML page)
Script tag (use to link you JavaScript file in you HTML page)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta property="og:title" content="Example page title." />
        <meta property="og:description" content="Example page description." />
        <meta property="og:image" content="url to your image" />

        <title>Page title</title>
    </head>
</html>

body

Everything which is visible on your page comes inside the <body> tag. Most of the tags which we will go through are used in <body> tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta property="og:title" content="Example page title." />
        <meta property="og:description" content="Example page description." />
        <meta property="og:image" content="url to your image" />

        <title>Page title</title>
    </head>

    <body>
        <!-- page content comes here -->
    </body>
</html>

Conclusion

We went through basic HTML tags which occur on almost all HTML pages and made a skeleton boilerplate for our HTML file. In the next article of this series we will go through the tags which are used in <body> tag and are used to layout your page.

Thanks for Reading.

If you enjoyed this post please share, and follow me on DEV.to or Twitter if you would like to know as soon as I publish a post! 🔥

Blog

Get started with Web Development, HTML Part-1

Ali Taha Shakir

DOCTYPE

html

head

body

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related