Exercise

02. Elemental

Elements

To understand how HTML works, we need to start with elements – the smallest building blocks of the language.

An element usually consists of an opening tag, the content, and a closing tag. A tag is enclosed in angle brackets.

<p>Hello World!</p>

So this is one HTML element where:

 is the opening tag.
Hello World! is the content.
 is the closing tag.

The  paragraph element tells the browser that the content inside is "paragraph" text.

Let's take a look at a basic HTML program that displays a message in the browser:

<body><p>👋 I'm a new web developer!</p></body>

The <body> element defines an HTML document's "body" and it's where any content that we want to display to the user will be held:

<body> opening tag begins the "body".
👋 I'm a new web developer! is some text in a paragraph element.
</body> closing tag ends the "body".

Note: There can only be one <body> element in a file.

Indentation

While indenting HTML code isn't required, doing so is good practice because it makes your code easier to read and visualize the nesting levels.

Here's how to indent the previous code block:

<body>
  <p>👋 I'm a new web developer!</p>
</body>

Notice how it's a lot easier to read this way!

We recommend two spaces for indentations.

Instructions

The ancient Greeks believed that there were four elements that everything under the sun was made up of:

🔥 Fire
💧 Water
⛰️ Earth
🌪️ Air

Create an elemental.html file that shows the four elements in the browser.

Make sure that it's indented nicely, too!

Help

Get a Hint

Want the solution? Try completing the lesson first!

elemental.html

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

What are classes and objects in Python?
How to create a table in HTML?
What's if (variable > 2) print(‘greater’)?
What's Codédex Club?

index.html

Your code results will appear here when you Run the project.

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

What are classes and objects in Python?
How to create a table in HTML?
What's if (variable > 2) print(‘greater’)?
What's Codédex Club?

THE ORIGINS I: HTML

Elements

01. Shooting Star

02. Elemental

03. Newspaper

04. Corporate Talk

05. Sous-Chef

06. Lost Pet

07. Favorite Band

Structure

Forms

Semantic HTML

Final Project

02. Elemental

10 XP

Others on this exercise:

@arpitkumar3347

SINGH ARPIT AJAY

Level 8

@gordo32

Level 4

@carlosfigu77705

Level 4

@sawkza

Ye Htut Oo

Level 3

@meilindazz45662

Meilinda

Level 3

@Adocalypsced

Ado Tomo jr

Level 3

@R4ttiK4tti

Kat Simeonidis

Level 3

@HamDy

Feyisola Akinpelu

Level 3

@LuizHenrique

Level 3

@Ferreiraa

Pedro Ferreira

Level 2

@H4CHIBI

Butil, Vinardo G.

Level 2

@SenkuUchiha2x

Senku Uchiha

Level 2

@ashashyan

Yanzhuang Tan

Level 2

@gomes

Level 2

@Khadoche

Khadijetou Dia

Level 2

@Zmx3yA

Sahar Abramov

Level 2

@JJboy

Emnica Morison

Level 2

@alexchk9975589

Alex

Level 2

@ALEXIS3434

ALEXIS CASTRO

Level 2

@juujuu

Level 2

@chen21

abd rofii'

Level 1

@gostgirl

Level 1

@Daksh915

Level 1

@SabiBina

Level 1

@ozmosis

Lucas Mollerstuen

Level 1

@iubi

Gladys Gay Palen

Level 1

@fraf

Fancy Spider

Level 1

@Odd1y

Вадим Чайкін

Level 1

@ixl122anil25683

Level 1

@TacoFreddy

James Elderkin

Level 1

@ElvisOkami

Elvis Lupo

Level 1

@PooSea

Level 1

@Z-GG3R4

Level 1

@Moeketsi

Level 1

@ccs5557

CHEN CHANG SOON

Level 1

@Bokse

Prajwal Syangtan

Level 1

@Willtan

weier tan

Level 1

@berga

Level 1

@abcdefghz

Level 1

@Silencer8

Level 1

@Tx3tureggwp

Hoang

Level 1

@Hartpac

Miles Armstrong

Level 1

@ericzzdd

mingan zheng

Level 1

@izaac

Isaac Park

Level 1

@kaveena

Level 1

@jack91

Level 1

@XTRM

Level 1

@Ataliya

Soha Fatima

Level 1

@UcungSunda

Yordan Yohanes

Level 1

@viqui

lisaagom 00

Level 1

@Sututututu

Level 1

@Fr0gmaster23123

hasin chowdhury

Level 1

@masawafy

Level 1

@FHDArnold

Level 1

@shrii77

Shriya Dinkar

Level 1

@ailments

Jiken SN

Level 1

@guichosk8

Luis González

Level 1

@fr0z3n

Level 1

@MaCCori

Level 1

@Laran36

Mario Rossi

Level 1

@adhanz

Level 1

@Maleale

Alejandra Meneses

Level 1

@Shaldon

Shaldon Soh

Level 1

@xNavyT

Level 1

@emmahellie2421

emma

Level 1

@danigo

Level 1

@cubicie

Yuxuan Liu

Level 1

@Tecko

Felipe

Level 1

@ammutti

LAQSHYA PRIYA

Level 1

@Sacredsoul

manthan maru (mmaru)

Level 1

@sisouh

Zohra bachir

Level 1

@luisjose81475

José

Level 1

@everiwhichwei

at the moment

Level 1

@lukman

Srilakshmi Manuraj

Level 1

@ItsMeDAN

Level 1

@Azab

Mohamed Ahmed

Level 1

@St4r3

Gisell Espinoza

Level 1

@Arsi25

Level 1

@allaliAX

Level 1

@Danny01

Level 1

@Lyiz

Pedro Ferreira

Level 1

@Mixtry

Soul FaithX

Level 1

@Squaredius

Level 1

@chloe104

Level 1

@sayyanika

Level 1

@dimajpeg

Dima Matushenko

Level 1

@aditiPaul

Aditi Paul

Level 1

@J0hnnyJ0y

Level 1

@rons

Level 1

@esalhs

Level 1

@be3blebop

Level 1

@toinou

Antoine Husser

Level 1

@Galaxiius

Adailton Vieira

Level 1

@hypernova2099

chrisel edward

Level 1

@rohinii

Rohini Choudhary

Level 1

@AgentWindex

Brandon Spencer

Level 1

@JustHubaish

Just Hubaish

Level 1

@sreelakshmip

Level 1

@Ava-simone

Ava Ferguson

Level 1

@Zahil85

Level 1

@aidentea

Level 1

@90210

Level 1

@JTP

Level 1

@Maeny

Level 1

@TI-84

JD Zeng

Level 1

@Drox

Level 1

@wryyyyyyyyyy

Level 1

@PutMD

Putera

Level 1

@jojoschiiiii

joshii *

Level 1

@sweetmocha

gabriela mattos

Level 1

@Filippp

Filip Marković

Level 1

@hamid1373

h hh

Level 1

@rseyfiff77254

Level 1

@Litte

Eliza Eudoxio

Level 1

@Senkuchan

Rafly Al bukhori

Level 1

@MuhammadKamran

Muhammad Kamran

Level 1

@purple98

Level 1

@Syzo

abode m

Level 1

@ProperTouch

Level 1

@davidpainart

David Pain

Level 1

@jinijijin

Level 1

@vibhutii

Vibhuti Gaikwad

Level 1

@anak04

Ana Krivic

Level 1

@Emeka01

Level 1

@SilvioX

Minghua Xiao

Level 1

@Honer

Liam Cole

Level 1

@moonmiu

Chomchanok K (Miu)

Level 1

@Kaishi19

Level 1

@Dhruvesh

Level 1

@cvazc

Sebastián

Level 1

@ItzJay

Level 1

@SoupDumpling

Level 1

@musikian

Level 1

@AmanAman

Amanuel Gebreslassie

Level 1

@wolfgang852022806

Олег

Level 1

@max0

Mclance Tan

Level 1

@sinenkosi

Sinenkosi Nsele

Level 1

@karimee06

Karime Garza

Level 1

@mcbad

Level 1

@02darling

02 Darling

Level 1

@kimberlai

Level 1

@IMREX56

Somendra Patnaik

Level 1

@Steeven

Jeff HOUNKPE SAGBO

Level 1

@elizavetap73308

Prigozhaya Liaz

Level 1

@hyhihuhi

Huy Nguyễn

Level 1

@exalto

Level 1

@kinex

Level 1

@raks21

Rakshitha V

Level 1

@imMS

Level 1

@PARSHAK

Shukla Parshak

Level 1

@Askia

Level 1

@Nathanaell

nathan uk

Level 1

@ziad1

zyad abdelsalam

Level 1

@exSwce

80_Swarnali

Level 1

@Kirb03

Sanjith Sahiram

Level 1

@Marwae

Level 1

@be4rily

Lily Luong

Level 1

@Jevi

Jeffrey Johanning

Level 1

@Jakeleo

Level 1

@Astreed

Lola Torillec

Level 1

@Roster666

Thuto Nthutang

Level 1

@SAI45

SAISH PANCHAL

Level 1

@JeziLeBG97

Jezi Jabou

Level 1

@Harini05

Harini R

Level 1

+160

Exercise

02. Elemental

Elements

To understand how HTML works, we need to start with elements – the smallest building blocks of the language.

An element usually consists of an opening tag, the content, and a closing tag. A tag is enclosed in angle brackets.

<p>Hello World!</p>

So this is one HTML element where:

 is the opening tag.
Hello World! is the content.
 is the closing tag.

The  paragraph element tells the browser that the content inside is "paragraph" text.

Let's take a look at a basic HTML program that displays a message in the browser:

<body><p>👋 I'm a new web developer!</p></body>

The <body> element defines an HTML document's "body" and it's where any content that we want to display to the user will be held:

<body> opening tag begins the "body".
👋 I'm a new web developer! is some text in a paragraph element.
</body> closing tag ends the "body".

Note: There can only be one <body> element in a file.

Indentation

While indenting HTML code isn't required, doing so is good practice because it makes your code easier to read and visualize the nesting levels.

Here's how to indent the previous code block:

<body>
  <p>👋 I'm a new web developer!</p>
</body>

Notice how it's a lot easier to read this way!

We recommend two spaces for indentations.

Instructions

The ancient Greeks believed that there were four elements that everything under the sun was made up of:

🔥 Fire
💧 Water
⛰️ Earth
🌪️ Air

Create an elemental.html file that shows the four elements in the browser.

Make sure that it's indented nicely, too!

Help

Get a Hint

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

What are classes and objects in Python?
How to create a table in HTML?
What's if (variable > 2) print(‘greater’)?
What's Codédex Club?

index.html

Hi, I’m Codédex Bot! I’m a coding mentor bot built with GPT-4 👋.

I’m here to answer any questions related to programming, Codédex, and much more.

For example, try to ask something like:

What are classes and objects in Python?
How to create a table in HTML?
What's if (variable > 2) print(‘greater’)?
What's Codédex Club?

Codédex
HTML
/
Elements

Codédex

02. Elemental

Elements

Indentation

Instructions

Help

FEATURE UNLOCKED!

FEATURE UNLOCKED!

Rubber Duck

Codédex Bot

Your code results will appear here when you Run the project.

Rubber Duck

Codédex Bot

THE ORIGINS I: HTML

Elements

Structure

Forms

Semantic HTML

Final Project

Others on this exercise:

02. Elemental

Elements

Indentation

Instructions

Help

FEATURE UNLOCKED!

FEATURE UNLOCKED!

Rubber Duck

Codédex Bot

Rubber Duck

Codédex Bot

CodédexHTML/Elements

Codédex

02. Elemental

# Elements

# Indentation

Instructions

Help

Rubber Duck

Codédex Bot

Your code results will appear here when you Run the project.

Rubber Duck

Codédex Bot

THE ORIGINS I: HTML

Elements

Structure

Forms

Semantic HTML

Final Project

Others on this exercise:

02. Elemental

# Elements

# Indentation

# Instructions

Help

Rubber Duck

Codédex Bot

Rubber Duck

Codédex Bot

Codédex
HTML
/
Elements

Elements

Indentation

Elements

Indentation

Instructions