Using Div and Span Elements

Div and span elements are essential elements of any web page. They are used to group and style content on the page, and they provide a way to apply styles to specific areas of the page. In this article, we’ll take a closer look at how to use div and span elements in HTML.

Using Div Elements

The <div> element is a block-level element that is used to group and style content on a web page. It can contain any type of content, including headings, paragraphs, lists, and other elements. The <div> element is often used as a container for other elements, and it can be styled with CSS to create a wide range of layouts and designs.

Here’s an example of how to use a div element in HTML:

<div>
  <h2>My Website</h2>
  <p>Welcome to my website!</p>
</div>

In this example, we have used a div element to group a heading and a paragraph. The <h2> and <p> elements are nested within the <div> element, and they are styled and positioned as a unit.

You can also use the id and class attributes to apply styles to div elements. The id attribute is used to uniquely identify an element on the page, and the class attribute is used to apply styles to multiple elements on the page.

<div id="header" class="container">
  <h2>My Website</h2>
  <p>Welcome to my website!</p>
</div>

In this example, we have added the id and class attributes to the div element. The id attribute uniquely identifies the element as the header, and the class attribute applies the style of a container to the element.

Using Span Elements

The <span> element is an inline element that is used to group and style content within a block of text. It can contain any type of inline content, such as words or phrases. The <span> element is often used to apply styles to specific parts of a block of text, and it can be styled with CSS to create a wide range of effects.

Here’s an example of how to use a span element in HTML:

<p>Welcome to <span>my website</span>!</p>

In this example, we have used a span element to group the phrase “my website” within a paragraph. The <span> element is nested within the <p> element, and it can be styled to change the appearance of the phrase within the paragraph.

Like div elements, span elements can also be styled using the id and class attributes.

<p>Welcome to <span id="website-name" class="highlight">my website</span>!</p>

In this example, we have added the id and class attributes to the span element. The id attribute uniquely identifies the element as the website name, and the class attribute applies the style of a highlight to the element.

Conclusion

Div and span elements are essential elements of any web page, and they are used to group and style content on the page. With the skills and knowledge you gain in this course, you’ll be able to use div and span elements to create professional-quality web pages that are visually appealing and easy to read.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.