Which HTML element should my hero image be inside?-CodePudding

I have a question regarding which HTML element would be most suitable to have my hero image class inside,

currently, my code looks like this:

<main>
    <div ></div>
    <section >

The image is below the header but above the text content on the webpage so is it possible that div is the best option here? I am trying to make my code as semantic as possible.

Thank you!

CodePudding user response：

The most semantic way would be to directly use <img> tag, instead of <div>.

If it is not possible to use <img>, then you can use <div> for big images, or <span> for small inline images.

CodePudding user response：

in these cases, since you need a wrapper for your image in order to add some styles to it (centering, rounding it's corners, and things like that...) I would suggest using figure element. this way you wont going to need to wrapp it inside of a section or div in order to give some custom styles for your images parent and more importantly, it's semantic by default.