4.3. Introduction to HTML: basic structure, tags and attributes: Understanding HTML tags

Página 7

Introduction to HTML: Basic Structure, Tags and Attributes

HTML, or HyperText 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 critical for any front-end developer. In this chapter, we will explore these concepts in detail.

Basic structure of HTML

An HTML document is made up of HTML elements, which are indicated by tags. Each HTML document begins with the document type declaration , which tells the browser that the document is an HTML5 file. The tag <html> that involves the entire content of the page.

<!DOCTYPE html>
<html>
...
</html>

Within the <html> tag, we have two main parts: the <head> and <body>. The <head> contains metadata about the document, such as the page title (<title> tag), links to CSS stylesheets (<link> tag), and JavaScript scripts (<script> tag). The <body> contains the actual content of the page that is visible to users.

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

HTML Tags

HTML tags are used to define elements in an HTML document. They are surrounded by angle brackets (< and >). Most tags come in pairs and wrap around the content they are affecting. For example, the <p> is used to create a paragraph:

<p>This is a paragraph.</p>

There are many HTML tags, each with its own purpose. Some of the most common include <h1> to <h6> for headers, <a> for links, <img> for images, <ul> and <li> for lists, and <div> and <span> to group elements.

HTML Attributes

HTML attributes are used to provide additional information about an element. They are always specified at the beginning of the opening tag and usually come in name/value pairs. For example, the <a> generally uses the href attribute to specify the link URL:

<a href="https://www.example.com">This is a link</a>

Other common attributes include src to specify the font of an image, alt to specify alternative text for an image, and style to add CSS styles to an element.

In short, HTML is the backbone of any web page. Understanding the basic structure of HTML, as well as tags and attributes, is the first step to becoming an effective front-end developer. In the next chapter, we will explore CSS and how it is used to style HTML elements.

Now answer the exercise about the content:

What is the function of the <head> in an HTML document?

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

You missed! Try again.

Next page of the Free Ebook:

84.4. Introduction to HTML: basic structure, tags and attributes: Attributes in HTML

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