HTML Elements
HTML Elements or Tags
There are countless HTML elements but we will discuss some of them which are very useful. If we discuss the type of elements then there are two types of HTML elements inline elements and block elements. Inline elements consume space only according to their requirement means the width in which they fit properly but block-level elements consume the whole width of the row.
DOCTYPE element
DOCTYPE HTML element is the first element we place while writing HTML because it tells what the type of your document is and we set it to HTML (!DOCTYPE HTML5).
HTML element
After the doctype element, we define the HTML element.
<html lang="en">
</html>
Head element
The head element holds multiple elements like link, script, title, meta or some other element. It represents the header of our webpage.
meta element
In the head element, we have the meta element which is used for different mobile responsive, SEO, and defining character sets as their attributes come in.
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Link element
The link element is used for attaching the CSS file and for adding fonts from google also when we are using online icons we usually use the link element for attaching our file to the webpage of icons.
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
body element
In the body element whatever we write is part of the webpage. We can insert so many elements inside the body element.
<body>
<h1>This is the body of Webpage</h1>
</body>
h1 to h6 element
Inside the body whenever we have to define a heading we use heading elements starting from h1 to h6 elements having different font sizes and of course, we can customize their sizes according to our needs through CSS.
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>
P element
We use the p element in HTML to define longer text or paragraphs.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, impedit.
</p>
img element
whenever we have to put an image on our webpage we use img element. In img element src attribute define source means where our image is present and alt attribute defines alternate text means if our webpage fails to load and then what else he can show on webpage.
<img src="assets/Icons/btn-pink-bg.svg" alt="button" />
span element
span is an inline element usually used to style or emphasize some piece of text.
<h1>Let's start <span>customing </span>your business</h1>
br element
The br element is used to break line in the webpage.
<h1 class="header-heading">
Simplify All Transactions <br />in One Card </h1>
b or strong element
The b or strong element is used to display bold text on the webpage.
<h2>My name is <b>Usama</b></h2>
<h2>My name is <strong>Usama</strong></h2>
i or em element
The i or em element is used to display italic text on the webpage.
<h2>My name is <i>Usama</i></h2>
<h2>My name is <em>Usama</em></h2>
ul, ol and li element
ul means an unordered list used to display a list in bullets point. ol means ordered list used to display items in order of numbers 1,2,3. li means list items the items present inside the list.
<ul class="unordered-list">
<li>Home</li>
<li>About</li>
</ul>
<ol class="ordered-list">
<li>Home</li>
<li>About</li>
</ol>
Anchor element
the anchor element is used to define links that are clickable on our webpage. The attribute in the anchor element is href which is the short form of hyperlink reference. It defines where we want to navigate on the webpage and if we do not want to navigate we simply put the # symbol in href.
<li><a href="#">Pricing</a></li>
Script element
The script element is used to link javascript files or some framework link bootstrap or tailwindCSS.
<script src = "script.js"> </script>