Block and Inline Elements in HTML


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>

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad