HTML Block

By | January 7, 2020

The value of any non-elemental element indicates what type it is. For this, blocks are made in HTML.Example:<div> . <div> block is a level element.

<div>Hello World</div>

Other block level elements:-

<address>,<article>,<aside>,<pre>,<h1>-<h6>,<ul>,<canvas>,<div>,<form>,<nav>,<blockquote>,<dl>,<header>,<ol>,<p>,<figure>,<fieldset>,<figcaption>

Inline Elements:-

Inline elements are elements that we can use in block level element and we can use them as free tags.

<span>This is Inline Element</span>

Other Inline elements:-

<b>,<bdo>,<br>,<img>,<output>,<small>,<samp>,<acronym>,<abbr>,<a>,<time>,<textarea>,<code>,
<sub>,<sup>,<select>,<label>,<button>,<cite>

Let’s read a little more about <div> Element. This is how we can put the content in the <div> element.

<div>
	<h1>This is h1 heading.</h1>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, aspernatur.</p>
</div>

On styling <div> Element.

<style>
	div{
		background: red;
		padding: 10px;
	}
	h1,p{
		color: #fff;
	}
</style>

<div>

	<h1>This is h1 heading.</h1>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, aspernatur.</p>

</div>

Output:-

div

This is how we can use Inline Element.

<style>
	div{
		background: red;
		padding: 10px;
	}
	h1,p{
		color: #fff;
	}
	span{
		background: yellow;
		color: #000;
	}
</style>

<div>

	<h1>This is <span> h1 heading.</span></h1>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, aspernatur.</p>

</div>

Output:-

span
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *