Question about the html structure

parmaster · August 7, 2024, 3:57pm

Hi!

I had a look around the premium themes, and looked at the structure of a page at CleanSky, for example.

Among other things, I saw the following html structure there, and wondered whether this is the “default” html structure and whether I’ve been doing it wrong all this time.
E.g. directly under the navbar is main, and in it many sections, in it divs, etc.
See picture:

All sections are in main.

In my case there is a section directly under the navbar, in it a row with columns, in it directly images.
See picture:
struct-my

Am I doing it wrong, or does it not matter?

Thank you in advance!

Kind regards!

Alex

parmaster · August 8, 2024, 4:53pm

Has no one an answer?

printninja · August 8, 2024, 5:28pm

<main> is what’s known as a “semantic tag.” It basically helps search engines better understand your website. This info may help you…

HTML5 Semantic Tags

HTML5 semantic tags belong to the latest HTML standard and are necessary to help Google and other search engines better understand a page’s content.

10 Most Important Meta Tags You Need to Know for SEO

Title tags are placed in the ‘head’ of your webpage and are meant to provide a clear and comprehensive idea of what the page is all about.

HTML5 Tags Examples

There are a lot of HTML5 tags widely used today by SEO pros. If you take a closer look at these tags, you’ll see that their names repeat the most common elements found on any page, such as videos, menus, etc.

So here they are (most of them):

<article> — Defines a big and meaningful piece of content (an article, a forum post, etc.) that goes as a standalone unit.
<audio> — Shows an embedded sound or audio stream.
<details> — Describes a widget from which the user can obtain additional information or controls on-demand.
<dialog> — Defines a dialog box or a subwindow a user can interact with in case of necessity.
<embed> — Embeds a piece of multimedia content like videos, sounds, or any external apps.
<footer> — Defines the content of the footer of the page, document, or section.
<header> — Defines the content of the header section of the page, document, or section.
<main> — Defines the most important and meaningful part of the page’s content or of the <article> ( can be placed inside the section).
<nav> — Defines a page section with navigation links.
<picture> — Defines a container for multiple image sources.
<source> — Shows alternative sources for the embedded media elements like <audio> or <video>.
<summary> — Along with the <details>, this element provides a summary visible to the user.
<svg> — Embeds an SVG file in an HTML document.
<time> — Encodes dates and times (birthdays, events, meetings, etc.) in a machine-readable format.
<video> — Embeds video content in an HTML document without requiring any additional plugin to play a video.

Best SEO Practices:

The truth is that HTML5 tags replace neverending <div>s all of us know and keep using these days.

Still, HTML5 attributes may help your content index faster and rank better, as Google clearly sees and understands what is an <article>, what is a <video>, and where to find a set of navigation links <nav>.

That’s why the only best practice related to HTML5 tags is actually to use them on your pages and apply them correctly — a specific tag to a specific part of content.

Do not try to cheat and mark text content with a <video> tag — Google will not like this.

My personal experience is that Google doesn’t seem to place a huge amount of SEO weight on most of the semantic HTML tags (or their omission.) They’re just one of around 200 different ranking factors Google uses. Of course, if you do use them, you certainly should use them correctly. But I seriously doubt your website will take much of an SEO hit just because you leave out a <main> tag or <article> tag. At least it hasn’t made much difference to my websites.

The really important tags in terms of SEO are the title, description and headings.

parmaster · August 8, 2024, 6:05pm

Thank you!

So that means I don’t need “main”, but I can use it for SEO?

And, do I need divs inside a section when there are only two images, or just text?

printninja · August 8, 2024, 9:59pm

No, you don’t need to use the div component at all if the components you are adding (like images or text) can be placed in the parent component without them. A typical structure page structure might look like this…

As you can see in the HTML, the Container, Row, and Columns are all <div> elements with CSS classes that contain the rules that give them the characteristics of Bootstrap containers, rows and columns. Without those classes, the would just be ordinary <div> elements.

There are many HTML tags I’ve never bothered with (like <main>, <article>, <picture>) and I don’t think it’s hurt my website’s ability to rank first. It definitely doesn’t affect the SEO score on Lighthouse.

kuligaposten · August 8, 2024, 10:49pm

Creating an accessible HTML structure involves several best practices, including using semantic HTML elements, providing alternative text for images, ensuring keyboard navigability, and more. Here’s a basic HTML body structure that follows these principles:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Accessible Web Page</title>
	<link rel="stylesheet" href="styles.css"> <!-- Link to CSS file -->
</head>
<body>
	<header>
		<nav aria-label="Main navigation">
			<ul>
				<li><a href="#home">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#services">Services</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</nav>
	</header>
	
	<main>
		<section id="home" tabindex="-1">
			<h1>Welcome to Our Website</h1>
			<p>This is an accessible web page example.</p>
			<img src="welcome.jpg" alt="Welcome image" width="600" height="400" />
		</section>

		<section id="about" tabindex="-1">
			<h2>About Us</h2>
			<p>Learn more about our mission and values.</p>
			<img src="about-us.jpg" alt="About us image" width="600" height="400" />
		</section>

		<section id="services" tabindex="-1">
			<h2>Our Services</h2>
			<article>
				<h3>Service 1</h3>
				<p>Description of service 1.</p>
				<img src="service1.jpg" alt="Service 1 image" width="600" height="400" />
			</article>
			<article>
				<h3>Service 2</h3>
				<p>Description of service 2.</p>
				<img src="service2.jpg" alt="Service 2 image" width="600" height="400" />
			</article>
		</section>

		<section id="contact" tabindex="-1">
			<h2>Contact Us</h2>
			<form action="submit_form" method="post">
				<div>
					<label for="name">Name:</label>
					<input type="text" id="name" name="name" required>
				</div>
				<div>
					<label for="email">Email:</label>
					<input type="email" id="email" name="email" required>
				</div>
				<div>
					<label for="message">Message:</label>
					<textarea id="message" name="message" required></textarea>
				</div>
				<button type="submit">Submit</button>
			</form>
		</section>
	</main>
	
	<footer>
		<p>&copy; 2024 Your Company Name. All rights reserved.</p>
	</footer>

	<script src="scripts.js"></script> <!-- Link to JavaScript file -->
</body>
</html>

Key Accessibility Features:

Semantic HTML Elements: Using elements like <header>, <nav>, <main>, <section>, and <footer> to define the structure of the page.
Accessible Navigation: The element with aria-label provides a label for screen readers, and the <ul> list ensures a logical structure.
Keyboard Navigation: The tabindex=“-1” on sections allows users to navigate directly to sections using skip links or other methods.
Form Accessibility: The <label> elements are associated with their corresponding form controls using the for attribute, ensuring that screen readers can properly read them.
Descriptive Links: Ensure link text is descriptive enough to be understood out of context (e.g., “Learn more about our mission and values” instead of just “Learn more”).

Notes on Image Accessibility:

Width and Height: The width and height attributes are specified in pixels rather than CSS values like percentages, ensuring the aspect ratio is preserved and the layout doesn’t shift during page load.
Alt Text: The alt attribute is provided to describe the content of the image, which is crucial for screen reader users.

By following these practices, you can create a foundation for an accessible and user-friendly website.

parmaster · August 9, 2024, 2:40pm

Thank you for your replies!

Now I know how to do it properly!