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

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

3.79

(14)

125 pages

Introduction to HTML: basic structure, tags and attributes: Control structures (if, switch, for, while)

Capítulo 30

Estimated reading time: 5 minutes

Audio Icon

Listen in audio

0:00 / 0:00
4.26. Introduction to HTML: Basic structure, tags and attributes: Control structures (if, switch, for, while)

Introduction to HTML

HTML, which stands for Hyper Text Markup Language, is the standard markup language for creating web pages and applications. Combined with cutting-edge technologies like JavaScript and CSS, HTML allows front-end developers to create feature-rich websites and applications and visually stunning.

Basic structure of an HTML document

A basic HTML document has a specific structure that includes specific tags that define the head (<head>) and body (<body>) of the document . The <html> tag is the document root and all other tags are nested within it. The <head> tag contains metadata about the document, such as its title and links to CSS scripts and stylesheets. The <body> tag contains the actual content of the web page, such as text, images, videos, etc.

<!DOCTYPE html>
<html>
<head>
    <title>Page title</title>
</head>
<body>
    <h1>This is a header</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

HTML Tags and Attributes

HTML tags are the basis of the HTML language. They define and describe the content in an HTML document. An HTML tag is composed of an element name, enclosed in angle brackets. Some examples include <h1>, <p>, <div>, etc.

HTML attributes provide additional information about elements. They are always specified in the start element and usually come in name/value pairs. For example, the <a> link tag often uses the "href" attribute to specify the link it should point to.

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

Control structures in JavaScript

JavaScript, like many other programming languages, has control structures that allow developers to specify different execution paths based on conditions and loops. The most common control structures in JavaScript are if, switch, for and while.

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 App

Download the app

if

The if statement is a conditional control structure that executes a block of code if a specified condition is true.

let x = 20;
if (x > 10) {
    console.log("x is greater than 10");
}

switch

The switch statement evaluates an expression and executes the block of code corresponding to the value of the expression.

let fruit = "apple";
switch (fruit) {
    case "banana":
        console.log("I like bananas!");
        break;
    case "apple":
        console.log("Apples are ok.");
        break;
    default:
        console.log("I like all fruits!");
        break;
}

for

The for loop is a control structure that executes a block of code a specific number of times.

for (let i = 0; i < 5; i++) {
    console.log(i);
}

while

The while loop is a control structure that executes a block of code as long as a specified condition is true.

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

In summary, HTML, CSS and JavaScript are powerful tools that allow developers to create rich, interactive web applications. Understanding the basic structure of HTML, tags and attributes, as well as JavaScript control structures are fundamental steps to becoming an effective front-end developer.

Now answer the exercise about the content:

Which of the following statements correctly describes the basic structure of an HTML document?

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

You missed! Try again.

The basic structure of an HTML document includes specific tags that define the head () and body (). The tag is the root of the document, and all other tags are nested within it. The head tag contains metadata, while the body tag contains the actual content of the web page. This is why option 3 is correct.

Next chapter

Introduction to HTML: basic structure, tags and attributes: Functions in JavaScript

Arrow Right Icon
Download the app to earn free Certification and listen to the courses in the background, even with the screen off.