Space between elements - is this making the code cleaner?

user_847047 0
Viewed 50

This is example code, not an actual project I'm working on:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
<style>
div.infoguide {
width: 800px;
border: 2px;
height: auto;
}
div.mynews1 {
float: left;
padding: 5px;
background-color:yellow;
font-size: 14px;
width: 80px;
height: 600px;
}
div.mynews2 {
margin: 10px;
background-color: blue;
font-size: 20px;
color: white;
width:400px;
height: 600px;
}
</style>
 <title>Mypage</title>
</head>
<body>
<div class="infoguide">
This is the header
<div class="mynews1">
It works!
</div>
<div class="mynews2">
Good it worked
</div>
</div>
</div>
</body>
</html>

However, is it better practise in website design to leave spaces between the elements to avoid confusion when there's multiple <div> </div> elements, like this:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
<style>
div.infoguide {
width: 800px;
border: 2px;
height: auto;
}
div.mynews1 {
float: left;
padding: 5px;
background-color:yellow;
font-size: 14px;
width: 80px;
height: 600px;
}
div.mynews2 {
margin: 10px;
background-color: blue;
font-size: 20px;
color: white;
width:400px;
height: 600px;
}
</style>
 <title>Mypage</title>
</head>
<body>
<div class="infoguide">
This is the header

<div class="mynews1">
It works!
</div>

<div class="mynews2">
Good it worked
</div>

</div>
</div>
</body>
</html>

My basic question; how should I go about making code cleaner and easier to understand, especially when designing website templates for my projects?

reusability web-testing usability css html
1 Answers

Clean HTML code generally has indentation so that it is easy to tell which <div> matches with each </div>.

You can automatically format documents with online tools or some text editors such as VS Code.

I think the space around each inner div helps but that is just a matter of opinion.

This is how I would format the HTML for readability:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        div.infoguide {
            width: 800px;
            border: 2px;
            height: auto;
        }

        div.mynews1 {
            float: left;
            padding: 5px;
            background-color: yellow;
            font-size: 14px;
            width: 80px;
            height: 600px;
        }

        div.mynews2 {
            margin: 10px;
            background-color: blue;
            font-size: 20px;
            color: white;
            width: 400px;
            height: 600px;
        }
    </style>
    <title>Mypage</title>
</head>

<body>
    <div class="infoguide">
        This is the header

        <div class="mynews1">
            It works!
        </div>

        <div class="mynews2">
            Good it worked
        </div>

    </div>
</body>

</html>

user_116080640
Related