Block Elements: These create big, separate sections on a webpage, like paragraphs or headings.
Inline Elements: These are used for small things inside the big sections, like links or making text bold.
Example: To make a word bold and add a link in a paragraph:
<!DOCTYPE html>
<html>
<body>
<div>GeeksforGeeks</div>
Checkout the GeeksforGeeks
<a href=”https://www.geeksforgeeks.org/”
alt=”GeeksforGeeks”>
official</a> website for the articles on various courses.
</body>
</html>
In the example above, we used the `<div>` tag, which acts like a building block. It starts on a new line and stretches to use all the available width on the page.
On the other hand, we also used the `<a>` tag, which is an inline element. This tag is great for creating links within your text. Unlike the `<div>`, inline elements don’t force a new line; they only take up as much space as they need.
Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can i.e, it occupies the whole horizontal space of its parent element & the height is equal to the content’s height.
Supported tags:
HTML <address> Tag
HTML <blockquote> Tag
HTML <dd> Tag
HTML <Div> Tag
HTML <dl> Tag
HTML <dt> Tag
HTML <canvas> Tag
HTML <form> Tag
HTML <Heading> Tag
HTML <hr> Tag
HTML <li> Tag
HTML <main> Tag
HTML <nav> Tag
HTML <noscript> Tag
HTML <ol> Tag
HTML <pre> Tag
HTML <section> Tag
HTML <tfoot> Tag
HTML <ul> Tag
HTML Tables
HTML Paragraphs
HTML5 <Video> Tag
HTML5 <aside> Tag
HTML5 <article> Tag
HTML5 <figcaption> Tag
HTML5 <fieldset> Tag
HTML5 <figure> Tag
HTML5 <footer> Tag
HTML 5 <header> Tag
span element: The <span> tag is used as a container for text. It has no required attributes. Style, class, and id are the commonly used attributes.
Syntax:
<span>GFG</span>
Example: Below code illustrates the implementation of <span> tag.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<!– Span element. –>
<h1>Geeks
<span style=”color: red”> for</span>
Geeks
</h1>
</body>
</html>
Not a member yet? Register now
Are you a member? Login now