HTML Elements InLine and Block Element.

HTML Elements 🎯

HTML elements are used to define the structure and content of a web page.

There are two main types of HTML elements:

1. Block Elements
2. Inline Elements

Block elements:

<div>
<h1>-<h6>
<p>
<ul>, <ol>, <li>
<form>
<table>

Block elements typically appear on a new line and take up the full width available (like paragraphs).

Block Elements:

Block elements are HTML elements that typically appear on a new line and take up the full width available. They are used to create major structural components of a webpage. Here are some commonly used block elements along with explanations and example code:

1. <div>:
   The <div> element is a generic block-level container used to group other elements together. It is often used for layout purposes or to create logical sections on a webpage. Example:

<div> <h2>Welcome to Our Website</h2> <p>This is a paragraph inside a div container.</p> </div>

<div>
<h2>Welcome to Our Website</h2>
<p>
This is a paragraph inside a div container.
</p>
</div>

2. <h1> to <h6>:
   These elements represent headings of different levels, with <h1> being the highest level and <h6> the lowest. They are used to define the hierarchy of content and aid in SEO and accessibility. Example:

<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Sub-subheading</h3>

3. <p>:
   The <p> element represents a paragraph of text. It is commonly used to group text content into distinct paragraphs. Example:

<p>This is a paragraph of text.</p> <p>Another paragraph goes here.</p>

4. <ul>, <ol>, <li>:
   These elements are used to create unordered lists (<ul>), ordered lists (<ol>), and their list items (<li>). Example:

<ul> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 

<ol> 
   <li>First item</li> 
   <li>Second item</li> 
   <li>Third item</li> 
</ol>

5. <form>:
   The <form> element is used to create interactive forms on a webpage, allowing users to input data and submit it to a server for processing. Example:

<form action="/submit" method="post"> 
   <!-- form fields go here --> 
   <input type="text" name="username" placeholder="Enter your username">   
   <input type="password" name="password" placeholder="Enter your password"> 
   <button type="submit">Submit</button> 
</form>

6. <table>:
   The <table> element is used to create tabular data, with rows represented by <tr> (table row), headers by <th> (table header), and data cells by <td> (table data). Example:

<table> 
<tr>      <th>Name</th> <th>Age</th> </tr>
<tr> <td>John</td><td>30</td> </tr> 

<tr>   <td>Jane</td>
 <td>25</td>
</tr> 
</table>

Inline Elements:

Inline elements are HTML elements that do not start on a new line and only take up as much width as needed. They are used for styling and formatting text within a block-level element. Here are some commonly used inline elements with explanations and example code:

1. <a>:
   The <a> element is used to create hyperlinks. It allows users to navigate to other web pages or resources by clicking the link. Example:

<p>Visit our <a href="https://www.example.com">website</a> for more information.</p>

2. <b> and <i>:
   The <b> element is used to apply bold formatting to text, while the <i> element is used to apply italic formatting. Example:

<p>This is <b>bold</b> text and <i>italic</i> text.</p>

3. <img>:
   The <img> element is used to embed images into a webpage. It does not require a closing tag and includes a src attribute to specify the image URL. Example:

<img src="image.jpg" alt="A beautiful landscape">

4. <span>:
   The <span> element is a generic inline container that is often used to apply styles to a specific portion of text within a larger block-level element. Example:

<p>My favorite color is <span style="color: blue;">blue</span>.</p>

Remember that some elements can be both block and inline depending on the context in which they are used. Understanding the distinction between block and inline elements is crucial for creating well-structured HTML documents and effectively styling web pages with CSS.

Inline elements:

<a>
<b>
<i>
<img>
<span>

Inline elements only take up as much width as needed (like images or links).

They flow within the text.

Some elements can be either block or inline, depending on how they’re used.

It’s important to understand the difference and use elements properly

To create a well-structured HTML document and properly style your web pages with CSS.

About The Author

Dr. Zeeshan Bhatti

See author's posts