HTML Block & Inline Elements

Block Elements

HTML block elements create the structure of the webpage. They typically start on a new line and take the full width of the container. They are:

<h1>-<h6>, <p>, <div>, <address>, <dl>, <dt>, <dd>, <forms>, <hr>, <ol>, <ul>, <li>, <main>, <nav>, <pre>, <table>, <thead>, <tbody>, <tfoot>, <section>, <viedo>, <aside>, <article>, <figcaption>, <fieldset>, <figure>, <footer>, <header> and more.

Inline Elements

Inline elements are used within block-level elements to style the format of the content. They typically don't start on a new line but take up only as much width as necessary. They are:

<br>, <button>, <a>, <abbr>, <b>, <code>, <em>, <i>, <script>, <q>, <select>, <option>, <small>, <big>, <span>, <strong>, <sub>, <sup>, <img>, <textarea>, <input>, <label>, and more.

Now let's talk about block elements one by one and their syntax.

<h1>-<h6>: The h1 to h6 tags define the HTML headings on the webpage. h1 is the most important heading, and h6 is the least important heading on the webpage.

<body>
  <h1>This is heading</h1>
  <h2>This is heading</h2>
  <h3>This is heading</h3>
  <h4>This is heading</h4>
  <h5>This is heading</h5>
  <h6>This is heading</h6>
</body>

p: The <p> tag is used to define a paragraph on the webpage. It always starts on a new line and divides the content into a manageable and readable manner.

<p>This is paragraph</p>

<div>: The <div> is used to define a section or division of the HTML document. It is used as a container for all HTML elements, which can be styled and manipulated with CSS and JavaScript using class and id attributes.

<div>
  <h1>This is lorem</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
    ratione?
  </p>
</div>
<div>
  <h1>This is another lorem</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, et
    excepturi consequuntur cupiditate praesentium eius in modi ea sit
    ducimus!
  </p>
</div>

<address>: The address tag is used to write contact information of the author or owner of the article. Usually, this text will be written in italic, and we use the break tag to display it line by line. Contact information may include an email ID, URL, phone number, physical address, social media, and more.

<address>
  Written by sriparthu <br>
  Visite us in HYD <br>
  Near bc, pp, rn <br>
  TS
</address>

<dl>, <dt>, <dd>: These tags are used to describe each term. The dl tag is used to define the description list. Inside the dl tag, we use the dt tag to describe the term/name, and inside the dt tag, we use the dd tag to describe the description of the term/name. We will learn more about this in detail soon.

<dl>
  <dt>Lorem10:</dt>
  <dd>
    -Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto,
    explicabo?
  </dd>
  <dt>Lorem20:</dt>
  <dd>
    -Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas pariatur
    esse facilis. Et ullam hic, suscipit explicabo repudiandae dicta odio.
  </dd>
  <dt>Lorem30:</dt>
  <dd>
    -Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
    voluptate hic et. Quas magni earum ullam accusantium in omnis optio
    placeat, deserunt sed tempora rem labore, esse quibusdam necessitatibus
    eos.
  </dd>
  </dl>

<forms>: The form tag is used to create a form on the webpage that allows user input and sends it to the server for processing. The form tag serves as the container for various input elements such as textarea, radio, checkbox, tel, number, and more to interact with the client server. We will learn more about this in detail soon.

<form>
  <label for="fname">FirstName:</label>
  <input type="text" /> <br />
  <br />
  <label for="lname">LastName:</label>
  <input type="text" /> <br />
  <br />
  <label for="password">Password:</label>
  <input type="password" /> <br />
  <br />
  <button>Submit!</button>
</form>

<hr>: The <hr> tag is used to create a horizontal line on the webpage. It separates the content in the HTML page.

<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui animi unde
  saepe! A provident illum amet. Perspiciatis sint molestias blanditiis?
</p>
<hr />
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. In cumque fuga
  libero nesciunt sapiente delectus numquam voluptate facere commodi, beatae
  qui architecto. Non, accusamus iure? Deserunt nemo repudiandae ipsa
  voluptate!
</p>
<hr />
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ipsam
  obcaecati fuga tenetur, reprehenderit dicta aliquid, esse sunt cumque quo
  fugiat, eius eligendi! Reprehenderit rerum odit aperiam voluptate
  molestiae voluptas soluta, blanditiis earum? Dicta aut reiciendis dolore
  velit. Nam nostrum blanditiis maxime itaque ad veritatis enim libero
  nesciunt recusandae iusto?
</p>

<ol>, <ul>, <li>: The ol tag is used to define an ordered list. By default, it displays the items in numerical order.
- The ul tag is used to define the unordered list. By default, it displays the items in a bullet list.
- This li tag is used as the list item for both ol and ul tags.
We will learn more about this in detail soon.

<h1>Order list</h1>
<ol>
  <li>Milk</li>
  <li>Coffee</li>
  <li>Tea</li>
</ol>
<h1>Unorder list</h1>
<ol>
  <li>Rose</li>
  <li>Sunfolwer</li>
  <li>Lilli</li>
</ol>

<nav>:The nav tag is used to define navigation links.

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Project</a>
  <a href="#">Skills</a>
  <a href="#">Contact me</a>
</nav>

<pre>: This is another way to write a paragraph, called the pre-formatted tag, enclosed with the <pre> tag. It takes its original space and line breaks exactly as written in the code. We will learn more about this in detail soon.

<pre>
This is 
      pre-formated      tag
      also called as              paragrapg tag.
    </pre>

<table>, <thead>, <tbody>, <tfoot>:The table tag is used to create a table on the webpage. It consists of one or more elements such as tr, th, and td. We will learn more about this in detail soon.

<head>
<style>
  table, tr, td, th{
    border: 1px solid;
  }
</style>
</head>
<!--Table tag start-->
<body>
<table>
  <tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
</body>

<fieldset>:The fieldset is used to group related elements in a form. It draws a box around the form elements. Additionally, we use <legend> tag to define the title for the form elements. We will learn more about this in detail soon.

<fieldset>
<legend>Login form</legend>
<form>
  <label for="fname">FirstName:</label>
  <input type="text" /> <br />
  <br />
  <label for="lname">LastName:</label>
  <input type="text" /> <br />
  <br />
  <label for="password">Password:</label>
  <input type="password" /> <br />
  <br />
  <button>Submit!</button>
</form>
</fieldset>

<footer>: The footer defines the footer of a document or section. It can include information such as contact details, site map, back to top links, copyright, etc. We will learn more about this in detail soon.

<footer>
      <p><strong>Author: Yourname</strong></p>
      <p><a href="mailto: sriparthu@gmail.com">Contact me</a></p>
    </footer>

Now let's talk about Inline elements one by one and their syntax.

<br>: The br break tag is used to create a line break in the text, causing the content to appear on a new line.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />Ipsam
  sapiente incidunt velit eos ipsa tenetur. <br />Harum qui quidem hic optio
  voluptate nisi officia ipsum odit repudiandae doloribus sequi, laborum
  sunt? <br />Animi corrupti molestias inventore omnis voluptate tenetur
  suscipit, <br />magni iure ea, ab obcaecati? <br />Voluptatum beatae
  perspiciatis deleniti odio quam laborum?
</p>

<button>: The button tag is used to create a clickable button on the webpage. It is used to create a submit form and trigger a JavaScript function.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />Ipsam
  sapiente incidunt velit eos ipsa tenetur. <br />Harum qui quidem hic optio
  voluptate nisi officia ipsum odit repudiandae doloribus sequi, laborum
  sunt? <br />Animi corrupti molestias inventore omnis voluptate tenetur
  suscipit, <br />magni iure ea, ab obcaecati? <br />Voluptatum beatae
  perspiciatis deleniti odio quam laborum?
</p>
<button>ClickMe!</button>

<a>: This <a> tag is known as an anchor tag. It is used to create a link from one page to another. For more details, you can refer to this Blog.

<a href="https://www.google.com/">ClickMe!</a>

<abbr>: This abbr tag defines the abbreviation or full form of words like HTML, CSS, JS, Mr, WHO, and more.

<p>This is <abbr title="Hyper Text Markup Language">HTML</abbr></p>
<p>This is <abbr title="World Health Organization">WHO</abbr></p>

<b>, <strong>: Both of these tags are used to make the text bold. For more details, you can refer to this Blog.

<p>This is <b>paragraph1</b></p>
<p>This is another <strong>paragraph2</strong></p>

<i>, <em>: Both of these tags are used to make the text italic or emphasize. For more details, you can refer to this Blog.

<p>This is <i>paragraph1</i></p>
<p>This is another <em>paragraph2</em></p>

<code>: This <code> tag is used to define a piece of computer code. By default, it will display in a monospace font.

<code>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ab iure quis
  voluptatum libero alias, blanditiis labore, quo tempore culpa sapiente
  autem magnam aliquam quos voluptatibus voluptas ipsum in at repellat
  incidunt error temporibus eum quia vel. Atque, veniam ut alias ipsum
  repudiandae voluptatibus doloremque, voluptatem dolor iure officia maiores
  nulla aliquid excepturi sit optio dolorum possimus quaerat similique.
  Magni cumque ea architecto vel obcaecati reiciendis eum, facilis incidunt,
  quae voluptatum enim minus, non at itaque labore ut dignissimos nulla
  culpa pariatur nemo quibusdam porro commodi voluptates exercitationem?
  Iste delectus sequi quod aut nulla iure dicta? Neque dolores consequuntur
  numquam.
</code>

<q>: This <q> tag is used to define a short quotation.

<p>
  <q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ab iure
   quis voluptatum libero alias, blanditiis labore, quo tempore culpa
   sapiente autem magnam aliquam quos</q>
   voluptatibus voluptas ipsum in at repellat incidunt error temporibus eum
   quia vel.
   <q>Atque, veniam ut alias ipsum repudiandae voluptatibus doloremque,
    voluptatem dolor iure officia maiores nulla aliquid excepturi sit optio
    dolorum possimus quaerat similique.</q>
    Magni cumque ea architecto vel obcaecati reiciendis eum, facilis incidunt,
    quae voluptatum enim minus, non at itaque labore ut dignissimos nulla
    culpa pariatur nemo quibusdam porro commodi voluptates exercitationem?
   <q>Iste delectus sequi quod aut nulla iure dicta? Neque dolores
   consequuntur numquam.</q>
</p>

<section>, <option>: The <section> element is used to create the drop-down list, and it is the most important element in the form element. It has another element called <option>, which is used to display the selected item list for your choice.

<select name="list" id="car">
  <option value="">--Select--</option>
  <option value="alto">Alto</option>
  <option value="bmw">BMW</option>
  <option value="tata">TATA</option>
  <option value="jeep">Jeep</option>
  <option value="Honda">Honda</option>
</select>

<span>: The <span> tag is used to mark up a part of text or a part of a document by styling with CSS and manipulating with JS.

<p>This is <span style="color: tomato;">paragraph</span></p>

<sub>, <sup>: The <sub> tag is used to subscript text; it will display half below the line, and the <sup> tag is used to superscript text; it will display half above the line.

<p>This is <sub>subscript</sub></p>
<p>This is <sup>superscript</sup></p>

Note: There are many block and inline elements to learn and show. Here, I used the more important block and inline elements.

Happy Learning

Thanks For Reading! :)

-SriParthu💝💥

HTML Block and Inline Elements

Table of contents

Block Elements

Inline Elements

Now let's talk about block elements one by one and their syntax.

Now let's talk about Inline elements one by one and their syntax.