What is the best way to use these HTML tags?-CodePudding

I'm starting at web development and want to divide the content of one page in 2 columns, but I'm not sure if the following HTML semantics are correct.

<body>
<div >
<section>
<h2>One</h2>
<img ...>
</section>
<section>
<h2>Two</h2>
<img...>
</section>
</div>
<div >
<section>
<h2>Image related to those of the other div</h2>
<img...>
</section>
</div>
</body>

CodePudding user response：

In any case your page is missing an h1 tag, which is essential for semantics, SEO and accessibility!

The rest, for the described purpose of presenting some images, seems okay. You wouldn't necessarily have to use section tags, though – the h2 tags are enough to organize them as images with related headers. But if those parts of the page are really thematically different, sections are a good way to emphasize that.

CodePudding user response：

Welcome to the development community! Accomplishing something like this would require some CSS to display the columns like you're envisioning. Try checking out CSS flexbox. It allows you to create any kind of columns and rows you like based on the device viewing your website.

With the HTML portion, you're on the right track! We just need to wrap the image and it's description(or caption) inside a figure element for it to be syntactically correct. This method will also improve accessibility to people using screen readers.

We use a <figure> element with the <img> and a <figcaption> element inside of it. The <figcaption> element is literally a capture for the figure you're displaying. Here's a quick example:

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>