HTML Crash Course for Beginners -2

Welcome to part-2 of the series. In the part-1 we mainly did some setups and some basics. But before moving forward will look into more details.

Tag Syntax

Element names are surrounded by angle brackets like below.


Normally comes in pairs — start tag and end tag. End tag is generally the same but with a forward slash. Below is an example of h1 tag and paragraph tag.

<h1>Contact Us</h1>
<p>You can contact us by filling the below form</p>

Some tags are self closing like the break row tag <br />

HTML Page Structure

The HTML page structure diagram is below and it starts with DOCTYPE tag, which tell the browser which type of HTML it is, which for our case in HTML5 and given by <!DOCTYPE html>.We have other doctypes also, like for HTML4 but we don’t use it anymore.

Next, we wrap our whole code with <html> tag, in which we can also give the language of the website. For us it is en(English).

Next, we have the <head> tag, which contains the metadata of the site. Metadata is generally use by google crawlers an useful to put the keywords of the site. Beside this it also contains the <title> tag, the content inside which is shown for the browser title. We also have the link to the CSS and JS files here, but that for another part.

The sibling of the <head> tag is the <body> tag and it is the tag, which contains all of our content of the web-page. In this example we have two tags inside it called the h1 tag and paragraph tag, but we can have hundreds different type of tags. We will look into some of them next.

Image for post
Image for post
HTML Page Structure

You can read the rest of the blog from my blog site. The link for the same is below.

You can find the part-3 here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store