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.

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.

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

Next page of the Free Ebook:

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

4 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou 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