What types oaf TAGs we use

HTML elements for structuring content and their correct use

<h1>Recipes for healthy meals</h1>

<h2>Breakfast</h2>
<h3>Oatmeal porridge</h3>
<h3>Banana pancakes</h3>

2. Seznamy (<ul>, <ol>, <dl>)

Lists are used to organize items into a clear format. There are three main types:

Unordered list (<ul>)

Used when order doesn't matter. Each item is inside a <li>.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Pears</li>
</ul>​

In browser:

• Apples
• Bananas
• Pears

Ordered list (<ol>)

Used when order plays a role. Items are numbered.

<ol>
    <li>Preheat oven to 180°C</li>
    <li>Prepare the dough</li>
    <li>Bake for 20 minutes</li>
</ol>

In browser:

1. Preheat oven to 180°C
2. Prepare the dough
3. Bake for 20 minutes

Descriptive list (<dl>)

It is used to define terms and explain them.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language – language for creating web pages</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets – used for styling web pages</dd>
</dl>

In browser:
HTML
HyperText Markup Language – slouží ke stylování webových stránek

CSS
Cascading Style Sheets – used for styling web pages

3. Images (<img>)

The <img> tag is used to insert images. It must have a src attribute (the source of the file) and it is advisable to add alt (alternative text for screen readers and in case of missing images).

<img src="img/recept.jpg" alt="Photos of healthy food">

Correct use of images:

✅ Use relevant images - Don't add images just for the sake of appearance, but where they have informational value.
✅ Fill in the alt attribute - Important for accessibility and SEO.
✅ Use the right formats - e.g. .jpg for photos, .png for transparent images, .webp for better compression.

4. Multimedia container - <figure>

The <figure> element is used for better formatting of images, graphs or tables. It can be combined with <figcaption> to add a caption.

<figure>
    <img src="/userfiles/images/path_to_image.jpg" alt="Homemade chocolate cake">
    <figcaption>Homemade chocolate cake according to grandma's recipe.</figcaption>
</figure>

Benefits of using <figure>:
✅ Helps with logical organization of content.
✅ Allows you to add a label without having to use <p>.
✅ It gives us a wrapping element that allows us to manipulate the width and height of the image without distorting it.

5. Tables (<table>)

Tables are used to organize data in rows and columns. The structure of a table includes:

• <table> - wrapper element
• <tr> - table row
• <th> - header cell (bold)
• <td> - regular cell

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Petr</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>30</td>
    </tr>
</table>

Browser output:

Proper use of tables:
✅ Use for data, not for layout!
✅ Add <th> for the header - makes the table easier to read.

1. Block vs. line elements

Before we look at individual tags, it's good to understand the difference between block and line elements:

2. <div> - universal block container

The <div> tag is used as a container for grouping other HTML elements. It is mainly used for CSS styling or JavaScript manipulation.

✅ Using divs to group content:

<div class="card">
    <h2>Summer holidays</h2>
    <p>Discover the most beautiful destinations in Europe.</p>
</div>

📌 When to use <div>?

• If you want to group elements for styling.
• If you need to create a page layout.
• Unless you have a more appropriate semantic tag (e.g. <section>).

🚫 When to avoid <div>?

• If there is a semantically more appropriate element (e.g. <header>, <section> or <article>).

3. <span> - universal line container

Unlike <div>, <span> is a line element. It is used to highlight a section of text or apply styles to specific words.

✅ Using span to style a section of text:

<p>Our shop offers <span class="discout">20% discout</span> for all products.</p>

📌 When to use <span>?

• If you want to edit only part of the text inside another element.
• If you need to change the color, font or style of specific words.

🚫 When to avoid <span>?

• If you can use a semantic tag like <strong> or <em>.

4. <section> - thematic content section

The <section> element groups related content, usually with a heading. Unlike <div>, it has semantic value and tells search engines and assistive technologies that a given block forms a separate section of content.

✅ Use section to logically separate parts of a page:

<section>
    <h2>About us</h2>
    <p>We are a company with a long tradition in the industry.</p>
</section>

<section>
    <h2>Our Services</h2>
    <p>We offer professional advice and service.</p>
</section>

• If a piece of content has an independent meaning.
• If it contains a title (<h2>, <h3>, ...).
• If you want to better structure the content of the page.

🚫 When to avoid <section>?

• Unless the section has its own topic or title (in which case it is better to use <div>).

Comparison: when to use <div>, <span> and <section>?

Summary

Proper use of HTML elements helps the clarity and accessibility of the page.

🔹 Headings – Use logically, only one <h1>.
🔹 Lists– Unordered (<ul>) for lists, ordered (<ol>) for steps, descriptive (<dl>) for definitions.
🔹 Images– Always add alt and use the correct formats.
🔹 Figures – Helps with the correct placement of images and captions.
🔹 Tables – Use only for data, not for page layout.

🔹 <div> is a universal block element, but should only be used when there is no more appropriate semantic tag.
🔹 <span> is ideal for styling parts of text, but should not be used excessively.
🔹 <section> helps organize web content into logical units, improving readability and SEO.

Following these rules will ensure that your website is well structured, clear and accessible to all users. We may also encounter other tags