What is Block Element in HTML?
- Block elements take the full width of the browser window.
- And block elements always start with new lines.
Elements:
i). article:
<article>...</article>
ii). aside:
<aside>...</aside>
iii). div:
<div>...</div>
iv). form:
<form action="">...</form>
v). h1 to h6:
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
vi). header:
<header>...</header>
vii). hr:
<hr>
viii). li:
<li>...</li>
ix). main:
<main>...</main>
x). nav:
<nav>...</nav>
xi). ol:
<ol>...</ol>
xii). p:
<p>...</p>
xiii). section:
<section>...</section>
xiv). table:
<table>...</table>
xv). ul:
<ul>...</ul>
xvi). video:
<video controls>...</video>
xvii). footer:
<footer>...</footer>
xviii). pre:
<pre>...</pre>
What is Inline Element in HTML?
- Inline elements take the width which is necessary for the element.
- Inline elements don't start with new lines.
Inline Elements:
i). a:
<a href="#">...</a>
ii). abbr:
<abbr title="I am Freelance web developer">...</abbr>
iii). b:
<b>...</b>
iv). br:
<br>
v). cite:
<cite>...</cite>
vi). code:
<code>...</code>
vii). em:
<em>...</em>
viii). i:
<i>...</i>
ix). img:
<img src="#" alt="">
x). input:
<input type="text">
xi). kbd:
<kbd>...</kbd>
xii). small:
<small>...<small>
xiii). span:
<span>...</span>
xiv). strong:
<strong>...</strong>
xv). sub:
<sub>...</sub>
xvi). sup:
<sup>...</sup>
xvii). textarea:
<textarea name="myText" id="myText" cols="30" rows="10">...</textarea>
xviii). time:
<time>...</time>
Code Described in the video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Block Elements and Inline Elements in HTML </title>
</head>
<body>
<!-- Block Elements -->
<h1> This is a heading </h1>
<h1> This is a heading </h1>
<div> This is a div tag</div>
<div> This is another div tag</div>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<!-- Inline Elements -->
<span> This is span </span>
<span> This is another span </span>
<a href="https://google.com">Go to Google</a>
<a href="https://geekshelp.org">Go to Geeks Help </a>
<!-- Quiz -->
<!--
i) img -- Block or Inline
ii) li -- Block or Inline
iii) section -- Block or Inline
-->
</body>
</html>
