Inline and Block Elements part 1

HTML Fundamentals
HTML Basics
Inline and Block Elements
84
1/2
     

Types of Elements



In HTML, most elements are defined as block level or inline elements.
Block level elements start from a new line. 
For example: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.

Inline elements are normally displayed without line breaks. 
For example: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.

The <div> element is a block-level element that is often used as a container for other HTML elements.
When used together with some CSS styling, the <div> element can be used to style blocks of content:
<html>
<body>
<h1>Headline</h1>
<div style="background-color:green; color:white; padding:20px;">
<p>Some paragraph text goes here.</p>
<p>Another paragraph goes here.</p>
</div>
</body>
</html>Try It Yourself


Similarly, the <span> element is an inline element that is often used as a container for some text.
When used together with CSS, the <span> element can be used to style parts of the text:
<html>
<body>
<h2>Some
<span style="color:red">Important</span> Message</h2>
</body>
</html>Try It Yourself


Summary
The <div> element defines a block-levelsection in a document.
The <span> element defines an inline section in a document.

Comments

Post a Comment