15 bugs or tips in HTML and CSS

1. HTML online

You can check the HTML code on the Internet, for example, through the jsfiddle.net service, in which CSS and JavaScript can also be used.

The result of the code can be saved and shared with other users.

2. W3C Validator

It is recommended to check the HTML and CSS of the site through the service validator.w3.org. This service will scan the code and display errors, for example:

  • tag not closed;
  • not recommended characters in links;
  • not recommended tag used;
  • required attribute is not specified;
  • and other.

3. Markup in UTF-8 format

You need to make sure that the file encoding is set to UTF-8 (without BOM). Each text editor sets the layout in its own way.

The file in the UTF-8 format allows using non-standard symbols (symbols of different languages, currency sign and others).

It is also recommended to specify the UTF-8 encoding in the meta tag, which tells the browser in which encoding to display the current page.

<meta charset="utf-8">

4. Same id for multiple items

The value of the id attribute in the HTML code should not be repeated.

<!-- wrong -->
<div id="block"></div>
<div id="block"></div>

<!-- right -->
<div id="block-1"></div>
<div id="block-2"></div>

5. Site language

In the <html> tag it is recommended to specify the site language.

<html lang="ru">

This attribute tells browsers what language to use some tags for. For example, the <q> tag will display quotes for the specified language.

<html lang="ru">
<q>Цитата</q> <!-- «Cite» -->

<html>
<q>Цитата</q> <!-- "Cite" -->

Also, this attribute allows you to determine the search engines in what language the site works.

6. Clearfix

When using float: left, elements are displayed incorrectly, and to correct their output, use "clearfix". The code below shows an example of how to properly use this class.

<!-- wrong -->
<div>
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div class="clearfix"></div>
</div>

<!-- right -->
<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>

Read more about clearfix

7. Sprites

It is recommended to combine several small pictures into one file (such a file is called a sprite). This will reduce the number of requests to the site and improve page loading speed.

Sprite example

Sprite

More about sprites

8. Styles in HTML

HTML is used to display information (text, images). Content design (resize, color, font) occurs in CSS.

<!-- wrong -->
<p style="color: red">Error in the code</p>

<!-- right -->
<p class="error">Error in the code</p>

9. Browser extensions for site markup

Chrome, Opera and Firefox browsers have a PerfectPixel plugin that loads a picture on top of the current page. You can move the picture and change its transparency. This way you can easily see the difference between the design and markup of the site.

Link on PerfectPixel (Chrome): chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

Link on PerfectPixel (Opera): addons.opera.com/ru/extensions/details/perfectpixel-by-welldonecode/

Link on PerfectPixel (Firefox): addons.mozilla.org/ru/firefox/addon/perfectpixel/

10. Menu

The menu is recommended to arrange as a list.

<!-- wrong -->
<p><a href="#">Main</a> <a href="#">News</a> <a href="#">About</a></p>

<!-- right -->
<ul>
    <li><a href="#">Main</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">About</a></li>
</ul>

11. Pixels in fractional values

Some browsers allow you to specify pixels in fractional values, for example “1.5px”. But this is not supported in all browsers, instead of “1.5px” it is better to use “1.5em”.

p {
    /* wrong */
    letter-spacing: 1.5px;

    /* right */
    letter-spacing: .005em;
}

12. Missed alt in pictures

In the tags <img> it is necessary to specify the alt attribute (can be empty).

<!-- wrong -->
<img src="pic.jpg">

<!-- right -->
<img src="pic.jpg" alt="Image">
<img src="pic.jpg" alt="">

13. Using !important

It is not recommended to use !important in CSS, because this property will be difficult to override.

.red {
    color: red !important;
}

/* will not apply, because for ".red" above is used !important */
.modal .red {
    color: #800;
}

/* for redefinition will have to use another !important */
.modal .red {
    color: #800 !important; 
}

Similar to the id attribute. In CSS it is recommended to use tags or classes, since the properties specified by id will also be difficult to override.

#modal .title {
    color: #333;
}

/* will not apply, because ".title" above is specified through the id attribute #modal */
.dark .title {
    color: #fff;
}

/* for redefinition you will have to use another id #modal */
#modal .dark .title {
    color: #fff; 
}

14. <H1> tags

On the page there should be only one title in the <h1> tag. Basically, this tag is the name of the page.

15. HTML — programming language

Some HTML beginners think that HTML is a programming language. HTML is not a programming language, it can be compared to Microsoft Word. For example, to make the text bold, in Word, you must click on the button, and in HTML you need to write the code, i.e. HTML is simply a tool that adds text, images, tables, and other elements.