what is div and span in html?
div and span elements are generic HTML elements and have no specific function. They are mostly used to segment content on a site. In this article, we will learn how to use it in detail.
what is the difference between span and div?
The div element is used to design content at the block level, while span is used to design embedded content. For more, read the following sections.
what is div in html?
The div element is a block element. The div element is used to organize content at the block level. It may include a single div element to hold all the elements on the body element, or you can use a div element to hold specific content of elements.
For example:
<body>
<div>
<div>
<h1>Title</h1>
<p>Content</p>
</div>
<div>
<h1>Title</h1>
<p>Content</p>
</div>
<div>
<h1>Title</h1>
<p>Content</p>
</div>
</div>
</body>what is span in html?
The span element is an inline element. The span element is used to organize and format embedded content.
An illustrative example:
<body>
<div>
<h1>Title</h1>
<span>Author</span> <span>Published date</span>
<p>
Page Content Then <span>The content we want to format</span>Complete the content
</p>
</div>
</body>note:
If the thing you want to do is available in one of the HTML elements, do not use span.
If you want to make the font bold, use the b element instead of using span and giving the formatting.
How to use div with span in HTML?
<body>
<div>
<div>
<h1>Title</h1>
<span>Author</span> <span>Published date</span>
<p>
Page Content Then <span>The content we want to format</span>Complete the content
</p>
</div>
<div>
<h1>Title</h1>
<span>Author</span> <span>Published date</span>
<p>
Page Content Then <span>The content we want to format</span>Complete the content
</p>
</div>
<div>
<h1>Title</h1>
<span>Author</span> <span>Published date</span>
<p>
Page Content Then <span>The content we want to format</span>Complete the content
</p>
</div>
</div>
</body>
Note: English is not my official language. Mostly I use Google Translate. Therefore, if you encounter a problem or find some errors, you can inform me of the error on the contact us page or comments, or go to Mozilla developer website to understand the lesson well, div tag, span tag.
Here we have finished. We will see you in the next lesson
Thank you for reading the article and do not forget to share it with friends