In HTML, elements are categorized as either inline elements or block-level elements. The main difference between these two types of elements is how they are displayed on the page and how they interact with other elements.
Block-level elements take up the entire width of their parent element and are displayed on a new line. They are used to create larger sections of content, such as paragraphs, headings, and lists. Block-level elements can contain other block-level elements as well as inline elements.
Inline elements, on the other hand, are displayed inline with the surrounding text and only take up as much width as necessary. They are used to apply formatting to specific pieces of content, such as bold or italic text, links, and images. Inline elements cannot contain other block-level elements, but they can contain other inline elements.
Here is a list of some of the most common block-level and inline elements in HTML:
Block-level elements:
- <div>
- <h1> to <h6>
- <p>
- <ul> and <ol>
- <li>
- <table>
- <form>
- <header>
- <footer>
- <nav>
- <article>
- <section>
Inline elements:
- <a>
- <strong> and <b>
- <em> and <i>
- <u>
- <s> and <strike>
- <img>
- <span>
- <input>
- <label>
- <button>
- <select>
- <textarea>
Other elements:
In HTML, several elements can be used as both inline and block elements, depending on their specific use case. Here are some examples of such elements:
-
<applet>: This element is used to embed a Java applet into an HTML document. It can be used as either an inline or a block-level element, depending on where it is placed in the document.
The <applet> element is a now-obsolete HTML tag that was used to embed Java applets into web pages. Java applets were small programs that ran within a user's web browser, providing interactive content such as games, simulations, and multimedia presentations. The <applet> element was widely used in the late 1990s and early 2000s, but has since been deprecated due to security concerns and the rise of alternative web technologies such as JavaScript and HTML5.
To use the <applet> element, web developers would typically create a Java applet using a Java development tool such as Eclipse or NetBeans. The applet would then be packaged as a Java archive (JAR) file, which could be referenced in the HTML code using the <applet> element. The <applet> element supported several attributes, including:
code: the name of the main class file within the JAR file
width: the width of the applet in pixels
height: the height of the applet in pixels
archive: the name of the JAR file containing the applet
align: the horizontal alignment of the applet within the page
Despite its obsolescence, some legacy systems and older web pages may still use the <applet> element. However, modern web development best practices generally recommend using alternative technologies such as JavaScript, HTML5, and CSS to achieve similar interactive effects, without the security risks associated with Java applets. -
<script>: This element is used to define client-side JavaScript code in an HTML document. It can be used as either an inline or a block-level element, depending on the context in which it is used.
To use the <script> element, web developers typically include it within the <head> section of an HTML document. The src attribute can be used to reference an external script file, or the script can be included directly within the <script> element using a code block. For example:
The <script> element is an essential HTML tag that is used to embed scripts within an HTML document. Scripts are typically written in JavaScript, although other programming languages such as Python, Ruby, and Perl can also be used. The <script> element allows developers to create dynamic and interactive web pages by executing client-side scripts in a user's web browser.
or<head> <script src="path/to/script.js"></script> </head><head> <script> //Javascript codes here... </script> </head>The <script> element can also include several attributes that control its behavior and interactions with the rest of the page, including:
async: indicates that the script should be executed asynchronously, without blocking other page elements
defer: indicates that the script should be deferred until after the page has loaded, allowing other page elements to load first.
type: specifies the MIME type of the script content
Some of the common uses of the <script> element include:
1. Manipulating HTML elements: Scripts can be used to manipulate HTML elements on the page, such as changing the content, styling, and structure of the page.
2. Validating form data: Scripts can be used to validate user input within HTML forms, checking that input fields contain valid data before submitting the form.
3. Handling events: Scripts can be used to handle user interactions with the page, such as mouse clicks, keystrokes, and form submissions.
4. Loading external resources: Scripts can be used to load external resources such as images, stylesheets, and other scripts, allowing web pages to be more dynamic and interactive.
-
<ins>: This element is used to mark up inserted text in an HTML document. It can be used as either an inline or a block-level element, depending on the context in which it is used.
The <ins> element is an HTML tag used to represent inserted text or content within a document. It is typically used in combination with the <del> element to display changes made to a document. The <ins> element is a inline-level element and can be used with other inline-level elements within the text of a document.
The <ins> element can be styled with CSS to indicate the nature of the inserted content. By default, inserted content is underlined and displayed in green. However, it can be customized to fit the visual style of the document.
Here's an example of using the <ins> element to indicate an addition to a paragraph:<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent auctor ante eu dolor scelerisque, <ins>sed eleifend nibh convallis</ins>. In et ligula eu velit semper rhoncus at id sapien. </p>In this example, the words "sed eleifend nibh convallis" are indicated as newly added text within the paragraph.
Some common use cases for the <ins> element include:
Indicating added content: As shown in the example above, the <ins> element is commonly used to indicate new or added content to a document.
Document revisions: In a collaborative document editing environment, the <ins> element can be used to show the changes made to the document and highlight new additions.
Document versioning: The <ins> element can also be used to highlight differences between different versions of a document, indicating new or changed content in each version.
-
<map>: This element is used to define an image map in an HTML document. It can be used as either an inline or a block-level element, depending on the size and position of the map on the page.
The <map> element is an HTML tag used to define a client-side image map, which is a technique used to create clickable areas on an image. With an image map, a user can click on specific areas of an image, and be taken to different web pages or execute various JavaScript functions.
Here's an example of using the <map> element to create an image map:
<img src="example.jpg" alt="Example Image" usemap="#map"><map name="map"> <area shape="rect" coords="0,0,50,50" href="page1.html"> <area shape="circle" coords="75,75,25" href="page2.html"> <area shape="poly" coords="100,0,150,50,100,100" href="page3.html"> </map>In this example, we have an image element with an src attribute and an alt attribute, followed by a <map> element. The <map> element has a name attribute which is referenced in the usemap attribute of the image element.
Inside the <map> element, we have three <area> elements, each with different shapes and coordinates. The shape attribute defines the shape of the clickable area, which can be a rectangle, circle, or polygon. The coords attribute specifies the coordinates of the clickable area, and the href attribute specifies the URL of the page to navigate to when the area is clicked.Some common use cases for the <map> element include:
Interactive images: Image maps can be used to create interactive images, such as maps, diagrams, and infographics.
Image-based navigation: Image maps can be used as an alternative to traditional navigation menus, allowing users to click on different areas of an image to navigate to different pages.
Displaying product information: Image maps can be used to create clickable areas on product images, allowing users to view detailed information or make a purchase.
-
<object>: This element is used to embed media, such as images or videos, into an HTML document. It can be used as either an inline or a block-level element, depending on the size and position of the media on the page.
The <object> element in HTML is used to embed external content, such as images, videos, and other media types, into a web page. The element is versatile and can be used to embed content from different sources including external web pages, PDF documents, and even other HTML pages.
Here is an example of using the <object> element to embed a YouTube video on a web page:
<object data="https://www.youtube.com/embed/video_id"> Your browser does not support the video tag. </object>
In this example, the data attribute of the <object> element points to the URL of the YouTube video that we want to embed. If the browser is unable to render the object, then the fallback text "Your browser does not support the video tag" will be displayed.The <object> element is commonly used to embed the following types of content on a web page:
Images and videos: The <object> element can be used to embed various types of media, such as images, videos, and audio files.
External web pages: The <object> element can be used to embed external web pages into a web page.
PDF documents: The <object> element can be used to embed PDF documents, which can be viewed directly on the web page.
Interactive content: The <object> element can be used to embed interactive content, such as games and quizzes.
Overall, the <object> element provides a powerful and flexible way to embed external content on a web page, allowing for a richer and more dynamic user experience. -
<iframe>: This element is used to embed a web page or other content into an HTML document. It can be used as either an inline or a block-level element, depending on how it is positioned on the page.
The <iframe> element in HTML is used to embed a web page within another web page. It essentially creates a small window on the web page that displays content from another source.
Here's an example of using the <iframe> element to embed a Google Map on a web page:<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2701.278072631522!2d-122.40646868439258!3d37.78533677313423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807b1be2b53d%3A0xf8d5b6bb0b6c99c4!2sGolden+Gate+Bridge!5e0!3m2!1sen!2sus!4v1541156662454" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
In this example, the src attribute of the <iframe> element points to the URL of the Google Map that we want to embed. The width and height attributes are used to set the size of the iframe window, and the frameborder attribute is set to 0 to remove the default border around the iframe. The style attribute is used to further customize the look and feel of the iframe.The <iframe> element is commonly used to embed the following types of content on a web page:
Maps: The <iframe> element can be used to embed maps from Google Maps, Bing Maps, and other map providers.
Videos: The <iframe> element can be used to embed videos from YouTube, Vimeo, and other video hosting sites.
Social media feeds: The <iframe> element can be used to embed social media feeds from Facebook, Twitter, and other social media platforms.
External content: The <iframe> element can be used to embed external content, such as other web pages or documents.
Overall, the <iframe> element provides a way to seamlessly integrate external content into a web page, allowing for a richer and more interactive user experience.
In general, the decision to use an element as either an inline or a block-level element depends on the specific use case and the layout of the page.
Some new elements have been introduced in this lesson but you do not have to worry much about them. We will cover what they are in our next lesson.
They were included because one or more of them might be an inline or block-level element. In our next lesson, we will discuss HTML5 semantic elements and that will make you understand them better.
Note:
One can insert inline elements in block-level elements but block-level elements should not be inserted inside inline elements. Doing so is a bad practice and can lead to inconsistent results.
Understanding the difference between block-level and inline elements is important for web developers, as it helps them create well-structured and visually appealing web pages. By using these elements effectively, developers can create pages that are easy to read and navigate for users.