Let's me start a series with name of starter. In this series I am going to write all my learing of web dev Everything that i know till 2026 as a Dev i am really exited to start to seires let's go.
In today starter we are going to see html from basic to intermediate let's go.
just install vscode and one extention called live server and you are good to go.
HTML
HTML stands for Hyper text markup language.
It describe the structure of the web.
It tells the browser how to display the content(text,image,video,audio etc)
In html we have something called element <tagname>your contenct</tagname> so this is an example of element
element start from tag and end with closing tag and in between their is a content
just copy paste this and right on open with live server
index.html
<!DOCTYPE html>
<html>
<head>
<title>your title goes here</title>
</head>
<body>
<h1>Heading content</h1>
<p>paragraph content.</p>
</body>
</html>
you just saw your website on your browser congratulations 🎊.Now let's learn what those tag suppose to mean step by step.
<!DOCTYPTE html> start of html file for declaring this document is an html5 document
<html> this is a root element of html
<head> this contain meta information of the html
<title> by using this you can give title to your web page
<body> all the visible content are written inside this body tag
<h1> this gives heading to your web page
`
this is a paragraph tag as the name suggest this use to give paragraph to your web page.
now let's see variation of heading tag
cpy this
html
Example of h1 tag
Example of h2 tag
Example of h3 tag
Example of h4 tag
Example of h5 tag
Example of h6 tag
so the above example tell that heading come from h1 to h6 and were do we use them? we use for the ranking our website one tip use only one h1 tag for best ranking your website.
HTML Attributes
html attributes provides addition information about the element.
`html
<a href='https://www.w3schools.com/'>w3School home page</a>
`
we uses href attribute of a tag anchor tag on click on w3School you will redirect to w3school page.by they way this is a super cool and helpful website out their for learning web dev.
`html
<p style="color: red;">paragraph with red color</p>
`
as you can see we uses style attribute to give red color to our paragraph tag this style attribute is also called inline styling.
what if you want to add images in your website for this <img> tag came in picture let's see example
`html
<img src='https://avatars.githubusercontent.com/u/114822499?v=4&size=64' height='150' width='150' alt='navin image' />
`
above is my github profile image 😊.
if the image will not load in browser then the alt value will show in browser also useful for semantic purpose.
height attribute is used to define the height of the image
width attribute is used to define the width of the image.
list in html
In html you can create two kind of list ordered list and unordered list
see example
`html
My todo in order list format
- Write blog on css
- go for a jogging
- Publish a yt video on how to use zustand in react project
My Grocerry item in unorder list format
- 1 kg Onion
- 1 kg Tomato
- 500 gms Paneer
above is the example of order list where i mention my todo list and below is the example of unorder list where i wrote abot my grocerry list item.
Top comments (1)
Great starter guide, Navin! As someone currently studying HTML and Bootstrap, I find this very helpful to keep my projects organized. Do you usually recommend linking the Bootstrap CDN in the head or downloading the files locally for a starter like this? Thanks for sharing!