Structuring your site using HTML divs and spans

What are HTML divs and spans?

Before we dive into the use of divs and spans, it is important to understand their purpose and difference. Divs and spans are block and line elements, respectively, that are used to divide and group content.

Divs are used to create separate blocks of content, while spans are used to apply specific styles to smaller pieces of text.

Benefits of using divs and spans

Proper use of divs and spans on your site has several benefits:

• Improves readability and organisation of HTML code
• Allows custom styles and formatting through CSS
• Facilitates selection and manipulation of elements using JavaScript
• Allows for a flexible structure adaptable to different devices

By taking advantage of these benefits, you can have a cleaner, easier to maintain code with a clearer structure.

Use of divs

Divs are used to group and divide specific areas of your site. You can use them to structure headers, main content, sidebars, footers, among other elements.

Next, I'll show you an example of how to use divs to structure a header and main content:

[html]
<div id="»header»">
<h1>My Website</h1>
<nav>
<a href="/en/»/#inicio»">Home</a>
<a href="/en/»/#servicios»">Services</a>
<a href="/en/»/#contacto»">Contact</a>
</nav>
</div>

<div id="»contenido»">
<h2>Welcome to my website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur libero eu ultricies accumsan. Morbi scelerisque iaculis mollis.</p>
</div>
[/html]

Use of spans

Spans are primarily used to apply specific styles to individual pieces of text within a paragraph or element.

Here is an example of how to use spans to highlight certain words within a paragraph:

[html]
<p>Welcome to my <span class="»destacado»">website</span>. Here you will find information <span class="»destacado»">important</span> on different topics.</p>
[/html]

Conclusion

In short, divs and spans are fundamental elements for structuring and organising your website. Divs are used to group and divide specific areas, while spans allow you to apply styles to smaller elements within text.

I hope you found this tutorial helpful in understanding how to use divs and spans in HTML! Remember to always follow best coding practices and experiment with your own styling.

If you want to see more examples and further explore the use of divs and spans, I recommend you to visit the official documentation of the HTML and CSS.

Sources of information

• W3Schools - HTML div Element
• W3Schools - HTML span Element