HTML
The article written by Sagar Jaybhay. In this series we can understand HTML tags and other useful information.
<!DOCTYPE html>
Initial line in html file which tells the browser it uses Html 5.
<!DOCTYPE html>
<html>
<head>
<title>Hello Sagar Jaybhay</title>
</head>
<body>
</body>
</html>
Most of tags in Html have closing tags but some of don't have closing tags for example img tag.
<img src="" alt="">
Why don't some elements have closing tag because they don't contain any child elements in it.
Code for above example is below
<!DOCTYPE html>
<html>
<head>
<title>Hello Sagar Jaybhay</title>
</head>
<body>
<h2>Hello World</h2>
<p>Hello Guys</p>
<img src="./images/q.jpg" alt="Demo images">
</body>
</html>
CSS
When we want to apply style we can use style tag in html page
<style>
</style>
In above example image is big for that we need to reduce size.
Code for this example is below
<!DOCTYPE html>
<html>
<head>
<title>Hello Sagar Jaybhay</title>
<style>
img
width: 100px;
height: 100px;
</style>
</head>
<body>
<h2>Hello World</h2>
<p>Hello Guys</p>
<img src="./images/q.jpg" alt="Demo images">
</body>
</html>
In this example we create a class with txt name in style tag. This any element with this class found in html it will apply style property inside this class to respective element which contains this class name.
Html Basic
Head Section In Html
It tells browser and search engine about our page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
</html>
In simple words, the computer doesn’t understand characters like A,B,C etc. it understand the numbers there are several different character set like ASCII, UTF-8 in this ASCII only contains some of character it doesn’t support all of characters but for that UTF-8 which support almost all characters.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Viewport means whatever area is visible on screen.By means our html will display good on every device.
<meta name="keyword" content="sagar jaybhay">
It Was used by search engine heavily in previous but right now it don’t have much weightage.
<meta name="description" content="Tutorials By Sagar Jaybhay on Html,Css">
This tag is helpful for display description under search information.
Text
<p></p>
Paragraph tag is used to display text in html. So showing text on a webpage we have heading tags and in this we have 6 head tags.
For search engine perceptive your page should have only one heading tag and do accordingly but many developers thinks as per size of font we use this but it’s not the case.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keyword" content="sagar jaybhay">
<meta name="description" content="Tutorials By Sagar Jaybhay on Html,Css">
</head>
<body>
<h1>Learn From Sagar Jaybhay</h1>
<h2>Html</h2>
<p>Learn Html</p>
<h3>To improve knowledge visit here</h3>
<h3>Code what you learn is key to success</h3>
<h3>Css</h3>
<p>Learn Css</p>
<p>Learning Html From <em>Sagar Jaybhay!</em></p>
</body>
</html>
By seeing the above example you can understand heading tags have hierarchy and by doing this seo bots will better understand your page.
Comments
Post a Comment