Simple landing page using Bootstrap

Question 1

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?

Question 2

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.

Question 3

In bootstrap, isn't a <div> necessary for a fluid container? Is there a way I can avoid using this?

Question 4

@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>.

score 2 · Accepted Answer · 2018-03-08 10:14:38Z

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.

In bootstrap, isn't a <div> necessary for a fluid container? Is there a way I can avoid using this?
@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>.

Stack Exchange Network

Simple landing page using Bootstrap

1 Answer 1

Character encoding

Be consistent

Valid HTML

Indentation

Semantics

Inline styles

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Simple landing page using Bootstrap

1 Answer 1

Character encoding

Be consistent

Valid HTML

Indentation

Semantics

Inline styles

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions