HTML Block & Inline
In HTML, elements are divided into two main categories: block-level elements and inline elements. Understanding the difference between these two types is crucial for effectively structuring and styling your web pages.
Block-Level Elements
Block-level elements always start on a new line and take up the full width available (stretch out to the left and right as far as they can). These elements are used to create the structure and layout of a web page.
Common Block-Level Elements
Here is a list of common HTML block-level elements
| Element | Description |
|---|---|
| <div> | Generic container for block-level content |
| <p> | Defines a paragraph |
| <h1> to <h6> | Defines HTML headings |
| <ul> | Unordered list (bulleted) |
| <ol> | Ordered list (numbered) |
| <li> | List item within <ut> or <ol> |
| <header> | Defines a header section |
| <footer> | Defines a footer section |
| <nav> | Defines a navigation section |
| <section> | Defines a section of a document |
| <article> | Defines an independent article |
| <main> | Defines the main content of a document |
| <blockquote> | Defines a block of quoted text |
| <pre> | Defines preformatted text (preserves spaces) |
| <table> | Defines a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <th> | Defines a header cell in a table |
| <form> | Defines a form for user input |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style to add some visual separation */
.block {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div >
<h1>This is a Heading</h1>
<p>This is a paragraph of text. It starts on a new line and takes up the full width available.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<p>This is another block-level element. It can contain other block and inline elements.</p>
<p>This is a nested block-level element.</p>
</div>
</body>
</html>
Output:
In this example:
⦁ <style>: This is an internal CSS style block. It defines styles for the HTML elements within the document.
⦁ div: This is a block-level element used to create divisions or sections within the document. In this example, it’s styled with a border, padding, and margin to add visual separation between the divisions.
⦁ <h1>: This is a heading element, used to define the main heading of a section.
⦁ <p>: This is a paragraph element, used to define paragraphs of text.
⦁ <ul>: This is an unordered list element, used to create a list of items without any specific order.
⦁ <li>: This is a list item element, used to define individual items within a list.
Common Inline Elements
Here is a list of common HTML inline elements
| First Name | Last Name |
|---|---|
| <span> | Generic container for inline content |
| <a> | Defines a hyperlink |
| <img> | Embeds an image |
| <strong> | Embeds an image |
| <em> | Makes text bold |
| <b> | Italicizes text |
| <i> | Makes text bold (without emphasizing it) |
| <u> | Underlines text |
| <br> | inserts a line break |
| <small> | Defines smaller text |
| <mark> | Highlights text |
| <sub> | Subscript text |
| <sup> | Superscript text |
| <del> | Defines deleted text |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style to add some visual separation */
span, a, strong, em {
border: 1px solid black;
padding: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<p>
This is a paragraph of text with <span style=”background-color: yellow;”>inline</span> elements.
You can use inline elements to add emphasis, links, and other small modifications to text.
</p>
<p>
Here is a <a href=”#”>link</a> embedded within a paragraph using the inline element.
</p>
<p>
<strong>Bold</strong> and <em>italic</em> text are examples of inline elements.
</p>
</body>
</html>
Output:
In this example:
⦁ <span>, <a>, <strong>, <em>: These are inline HTML elements. The CSS styling targets these elements to apply border, padding, and margin.
⦁ <p>: This is a paragraph element, used to structure blocks of text.
⦁ <span style=”background-color: yellow;”>: This is a span element with inline styling to change its background color to yellow. Span elements are often used for styling or grouping inline elements.
⦁ <a href=”#”>: This is an anchor (link) element. In this example, it’s just a placeholder link represented by “#”.
⦁ <strong> and <em>: These are inline elements used to apply strong (bold) and emphasized (italic) formatting to text, respectively.
Combining Block and Inline Elements
You can combine block and inline elements to create a well-structured and styled web page.
Example:
<!DOCTYPE html>
<html>
<body>
<div>
<h2>Article Title</h2>
<p>Written by <strong>Author Name</strong> on <em>June 12, 2024</em>.</p>
<p>This is the first paragraph of the article. It contains some <a href=””>important links</a> and <span style=”color: red;”>highlighted text</span>.</p>
<p>This is the second paragraph. It also includes an image:</p>
<img src=”image.jpg” alt=”An example image”>
</div>
</body>
</html>
Output:
In this example:
⦁ <div>: This is a division or section element, used to group content together.
⦁ <h2>Article Title</h2>: This is a heading element, indicating the title of the article.
⦁ <p>: These are paragraph elements, containing text content.
⦁ <strong>Author Name</strong> and <em>June 12, 2024</em>: These are inline elements used for emphasis (bold and italic) within the paragraphs.
⦁ <a href=””>important links</a>: This is an anchor (link) element, which creates a hyperlink to another resource. The href attribute, when empty, creates a link that doesn’t navigate anywhere.
⦁ <span style=”color: red;”>highlighted text</span>: This is a span element with inline styling to change its text color to red.
⦁ <img src=”puppy.jpg” alt=”An example image”>: This is an image element, displaying an image named “puppy.jpg” with an alternate text description “An example image”. The src attribute specifies the image file to display, and the alt attribute provides alternative text for accessibility purposes.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Nested Block Elements
Objective: Understand how block elements can be nested within each other.
Expected Output: A webpage demonstrating nested block elements
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Nested Block Elements</title>
<style>
.outer-block {
border: 1px solid black;
padding: 10px;
margin-bottom: 10px;
}
.inner-block {
background-color:lightblue;
padding: 10px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class=”outer-block”>
<h2>This is an outer div element (block)</h2>
<div class=”inner-block”>
<p>This is an inner div element (block) nested within the outer div.</p>
</div>
</div>
</body>
</html>
Output:
Scenario 2: Inline Elements in Text
Objective: Understand how inline elements behave within text.
Expected Output: A webpage demonstrating inline elements within text.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Inline Elements in Text</title>
<style>
span, em {
background-color:lightgray;
color: red;
padding: 3px;
margin-right: 3px;
}
</style>
</head>
<body>
<p>This is a paragraph containing <span>inline</span> elements <span>within</span> the text.</p>
<p>Another <em>example</em> with emphasized text. </p>
</body>
</html>
Output:
Scenario 3: Styling Inline Elements
Objective: Apply different styles to inline elements.
Expected Output: A webpage demonstrating styled inline elements.
Output:
Scenario 4: Styling Block and Inline Elements
Objective: Apply different styles to block and inline elements.
Expected Output: A webpage demonstrating the styling of both block and inline elements.
Output:
