Complete HTML, CSS and Javascript course to become a Front End Developer

3.79

(14)

125 pages

All courses > Information Technology > Web Development ::

Introduction to HTML: basic structure, tags and attributes: Split and span tags

Capítulo 18

Estimated reading time: 4 minutes

Listen in audio

0:00 / 0:00

4.14. Introduction to HTML: Basic Structure, Tags and Attributes: Division and Span Tags

HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Understanding the basic structure of HTML, as well as tags and attributes, is essential for any front-end developer. In this section, we will focus specifically on division and span tags.

Basic Structure of HTML

An HTML document is structured as a tree of elements and text. Each document starts with a document type which is followed by the root tag . Within the tag, we have two main parts: the and the .

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    Page content goes here.
</body>
</html>

The contains metainformation about the document, such as its title, links to scripts and style sheets. The contains the actual content of the page that is visible to users.

Tags and Attributes

HTML tags are the building blocks of any web page. They define the type of content being inserted and how it should be displayed. Each tag begins with a angle bracket (<) and ends with an angle bracket (>). Most tags come in pairs, with an opening tag and a closing tag.

Attributes provide additional information about HTML tags. They come in name and value pairs and are always included in the opening tag. For example, the link tag might have an href attribute that indicates the URL the link should point to.

Continue in our app.

You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.

Or continue reading below...

Download the app

<a href="https://www.example.com">Link to Example.com</a>

Division and Span Tags

The division

and span tags are used to group other HTML elements. The

tag is a block element that is used to group block-level elements, while the tag is an inline element that is used to group inline-level elements.

<div>
    <p>This is a paragraph within a div.</p>
    <p>This is another paragraph within the same div.</p>
</div>

<p>This is <span>highlighted text</span> within a paragraph.</p>

Both tags are often used with class and id attributes to apply CSS styles or JavaScript behaviors. For example, you might have a div with the class "container" that has a certain style applied to it.

<div class="container">
    <p>This is a paragraph inside a div with the class "container".</p>
</div>

In short, HTML is the backbone of any web page. Understanding the basic structure of HTML and how to use tags and attributes is critical to becoming an effective front-end developer. Split and span tags are particularly useful for grouping elements and applying styles or behaviors to groups of elements.

Now answer the exercise about the content:

What is the function of split and span tags in HTML?

You are right! Congratulations, now go to the next page

You missed! Try again.

The div and span tags, commonly known as division and span tags in HTML, are used to group other HTML elements. The div tag is a block-level element, suitable for grouping block elements, while the span tag is inline, used for grouping inline elements. These tags are typically combined with CSS or JavaScript to style or add functionality to the grouped elements.

Next chapter

Introduction to HTML: Basic Structure, Tags and Attributes: Semantic HTML