CodeNewbie Community

loading...
Cover image for 15 beginner only HTML and CSS mistakes

15 beginner only HTML and CSS mistakes

Rahul
Developer and Blogger
Originally published at rahulism.tech ・4 min read

I have rounded up some of the HTML and CSS Mistakes I've made and you don't have to. These are some beginner mistakes, don't judge me😂.


HTML MISTAKES

No matter what stack or framework you use, it all compiled to HTML in your browser. Therefore, it's important to make sure it's right! This list highlights top HTML mistake and how you can avoid them.

  1. Missing Doctype: The doctype declaration is not a tag but it informs the browser about the document type to expect. Every HTML page must have a doctype.
<!-- WRONG-->

<html>
  <head>
    <title>
      Title
    </title>
  </head> 

<!-- CORRECT -->
<!DOCTYPE html>
<html>
  <head>
    <title>
      Title
    </title>
  </head> 

Enter fullscreen mode Exit fullscreen mode
  1. No closing tags: Apart from a few exceptions, most HTML tags need to have an opening and closing tag to work properly. Therefore, it's best practice to have closing tags for all HTML elements.
<!-- WRONG-->
<section>
  <ul>
    <li>
    <li>

<!-- CORRECT -->
<section>
  <ul>
    <li> </li>
    <li> </li>
  </ul>
<section>    
Enter fullscreen mode Exit fullscreen mode
  1. Missing alt attributes: All images should have an alt attribute to describe them for SEO and assistive tech. Any decorational images should have empty alt attributes since they don't provide information.
<!-- WRONG -->
<img src="logo.svg" />

<article>
  <img src="logo-front">
  <h1>Coding is tough</h1>
</article>  

<!--CORRECT-->
<img src="logo.svg">

<article alt="" />
  <img src="logo-front" alt="Photo of coding guy from unsplash">
  <h1>Coding is tough</h1>
</article>  
Enter fullscreen mode Exit fullscreen mode
  1. Incorrect architecture: Placing block element inside inline elements is incorrect architecture. For semantically correct HTML any inline elements should be nested inside block elements.
<!--WRONG-->

<a href="/article">
 <h1>Title</h1>
</a> 

<!--correct-->
<h1>
  <a href="/article">
   Title
  </a>
</h1>
Enter fullscreen mode Exit fullscreen mode
  1. <b> and <i> tags: While <b> and <i> will make text appear bold and italic respectively, they are only a visual aid. Use <strong> and <em> tags instead, so they are interpreted as important and emphasized by the browser.
<!--WRONG-->
<p>
  lorem ipsum <b>dolor sit</b> amet.
  lala lalal lala <i>lala</i> lala.
</p>
<!--CORRECT-->
<p>
  lorem ipsum <strong>dolor sit</strong> amet.
  lala lalal lala <em>lala</em> lala.
</p>
Enter fullscreen mode Exit fullscreen mode
  1. Incorrect use of ID: An ID is a unique identifier so you can't apply the same ID to multiple elements on the same page. That's not the case for classes through, so use classes for styling instead of IDs.
<!--WRONG-->
<article id="card-first">
  <h1>First Article</h1>
</article> 

<article id="card-second">
  <h1>Second Article</h1>
</article> 

<article id="card-third">
  <h1>Third Article</h1>
</article> 

<!--CORRECT-->
<article id="card-first" class="card">
  <h1>First Article</h1>
</article> 

<article class="card-second">
  <h1>Second Article</h1>
</article> 

<article class="card-third">
  <h1>Third Article</h1>
</article> 
Enter fullscreen mode Exit fullscreen mode
  1. Missing NoScript: If you're using a JavaScript framework, you must include a noscript tag to display something if the user has disabled JavaScript. Otherwise, they will see a blank page.
<script>
  // YOUR JAVASCRIPT CODE HERE
</script>

<noscript>
  This website requires JavaScript to function correctly😉. 
</noscript>
Enter fullscreen mode Exit fullscreen mode

CSS MISTAKES

So here we go again😂

Not using CSS reset: Browsers have different defaults so use a CSS reset to bring them all in line.

* {
    box-sizing: border-box;
}

body {
    margin: 0; 
}

button, 
input, 
select, 
textarea {
    font-family: inherit; 
    font-size: 100%;
    line-height: 1.15;
    margin: 0; 
}
Enter fullscreen mode Exit fullscreen mode

Over qualifying selectors: Long selectors are difficult to maintain and harm performance.

/* WRONG */
main section article h2 {
    color: blue;
}

/* CORRECT */
.article__title {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Desktop First: Work from smallest to largest design - not the other way around.


/* WRONG */
.containter {
    width: 980px;
    padding: 1em; 
}

@media (max-width: 979px) {
    .container {
        width 100%:
        padding: 0.5em; 
    }
}

/*CORRECT */

.container{
    width: 100%;
    max-width: 980px;
    padding: 0.5em; 
}

@media (max-width: 980px) {
    .container {
        padding: 1em; 
    }
}
Enter fullscreen mode Exit fullscreen mode

Using absolute units: Use relative wherever possible (%, rem, fr, vw, vh) for scalable fluid layouts.

/* WRONG */
p {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
}

/* WRONG */
p {
    font-size: 1em;
    line-height: 1.25em;
    margin-bottom: 0..5rem;
}
Enter fullscreen mode Exit fullscreen mode

No naming conventions: Use a convention (like BEM) to help with class naming and organizations. Read more about BEM Methadology.

/*WRONG*/
.title {
    font-size: 2rem;
}
.another-title {
    font-size: 1.5rem;
}
/*CORRECT*/
.hero__title {
    font-size: 2rem;
}
.card__title {
    font-size: 1.5rem;
}
Enter fullscreen mode Exit fullscreen mode

CSS before HTML: Write semantic and HTML with the correct content hierarchy before thinking of styles.

Forgetting Accessibility: Check your colours are accessible and don't completely remove the focus styles.

/*WRONG*/
*:focus {
    outline: none;
}

/*correct*/
a:focus {
    outline: none; 
    background-color: #EE82EE;
}
Enter fullscreen mode Exit fullscreen mode

Repetitive code: Break up repetitive CSS into smaller chunks that can be reused throughout your site.

/*WRONG*/

.article {
    background-color: #fff;
    border-radius: 1rem;
    width: 100%; 
    max-width: 540px;
}

.sidebar {
    background-color: #fff;
    border-radius: 1rem;
    width: 40%; 
}

/*CORRECT*/

.article {
    width: 100%; 
    max-width: 540px;
}

.sidebar {
    width: 40%
}

.card {
    background-color: #fff;
    border-radius: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Removal.AI - [SPONSOR]

Remove background from multiple images in a single upload straight to your desktop using Bulk Photo Background Remover for Windows.

  • ✅ Drag & Drop Multiple Images
  • ✅ Optimize Product Images
  • ✅ Select Your Background
  • ✅ Set Your Output Size
  • ✅ Exceptional Results

Visit -> Removal AI

Discussion (0)