Hello Friends ………… !
Welcome to our website https://skilltut.blogspot.com in which we are providing various 'tutorials' with the best of our knowldge. In the Previous Tutorial we have learned about 'attributes'' of html & methods of using the same. Today in this Post we will be learning html 'block' and 'inline' elements and the method of using the same.
Introduction
HTML 'block' and 'inline' elements are fundamental building blocks used to structure content on web pages. Understanding the differences between these two types of elements is crucial for effective web development and layout design. This comprehensive guide covers the attributes, usage, and practical examples of HTML block and inline elements.
What are HTML Block Elements?
HTML 'block' elements are elements that occupy the full width of their container and always start on a new line. They are typically used to structure the main parts of a web page.
Example :
html 🈁 
<html>
<body>
<p style="background-color: aquamarine;">This is a block element that occupies the entire width.</p>
</html>
</body>
output 📌
This is a block element that occupies the entire width.
The HTML 'paragraph' tag in the aforementioned example serves to establish a block-level element.
Try It....🆓You are invited to explore our user friendly simple code editor and executor by clicking on the ' 👉 Try It Button ' to access the above code. Subsequently, you can do experiment by the changing the value of the aforementioned HTML codes and observing the corresponding output of the same.
Common HTML Block Elements
Here are some common HTML 'block' elements:
<div> :
Used to group and style content.
Syntax ✍️
<div class="container">Content goes here</div>
<p> :
Defines a paragraph.
Syntax ✍️
<p>This is a paragraph.</p>
<h1> to <h6> :
Define headings.
Syntax ✍️
<h1>Main Heading</h1>
<h2>Subheading</h2>
<ul> and <ol> :
Define unordered and ordered lists.
Syntax ✍️
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<blockquote> :
Defines a block of quoted text.
Syntax ✍️
<blockquote>Quoted text goes here</blockquote>
<section> :
Defines a section in a document.
Syntax ✍️
<span class="highlight">Highlighted text</span><section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
What are HTML Inline Elements?
HTML 'inline' elements are elements that occupy only as much width as necessary and do not start on a new line. They are typically used to style or format small parts of a web page.
Example :
html 🈁
<html>
<body>
<label style="background-color: yellow;">This is an Example of Inline Element - which occupies necessary width </label>
</html>
</body>
output 📌
The HTML 'lable' tag in the aforementioned example serves to establish a inline element.
Try It....🆓You are invited to explore our user friendly simple code editor and executor by clicking on the ' 👉 Try It Button ' to access the above code. Subsequently, you can do experiment by the changing the value of the aforementioned HTML codes and observing the corresponding output of the same.
Common HTML Inline Elements
Here are some common HTML 'inline' elements:
<span> :
Used to style a part of the text.
Syntax ✍️
<span class="highlight">Highlighted text</span>
<a> :
Defines a hyperlink.
Syntax ✍️
<a href="https://www.example.com">Visit Example</a>
<img> :
Embeds an image.
Syntax ✍️
<img src="image.jpg" alt="Description of image">
<strong> and <em> :
Define strong (bold) and emphasized (italic) text.
Syntax ✍️
<strong>Bold text</strong>\n<em>Italic text</em>
<br> :
Inserts a line break.
Syntax ✍️
Text before line break.<br>Text after line break.
<input> :
Defines an input field.
Syntax ✍️
<input type="text" placeholder="Enter text here">
Example Usage of HTML Block and Inline Elements
Here's an example of how to use HTML block and inline elements in a web page:
html 🈁
<html>
<body>
<head>
<style>
.container {
width: 100%;
padding: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
font-family: Arial, sans-serif;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Understanding HTML Block and Inline Elements</h1>
<section class="container">
<h2>Block Elements</h2>
<p>HTML block elements start on a new line and take up the full width available.</p>
<ul>
<li>Example of block elements:</li>
<li><div>div</div></li>
<li><p>p</p></li>
<li><h1>to<h6></h1></li>
</ul>
</section>
<section class="container">
<h2>Inline Elements</h2>
<p>HTML inline elements do not start on a new line and only take up as much width as necessary. For example: <span class="highlight">highlighted text</span>, <a href="#">link</a>, <img src="image.jpg" alt="Example Image"></p>
</section>
</html>
</body>
output 📌
Try It....🆓
You are invited to explore our user friendly simple code editor and executor by clicking on the ' 👉 Try It Button ' to access the above code. Subsequently, you can do experiment by the changing the value of the aforementioned HTML codes and observing the corresponding output of the same.
Styling HTML Block and Inline Elements with CSS
You can style HTML block and inline elements using CSS to achieve the desired appearance. The example above demonstrates how to customize the appearance of block and inline elements using CSS.
Best Practices for Using HTML Block and Inline Elements
- Semantic Structure: Use 'block' elements for main content structure and 'inline' elements for styling smaller parts of the text.
- CSS for Styling: Use CSS to style 'block' and 'inline' elements consistently across your website.
- Accessibility: Ensure that 'block' and 'inline' elements are accessible and provide a good user experience.
Conclusion
HTML 'block' and 'inline' elements are fundamental tools for structuring and styling content on your web pages. By understanding and utilizing all their attributes, you can create well-organized, accessible, and visually appealing web pages. Keep experimenting with different block and inline elements and styles to enhance your web development skills.
Thank you for taking your time 🕟 to read 📘 our above post 🏤 and we appreciate 🙏 for the same. We sincerely hope 🙏 that you have found the same satisfactorily and we 👩👩👦👦 warmly welcome you to visit our website 🌐 again in the near future 📡 soon.
─── ⋆⋅☆⋅⋆ ───
No comments: