Block and Inline Elements of HTML

Block and Inline elements

Here are the two unique elements of HTML that are widely used.

  1. Block Elements

Block elements start from a new line and occupy enough space compared to the normal text. The browser automatically recognizes these elements and adds spaces.

Think of a block element as a building block on a page. It always takes up the full width it can, spreading out as far as possible.






Two common types of block elements are:

  • Paragraph <p>: This is for regular text. Each <p> tag starts a new line and goes all the way across the page.
  • Division <div>: This is a more general container. You can use it to group other elements together and style them as a unit.

So, basically, block elements stack vertically on a page and fill the entire width available.

Here is a list of all the Block Elements of HTML:

Block elements of HTML


  2. Inline elements

The elements that take up the required space and don't start with a new line are the Inline Elements.

It only takes the necessary width.

For instance: <span>Inline Element<span> (span element) is an Inline element.





     Here is a list of Inline elements of HTML:

Inline Elements of HTML

                                                                                                                                                                                                          


Comments

Post a Comment

Popular posts from this blog

Basics of HTML- Learn web dev online

Image
Learn Web development online (Beginner's Guide) What is HTML? HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating web pages. HTML describes the structure of a web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.  Basics of HTML language  Learning HTML (HyperText Markup Language) is a great first step into web development. Here’s a guide to the most basic concepts and elements you need to start. 1. Install Vs code editor, customize it according to your will.           2.  learn the basics of HTML           3. Always be practical with learning don't stick with the tutorials only 4. Dont invest too much time in learning HTML, understand the basics and proceed to next language. Dont wait for perfection, this is project b...
Read more

CSS - Introduction

Image
What is CSS? CSS or Style.css is called Cascading Style sheets, a constructive language to style a colorless HTML web page. Mainly, it has three main types: Inline CSS Internal CSS External CSS let's briefly talk about each type in the remaining part of the article. 1. Inline CSS Inline CSS is used to apply a unique style to a single HTML element directly within the element's tag. It's done using the " style" attribute inside an HTML tag. Inline CSS is typically used for small or specific changes. Example: 2. Internal CSS Internal CSS is used when you want to define styles for a single HTML page. The CSS rules are defined within a <style> tag in the <head> section of the HTML document. Internal CSS is ideal when you have a unique style for a specific page. Example: 3. External CSS External CSS is used to apply styles to multiple web pages. The CSS rules are defined in a separate .css file , and this file is linked to the HTML documents. This method...
Read more