Branko Tomić

There’s more than one way to skin a web page

TLDR; There is no one correct way to create a web page. There are only more and less optimal ways.

If you are just starting out with learning HTML you might be overwhelmed with information. Tutorials are great and they give you a step-by-step guide through the process of building a web page.

However, tutorials can give you a false sense of “exactness” as if there is no other way to build the project you are building.

The truth is, web development (or any software development) is a series of micro decisions that you need to make to get to the finished product.

HTML is not a programming language.

It stands for “Hypertext Markup Language”.

It is a set of around 150 “words” the browser understands. Just like you can tell the same story using different words, the same applies to web development.

This is important because it gives you freedom to arrange these words in any way you see fit free from constraints of mechanics a typical programming language usually imposes on you as a developer.

Web browser

A web browser is incredibly forgiving when it comes to HTML and CSS. It will gobble up almost anything you can throw at it.

Create an .html file using any text editor and open that file with any browser and you are ready to play around with HTML.

An example

Knowing all of this, let me illustrate what we have covered so far with a few examples. Each snippet will produce the same result.

<div>
  <div>Hello there</div>
  <hr/>
  <div>Hello there again.</div>
</div>
<main>
  <span>Hello there</span>
  <hr/>
  <aside>Hello there again.</aside>
</main>
<section>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <span>Hello there</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr/>
  <div>Hello there again.</div>
</section>

Important note

Semantics, optimization and structure are important for a successful web product.

However, it is not something you want to stress about at the very beginning. Technically, you can build an entire web page using only <div> tags. It might not be a fun way of building a web page and certainly not good, but it is possible to do it.

Key takeaway

Starting out with learning HTML is quick and easy. You can dip your toes with a single .html file and some text inside of it.

I hope this helps you not to get discouraged in your pursuit of knowledge in web technologies.