How can I conver html4-boxing style into html5-semantic boxing style?

I want convert html4-style boxing such as div, span into html5-style boxing such as header, article, section.

here is web template, but I don't know how I do...

This is sample site

<div class="bg-full-page bg-primary back-fixed">
<div class="mw-500 absolute-center">
  <div class="card color-dark animated zoomInDown animation-delay-5">
    <div class="card-body">
      <h1 class="color-primary">Login</h1>
      <form>
        <fieldset>
          <div class="form-group label-floating">
            <div class="input-group">
                <span class="input-group-addon">
                  <i class="zmdi zmdi-account"></i>
                </span>
              <label class="control-label" for="ms-form-user">Username</label>
              <input type="text" id="ms-form-user" class="form-control"> </div>
          </div>
          <div class="form-group label-floating">
            <div class="input-group">
                <span class="input-group-addon">
                  <i class="zmdi zmdi-lock"></i>
                </span>
              <label class="control-label" for="ms-form-pass">Password</label>
              <input type="password" id="ms-form-pass" class="form-control"> </div>
          </div>
          <div class="row ">
            <div class="col-md-6">
              <button class="btn btn-raised btn-primary btn-block">Login
                <i class="zmdi zmdi-long-arrow-right no-mr ml-1"></i>
              </button>
            </div>
            <div class="col-md-6">
              <button class="btn btn-primary btn-block">
                <i class="zmdi zmdi-account-add mr-1"></i> Sign Up</button>
            </div>
          </div>
        </fieldset>
      </form>
      <div class="text-center">
        <h3 class="color-dark">Login with</h3>
        <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-facebook">
          <i class="zmdi zmdi-facebook"></i> Facebook</a>
        <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-twitter">
          <i class="zmdi zmdi-twitter"></i> Twitter</a>
        <a href="javascript:void(0)" class="wave-effect-light btn btn-raised btn-google">
          <i class="zmdi zmdi-google"></i> Google</a>
      </div>
    </div>
  </div>
  <div class="text-center animated fadeInUp animation-delay-7">
    <a href="index.html" class="btn btn-white">
      <i class="zmdi zmdi-home"></i> Go Home</a>
    <a href="javascript:void(0)" class="btn btn-white">
      <i class="zmdi zmdi-key"></i> Recovery Pass</a>
  </div>
</div>

Above code is the html codes of sample site.