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: Basic structure of HTML

Capítulo 6

Estimated reading time: 4 minutes

Listen in audio

0:00 / 0:00

HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. It is one of the main tools that any front-end developer must master. This module of our e-book course will introduce the basic structure of HTML, its tags and attributes.

Basic structure of HTML

An HTML document is made up of a series of elements, each represented by a tag. The basic structure of an HTML document looks like this:

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

The <!DOCTYPE html> at the beginning of the document is a declaration that tells the browser that this is an HTML5 document. The <html> involves the entire content of the page. Within this tag, we have two other important tags: <head> and <body>.

The <head> contains information about the page that is not visible to the user, such as the page title (which appears in the browser's title bar) and links to external CSS and JavaScript files. The <body> contains all the content that the user sees, such as text, images, links, etc.

HTML Tags

HTML tags are the foundation of any web page. They define the structure and layout of the page, and can be used to add text, images, links and other elements. Here are some of the most common tags:

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

<h1> a <h6>: These tags are used to add titles and subtitles. <h1> is the most important title (and usually the largest in size), while <h6> is the least important.
<p>: This tag is used to add paragraphs of text.
<a>: This tag is used to add links.
<img>: This tag is used to add images.
<div>: This tag is used to group other elements.

HTML Attributes

HTML attributes are used to provide additional information about an element. They are always specified at the beginning of the tag and have the following structure: attribute_name="attribute_value". Here are some of the most common attributes:

class: This attribute is used to specify one or more classes for an element. Classes are used to select elements with CSS and JavaScript.
id: This attribute is used to specify a unique identifier for an element. The id must be unique within the document.
src: This attribute is used to specify the source of a media element, such as an image or video.
href: This attribute is used to specify the URL of a link.
alt: This attribute is used to specify alternative text for an image, which will be displayed if the image cannot be loaded.

In short, HTML is the backbone of any web page. Mastering the basic structure of HTML, its tags and attributes is essential for any front-end developer. In the next module of our e-book course, we will explore CSS, the language used to style HTML pages and create attractive, responsive layouts.

Now answer the exercise about the content:

What does the <head> in HTML contains?

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

You missed! Try again.

The <head> element in HTML contains meta-information about the document which is not directly visible to the user. This includes the document's title, which appears in the browser tab, links to external resources like stylesheets and scripts, and other meta tags to describe page content. This information helps in rendering and describing the page correctly but does not appear within the page's content area viewed by users.

Next chapter

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