Uncovering HTML Semantics

Just like I imagine many people reading this may be feeling, coding is very intimidating. However, despite being a beginner myself, I’ve learned that when you start peeling back the layers, it’s not as scary as we may think.
For starters, one of the most important things to understand about coding is HTML semantics.

Semantic elements are elements that hold meaning. In HTML, there are non-semantic elements that include: <div> and <span>, and then there are semantic elements such as: <article>, <form>, <table>. The difference is that the semantic elements tell you exactly what you’re looking at, while with the non-semantic elements its not so clear.

Here are some more semantic elements that are used in HTML:

• <article>

• <aside>

• <details>

• <figcaption>

• <figure>

• <footer>

• <header>

• <main>

• <mark>

• <nav>

• <section>

• <summary>

• <time>

Each of these are self-explanatory in that they explain the type of content they’re representing. For example, <header> code would look something like this:

<article>
<header>
<h1>Vanessa Blasi’s Test Header</h1>
<p>Test heading paragraph </p>
</header>
<p>Test Paragraph</p>
</article>

Going even further, I tested out the HTML semantic “<header>” on Dreamweaver’s split screen view. Below you can see the coding on the bottom of the page that results in the website at the top of the page.

Altogether, understanding HTML semantics is very important because it allows us to note the difference between certain tags we will encounter. The more familiar we are with HTML semantics, the easier it will be to become an expert at coding.