Basics of web development

HTML and Text Formatting

Easy
20 min

The appearance of an HTML document is mainly formatted with CSS styles, which we will delve into in the next section of the course. However, HTML has different elements that have a default appearance and can also be used for text formatting.

These elements can be used to create, for example, headings (<h1>, <h2>, <h3>), paragraphs (<p>), bold text (<b>), italic text (<i>), underlined text (<u>), smaller text (<small>), larger text (<big>), subscript text (<sub>), superscript text (<sup>), line breaks (<br>), horizontal rules (<hr>), preformatted text (<pre>), code examples (<code>), and block quotes (<blockquote>).

Example

<!DOCTYPE html><html><head><title>An example of text formatting</title></head><body><h1> Title 1</h1><h2> Title 2</h2><h3> Title 3</h3><p> This is the text of the song.</p> <b>This text is in bold.</b> <i>This text is italicized.</i> <u>This text is underlined.</u> <small>This text is in a smaller size.</small> <big>This text is in a larger size.</big> <sub>This text is subscripted.</sub> <sup>This text is superscripted.</sup><br><hr><pre> This text preserves spaces and line breaks.</pre> <code>Tämä teksti on koodiesimerkki.</code><blockquote> This text is enclosed in quotation marks.</blockquote></body></html>

Important note

Even if you end up doing all the styling with CSS alone (for example, TailwindCSS, which is worth exploring at some point, clears all browser default styles), it is still important to use structurally correct HTML tags, for example, for usability and search engine optimization purposes.

Practice

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.