1
\$\begingroup\$

I have written a simple landing page in Twitter Bootstrap. It works fine, I just want to know if my code is written in a "good-practice" way.

<!DOCTYPE html>
<html lang="en-US">
<head>

  <!-- Title and Logo -->
  <title>SigmaCubes - Home</title>
  <link href="favicon.ico" rel="shortcut icon" />

  <!-- Metadata -->
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="author" content="Julian Lachniet" />
  <meta name="description" content="Various HTML and JavaScript projects." />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

  <!-- Libraries -->
  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <script src="lib/jquery-3.3.1.min.js"></script>
  <script src="lib/popper.min.js"></script>
  <script src="lib/bootstrap.bundle.min.js"></script>

</head>
<body class="bg-light">
  <nav class="bg-dark navbar navbar-dark navbar-expand-sm">
    <a class="navbar-brand" href="#"><img src="img/logo.png" height="32px" /></a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CubeSolver</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
    </ul>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <img class="d-block img-fluid mx-auto" src="img/biglogo.png" style="max-height: 384px; margin: 32px" />
      </div>
    </div>
    <div class="row">
      <div class="col-12 h3 text-center">Various HTML and Javascript projects.</div>
    </div>
    <hr />
    <div class="row">
      <div class="col-12 h5 text-center">SigmaCubes.com is the best website on the internet, and the owner of CubeSolver.</div>
    </div>
  </div>
</body>
</html>

Any suggestions?

Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

Good start. I would like to add a few minor things:

Character encoding

As a good practice, the character encoding should be the first element of the head section - or at least it should come before the title element:

<meta charset="utf-8">
<title>SigmaCubes - Home</title>

In order for all browsers to recognize a declaration, it must be

  • Within the <head> element,
  • Before any elements that contain text, such as the <title> element, AND
  • Within the first 512 bytes of your document, including DOCTYPE and whitespace

From Google Code Archive doctype-mirror - MetaCharsetAttribute.wiki

Be consistent

In HTML5 void elements can have an optional / before the closing >. As it seems that you prefer to add this slash, use it everywhere and not only on some elements, like here:

<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="author" content="Julian Lachniet" />
<meta name="description" content="Various HTML and JavaScript projects." />

Here are some more information about this topic: HTML 5: Is it <br>, <br/>, or <br />?

Valid HTML

Images have a mandatory alt-attribute:

<img src="img/logo.png" height="32px" alt="Some description" />

You should add this attribute to all img elements. It will not only help people using screen readers to better understand your website, it might also improve SEO.

For more details, see Wikipedia: https://en.wikipedia.org/wiki/Alt_attribute.

Indentation

Try to indent elements, if possible. 

<a class="navbar-brand" href="#">
    <img src="img/logo.png" height="32px" />
</a>

… is easier to conceive as:

<a class="navbar-brand" href="#"><img src="img/logo.png" height="32px" /></a>

Semantics

Your main navigation looks fine. However, the section starting with <div class="container-fluid"> looks a bit like divitis.

Learn about HTML5 semantics and how to structure the content of your website. Here're some related articles on w3.org to get started:

Inline styles

Try to avoid inline styles. This might work for a small page like this, but will get complicated as your project grows.

<img class="d-block img-fluid mx-auto" src="img/biglogo.png" style="max-height: 384px; margin: 32px" />

Instead add a custom CSS file in addition to Bootstrap, where you expand existing styles and add new classes as well.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ In bootstrap, isn't a <div> necessary for a fluid container? Is there a way I can avoid using this? \$\endgroup\$
    – Julian Lachniet
    Mar 8, 2018 at 13:31
  • \$\begingroup\$ @JulianLachniet Bootstrap classes are not bound to HTML elements. That means, you can easily do: <article class="container-fluid"></article>. This can save a lot of wrapper that will only be there for styling. But what I actually meant, were the elements inside this container: <div class="col-12 h3 text-center"></div> could be a heading <h1 class="col-12 h3 text-center"></h1> or <div class="col-12 h5 text-center"></div> could be a paragraph <p class="col-12 h5 text-center"></p>. \$\endgroup\$
    – insertusernamehere
    Mar 8, 2018 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.