Menu
Ofcourse indenting is need on our markup , but that really matter the way the browser render.?
I have an simple structure with label , span and input. The middle one without indent got a alignment change , why this is happening ?
<label class="field-row">
<span class="label-text" >Email</span>
<input type="email" />
</label>
<label class="field-row">
<span class="label-text" >Email</span><input type="email" />
</label>
Demo issue in firefox and chrome
795
When you are writing HTML (or any other programming language), well-written code follows consistent indentation and spacing patterns. In some languages, indentation and spacing are required for the code to function properly.
This document is discussing indenting HTML code and not how to indent text on a web page. No. HTML code does not need to be indented, and all browsers and search engines ignore indentation and extra spacing. However, for any human reader it is a good idea to indent your text because it makes...
The first debate is on whether we should use spaces or tabs to indent our code. The second is on whether our indents should equal 2 spaces or 4 spaces. At Epicodus, we indent our code 2 spaces and use tabs instead of spaces for indentation.
Spacing and indentation should be consistent throughout your code. Many developers choose to use 4-space or 2-space indentation. In HTML, each nested tag should be indented exactly once inside of its parent tag.
Whitespace does make a difference in page rendering, howevera string of whitespaces longer than one will just be rendered as one whitespace, so this (line break)
<label class="field-row">
<span class="label-text" >Email</span>
<input type="email" />
</label>
and this (no line break, but a whitespace between the span and input)
<label class="field-row">
<span class="label-text" >Email</span> <input type="email" />
</label>
will be rendered the same, while this (no whitespace)
<label class="field-row">
<span class="label-text" >Email</span><input type="email" />
</label>
will be rendered without that extra space in between the elements.
178
Whitespace makes a difference in the rendering of inline elements, but everything beyond a single one is always reduced to one whitespace.
This means, unless you use the tag <pre>, five white spaces get rendered just the same as a tab or fifty line breaks.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
