HTML :
HTML means HyperText Markup Language. It is used to create the markup for the websites. Most of the websites are structured using HTML. Then content can be structured using different kinds of elements in the websites. The elements can be wrapped inside and nested to make a perfect structure for the content of the website. The simple structure of the website looks like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Don't overwhelm yourself. you will understand it as you go. most of the developers don't understand the basic structure as it is created by most extensions with a single character like emmet "!". By writing a single exclamation mark in VSCode and pressing enter. you will get this boilerplate code ready for you.
The important tags here are :
- head
- title
- body
The body contains all the markup and content for the website. It is the most important tag in HTML as it represents all the structured content inside a website
HTML Elements :
HTML elements are the building block of any website. These elements serve as a basic foundational structure for any website. HTML elements are of two types (i) self-closing tags (ii) normal tags.
self-closing tags do not require an ending tag e.g. <input type="text " >, <img src="image URL" > and many other tags. while the normal tags have an ending tag along with the content inside the tags.
Nesting HTML Elements :
HTML elements are nested inside in order to create the structure of the website. e.g. the head title and the body tags are nested inside the HTML tag.
NOTE: Never forget to close the tag with its ending tags as HTML is a markup language, it won't generate any errors rather it would disturb the structure of your website.
Types of HTML Elements
P tag : p tag also known as paragraph tag is used to create paragraphs inside the website. It is a block-level element which means that it occupies the whole available width of the web page.
<p> this is a paragraph </p>
a tag: a tag also known as an anchor tag is used to create links inside the website. It is an inline-level element which means that it occupies the only available width occupied by the text inside the tag. This tag an attribute of href which points to the link on the text.
<a href="https://www.zonatsolutions.com/"> Zonat Solutions</a>
By clicking on the Zonat Solutions link. Users would be taken to this link "https://www.zonatsolutions.com".
h tag:
h tag also known as heading tag is used to create headings for the website. it has six different tags from h1 to h6. Where h1 is the most bolder and bigger in font and h6 is the least in size.
<h1> this is a heading </h1>
<h2> this is a heading </h2>
.
.
.
<h6> this is a heading </h6>
br tag :
br tag also known as break-line tag is used to add a line break for proper formatting of the content. it is a self-closing tag.
<p> Website <br > Zonat Solutions </p>
It will result in :
Website
Zonat Solutions.
hr tag :
hr tag also known as horizontal-line tag is used to create a horizontal line for separating a section from other sections. it is a self-closing tag.
img tag :
IMG tag is a self-explanatory tag that is used for images in HTML. It has an src attribute that requires the path of the image.
Post a Comment