Basics of web development

HTML Tags, Elements and Attributes

Easy
20 min

HTML tags, elements, and attributes are important building blocks in creating websites.

HTML Elements

The content of an HTML document consists of several different pieces, such as images, various texts, styles, scripts, lists, tables, etc. These pieces are called HTML elements. And HTML elements are created in HTML code using HTML tags.

HTML tags

The HTML tag begins and ends an HTML element. An HTML element can contain text, other HTML tags, or other elements. For example, the following code creates a header element using the header tag, <h1>, which starts the header and </h1> which ends it:

<h1>This is the title</h1>
Kokeile itse!

Valitettavasti Replit-palvelu on muuttnut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.

HTML attributes

HTML attributes are keywords that define the properties of HTML elements. Attributes are defined within HTML elements and are often used to specify information about the element. For example, the <img> tag uses the src attribute to define the URL of an image. The following code displays an <img> tag that uses the src attribute.

<img src="kuva.jpg" alt="Caption">
Kokeile itse!

Valitettavasti Replit-palvelu on muuttnut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.

Both is better!

HTML elements and attributes can also be combined to specify the content and appearance of an element. For example, the following code contains an <a> tag that creates a hyperlink to a URL and uses the title attribute to display the text when the mouse cursor is hovering over it:

<a href="https://www.hakatemia.fi" title="Go to Hakatemia">Hackathemia</a>
Kokeile itse!

Valitettavasti Replit-palvelu on muuttnut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.

hakatemia pro

Ready to become an ethical hacker?
Start today.

As a member of Hakatemia you get unlimited access to Hakatemia modules, exercises and tools, and you get access to the Hakatemia Discord channel where you can ask for help from both instructors and other Hakatemia members.