Skip to main content

HTML Block Elements

This is going to be a quick & easy lesson on Inline block elements.

Let's begin with addressing the basic question in mind.

What are In-Line Level Elements?​

Inline elements only occupy the space bounded by the tags defining the element instead of breaking the flow of the content. HTML inline elements always start in the same line. Their width is equal to their content. Maximum inline elements are presentational like

<img> - image tag

An attractive page comes with beautiful images. Adding an image is made easy in HTML using <img>

Syntax:

<img src = “ImageName” alt = “AlternateForTheImageAsText”>

The components in the image tags are

  • src: The file path to the image file.
  • width: The width of the image, in pixels.
  • height: The height of the image, in pixels.
  • alt: The text the browser will display when visitors mouse over the image. Search engines often place more weight on the text in the alt attribute.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Section tag</title>

</head>

<body>

<img src="images/Logo original.svg" alt="image">

</body>

</html>

Do you think you can include an image in HTML?

Try it.

<insert code editor>

👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻

Let's explore the Anchor tag.

<a> - anchor tag (to display links)

The essence of an HTML document lies in the first two words: (H)yper(T)ext. In other words, the ability to link to other documents makes HTML unique. How do HTML documents link to other documents? It does so via the <a> tag. The attributes for the <a> tag are href and name. Below is an example for each:

Example 1: Link to an external document.

HTML:

<a href="sample.html">This link</a> takes you to a document called "sample.html."

Display:

This link takes you to a document called "sample.html."

Example 1:

<!DOCTYPE html>

<html>

<head>

<title>Section tag</title>

</head>

<body> <a href="https://www.faceprep.in/prograd/">ProGrad</a> </body>

</html>

Example 2: Link to an anchor within the same document.

HTML:

<a href="#atag">This link</a> takes you to a pre-determined location on the same page.

Display:

This link takes you to a pre-determined location on the same page.

Watch a video on inline elements

<video to be added>

Watch a video on the Anchor tag.

<video to be added>

Practice Time:

Step 1: Upload your resume in Google Docs.

Step 2: Click the share button on the top right.

Step 3: Copy the link.

Step 4: Use the Anchor tag to link your resume on your web page.

<insert code editor>

It looks cool!

Summary

In this lesson, we have learned about the inline elements in HTML like the anchor tag, which is used to redirect links and the image tag, which is used to insert images in the HTML documents.

Useful resources for you​

Now that you’re done with this lesson, here are some useful post-class reading links for you.

https://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

https://www.scaler.com/topics/html/inline-and-block-elements/