How to turn HTML code cleaner and more detailed?-CodePudding

I have this HTML code and I am trying to write this by following the principles of semantic html elements. I am not totally sure if the HTML I have written below satisfies Semantic HTML or if I am missing any other tags to to make this more semantic and cleaner? Here is how the HTML will look like on a page: Example .

<div  id="x55">
    <div >        
        <div >           
            <div >
                <svg  aria-labelledby="svg-inline--fa-title-ChPQbKTpSuca" data-prefix="fas" data-icon="map" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="" aria-hidden="true" focusable="false"><path fill="currentColor" d="M384 476.1L192 421.2V35.93L384 90.79V476.1zM416 88.37L543.1 37.53C558.9 31.23 576 42.84 576 59.82V394.6C576 404.4 570 413.2 560.9 416.9L416 474.8V88.37zM15.09 95.13L160 37.17V423.6L32.91 474.5C17.15 480.8 0 469.2 0 452.2V117.4C0 107.6 5.975 98.78 15.09 95.13V95.13z"></path></svg><!-- <i title="Environment Icon" ></i> -->
                <h3>Our Planet is Huge</h3>
            </div>         
            <div >
                <p style="text-align: center;">Earth, our home planet, is a world unlike any other. The third planet from the sun, Earth is the only place in the known universe confirmed to host life. With a radius of 3,959 miles, Earth is the fifth largest planet in our solar system, and it's the only one known for sure to have liquid water on its surface.<br><br></p>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

As Mathew said, your code is semantically good but still you can do some changes to make it more semantic, as you will have only these codes on your page, you can use h1 instead of h3 and replace first div with section, second div with article, here is the updated code:

<section  id="x55">
    <article >        
        <div >           
            <div >
                <svg  aria-labelledby="svg-inline--fa-title-ChPQbKTpSuca" data-prefix="fas" data-icon="map" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="" aria-hidden="true" focusable="false"><path fill="currentColor" d="M384 476.1L192 421.2V35.93L384 90.79V476.1zM416 88.37L543.1 37.53C558.9 31.23 576 42.84 576 59.82V394.6C576 404.4 570 413.2 560.9 416.9L416 474.8V88.37zM15.09 95.13L160 37.17V423.6L32.91 474.5C17.15 480.8 0 469.2 0 452.2V117.4C0 107.6 5.975 98.78 15.09 95.13V95.13z"></path></svg><!-- <i title="Environment Icon" ></i> -->
                <h1>Our Planet is Huge</h1>
            </div>         
            <div >
                <p style="text-align: center; margin-bottom: 1.5em;">Earth, our home planet, is a world unlike any other. The third planet from the sun, Earth is the only place in the known universe confirmed to host life. With a radius of 3,959 miles, Earth is the fifth largest planet in our solar system, and it's the only one known for sure to have liquid water on its surface.</p>
            </div>
        </div>
    </article>
</section>

CodePudding user response：

I would suggest making your class names a bit more condensed and 'less-scattered', if you will; for example, , , and -- something along those lines. That way, it will be easier for you to remember what it is (literally!) when you look back at it later on. I'm not sure why <div > is there; I would delete it since it's not doing anything. Also, it is a good idea to run your code through the W3C Validator at https://validator.w3.org/. It picked up an error:

Error: The aria-labelledby attribute must point to an element in the same document.

You should probably be using <h1> instead of jumping straight to <h3>. Also, your <p> tags are empty. Try using a <div> or <span> instead. For future reference, try to avoid <br>, if possible, and use CSS to make the line breaks. Where you added style="text-align: center;, I would be putting that in a separate CSS document instead of inline CSS.