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

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

Page 18 | Listen in audio

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.

<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.

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

Next page of the Free Ebook:

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

3 minutes

Earn your Certificate for this Course for Free! by downloading the Cursa app and reading the ebook there. Available on Google Play or App Store!

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text