Elements are something with the help of which we can create our webpages, Element's is a collection of an opening tag, closing tag, and some content written inside it.

The Root Element

HTML

HTML is the root element where we can write every tag as well as elements to design a webpage, let's see how does it look like

<!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>

<!DOCTYPE html>
This tells the browser that this is an HTML document

<html lang="en">
</html>
This is the root tag which consists of two main tags
1. head tag
2. body tag

here the "lang" points to the language of the entire document, here we can specify our language, HTML not only support the English language but also support other languages like [fr for French], [es for spanish], if you want to know what are the other languages the HTML support then you can follow the below link.

https://www.w3schools.com/tags/ref_language_codes.asp

DOCUMENT METADATA

head	title
link	meta
style

Head:

The head contains the metadata it contains all the information about the document or we can say some extra information about the document. if we want to add some descriptions and add external stylesheets such as a CDN link from bootstrap or tailwind CSS, everything goes inside the head tag.

let's discuss what metadata is all about, so metadata means some extra information regarding the document. if we are creating a webpage let's say any website and we want to add some description that will help your website to be a search friendly then we can do it inside the head tag by writing inside the meta tag for example:

<meta name="description" content="A description of the page">

meta name="viewport" content="width=device-width, initial-scale=1.0">
This will be helpful while making the page responsive and mobile-friendly.

Title:

The Title defines the title of the document, it should be short and unique. it is not case-sensitive, we can write it in uppercase, and still, it will display the title. but we should write in lowercase only it's a good coding practice

<!DOCTYPE html>
<html lang="en">
    <title>HTML|Title</title>
</html>

Link:

The link element is used to establish a connection between the current document and external resources for example we use external CSS files, and an external file related to font awesome and many more things

external CSS file
external CDN link file for bootstrap
extenal CDN link for font-awesome

This is how we are establishing the connection by adding some files to it and that too I have done it inside the head tag because this is the place where actually we add those files, But this is not the only files we can add, we can add multiple files according to our project requirement.

Meta:

I have already discussed the meta tag inside the head tag, but still, let me do it once again, The meta tag is where we want to add some extra information about our document or our project.

The meta tags are usually the self-closing tags and they are not holding any content inside it


<!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">
  <meta name="keywords" 
        content ='Python, Django, HTML CSS'>
  <meta name = "description" 
        content=" This webpage is designed by Tech Dream Team">
  <meta http-equiv="refresh" content="10">



  <title>HTML|Title</title>
</head>
<body>

</body>
</html>

<meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
I have used this one for Responsivenes and mobile friendly

<meta name="keywords" content ='Python, Django, HTML CSS'>
I have used some keywords for example which languages I have used in my projects I can specify it here by adding some keywords.

<meta name = "description" 
        content=" This webpage is designed by Tech Dream Team">

this will be helpful in providing some short descriptions.

 <meta http-equiv="refresh" content="10">

This meta tag will refresh our page in every 10 secs.

Block Level Elements And Inline Elements

Block Level Elements:

The Block Level Elements take the entire space and the entire width of the page. It comes one after another vertically. The block-level elements have its margin and padding. The block-level elements always start with a new line

h1-h6	<p>	<div>
<fom>	<heade>	<footer>
<ul>	<li>	<ol>
<li>	<main>	<pre>
<section>	<table>	<nav>

https://codepen.io/DeepakKumarDKN/pen/GRBvGYQ

Inline Elements:

The Inline Elements will come in one line horizontally, The inline elements always take the space according to their content. It doesn't need an extra line we can write multiple inline elements in one single line

<a>	<audio>	<video>
<b>	<bdo>	<br>
<button>	<cite>	<em>
<iframe>	<img>	<input>
<label>	<span>	<strong>
<span>	<sub>	<sup>
<textarea>

https://codepen.io/DeepakKumarDKN/pen/poZrKGX

Note : Look at both the codepen files for Block-Level and Inline. both are having the same content but at Block-Level , it is displayed one after another vertically but in Inline it is displayed in one line horizontally

HTML Elements

Table of contents