Hello Pink Pen users and I hope you have a good day. At the beginning of this article, we are going to introduce you to block and inline concepts in HTML. Each  HyperText Markup Language element has two types of block and inline display values, depending on the type of element it has. Also, after that, we will introduce two popular tags in HTML. The first tag is div and the second tag is span. In the following, we will teach you how to work with them.

Block and Inline Elements

HTML Block Elements

Block-level elements are such that they occupy the entire width of a row. You cannot put another element in the line where the Block-level elements are And all the new HTML elements are placed from the new line. You can customize all the attributes of Block-level elements such as width, height, border, etc. with CSS. <div> , <ol>, <p> , <main>, <nav>, <footer>, <section>, <table>, <h1>-<h6>, <header> are one of the most widely used block-level elements in HTML. The following code is a good example of block-level elements.

<h1>Pinkpen programming Tutorials</h1>
<div>Webmasters Home</div>
<h3>Free tutorials and templates</h3>

You can practice more of the above exercise in the free online compiler of our website.

inline Elements

Inline elements do not require a new line and do not occupy the entire width of a line. When adding a new element, we will not go to the new line, and in the same line, the width element will be occupied as much as needed. You can customize all the Html attributes of inline elements such as width, height, border, etc. with CSS. The most famous inline elements in the Html programming language are <a>, <b>, <q>,<span> , <label>, <abbr>, <script>, <textarea>, <time> and etc.

<a href="pinkpen.net">My Web Site</a>
<b>Free tutorials</b>

The div element in Html

<div> Element

The name of the div tag is derived from the word Division. It is generally used to segment the website. In the past, designers used tables such as headers, footers, etc., but today div has replaced it. The div tag is one of the most widely used block-level tags, and the easiest and simplest definition of it is that it is used wherever we want to separate a section or have a new section on our Html website. The div tag makes sense with CSS. I hope the following example will fully acquaint you with this concept.

<div style="background:red; padding: 10px;">
 <h3>webmaster home</h3>

The span element in Html

span element in Html

Among the inline elements, the span tag is the most famous. Specifies this tag to display content, an article, a section, etc. on the website page. This tag normally has no special features and is quite simple, but you can customize it using CSS. In general, to specify, we specify rows with div and distinguish columns with span. This is not a scientific definition and we created it just to get you better.



I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply


Copyright © 2019 pinkpen.net