DEV Community

Cover image for Get started with Web Development, HTML Part-1
Ali Taha Shakir
Ali Taha Shakir

Posted on • Originally published at alitahashakir.dev

Get started with Web Development, HTML Part-1

#beginners #html #webdev #tutorial

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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! 🔥

Top comments (0)

Read next

josefine profile image

Making Disabled Buttons more Accessible

Josefine Schfr -

furkangozukara profile image

Compared Effect Of Image Captioning For SDXL Fine-tuning / DreamBooth Training for a Single Person, 10.3 GB VRAM via OneTrainer

Furkan Gözükara -

nikl profile image

12 Security Tips for Golang Apps - validation, sanitization, auth, CSRF attacks, hashing ++

Nik L. -

lamnhan profile image

I've created yet another JavaScript framework

Nhan Lam -