How to make HTML code more readable?

Question

I have 5 buttons that are coded on 1 single line. This allows me to squeeze them next to each other without any spaces in between, which is what I want.

However, if I move the code for each button down one line, there are spaces in between the buttons, which is what I don't want.

Here is the sample code for 2 buttons:

<button id="home" type="button">Home</button><button id="save" type="button">Save
</button><button id="create" type="button">Create</button>

Thanks

@T.J.Crowder, did he break single-responsibility-question pattern? one question in a question is not part of [how to ask](http://stackoverflow.com/questions/how-to-ask).. cmiiw — Yuliam Chandra, Jul 10 '14 at 07:04
Personally, I minify my HTML on-the-fly in PHP, so I can write with as much space as I want, it doesn't matter. — Niet the Dark Absol, Jul 10 '14 at 08:17

score 2 · Answer 1 · answered Jul 10 '14 at 07:04

You could put the newline character inside your tags:

<button>btn1</button
><button>btn2</button
><button>btn3</button>

You can comment out the space between your tags so it's as if the space wasn't even there.

<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>

As for the CSS, CSS lets you define attributes for multiple classes/ids/etc at the same time.

#save, #home {
    margin-top: 20px;
    height: 40px;
    width: 240px;
}
#home { margin-left: 40px; }

score 1 · Answer 2 · answered Jul 10 '14 at 07:02

You can use the "class" attribute of the input element to define styling options which are influencing all the buttons that got the class. Let me show you:

<button id="home" type="button" class="btn-style">Home</button>
<button id="save" type="button" class="btn-style">Save</button>
<button id="create" type="button" class="btn-style">Create</button>

And in your css you have the stylings:

.btn-style{
//your css here
}

To have no space between the buttons you simply use CSS styling. But for that make, search at google. You may need styling attributes like "display, margin, float...".

Greetz

Stuyvenstein · Answer 3 · 2014-07-10T07:10:06.217

1

Well, it's pretty irritating that HTML does this but the way I solve it is as follows:

<button>btn1</button
><button>btn2</button
><button>btn3</button
><button>btn4</button
><button>btn5</button>

Or as other users are also suggesting, you can insert comments in-between:

<button>btn1</button><!--
--><button>btn2</button><!--
--><button>btn3</button><!--
--><button>btn4</button><!--
--><button>btn5</button>

edited Jul 10 '14 at 07:10

answered Jul 10 '14 at 07:02

Stuyvenstein

2,340
1
27
33

Zander · Accepted Answer · 2014-07-10T07:58:17.910

1

Create your buttons with a class:

<button class="button" id="save">Save</button>
<button class="button" id="new">New</button>
<button class="button" id="load">Load</button>

Create a class in the CSS file:

.button {
    display: block;
    float: left;
    width: 100px; /*For example*/
}

That will make your buttons stick together without spaces, and HTML will be more readable.

EDIT: As you use an ID, add that ID in your CSS class with a margin-left.

/* in this example, the button to the mostleft is #save, so...*/
#save {
    margin-left: 10px;
}

Here is the demo

edited Jul 10 '14 at 07:58

answered Jul 10 '14 at 07:07

Zander

1,076
1
9
23

quick question, if I wanted to just pad the left-most button to the right some pixels, how would I do that in the class without affecting the padding for all the buttons? – Pangu Jul 10 '14 at 07:16

score 0 · Answer 5 · answered Jul 10 '14 at 07:02

For your problem of spaces between inline-elements such as <button>, try to write the code like that :

<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>

score 0 · Answer 6 · answered Jul 10 '14 at 07:02

0

Apply common css by button selector and any specific styles by their ids

button{
    margin-top: 20px;
    height: 40px;
    width: 240px;
}
#home{
    margin-left: 40px;
}
#save{

}

answered Jul 10 '14 at 07:02

JayKandari

1,228
4
16
33

How to make HTML code more readable?

6 Answers6