Html Basics Elements Syntax And Common Uses

A short intro to the core fundamentals of HTML as a markup language

HTML is relatively easy to learn and use. As a markup “language” it has a small, limited number of elements (tags) that are commonly used by web designers and developers.

HTML elements are the building blocks of HTML pages.
– Wikipedia

The Anatomy of an HTML Element or “Tag”

<tagname>content goes here</tagname>

<tagname attribute=”value” />

“Well-formed Semantic Markup”

The most important HTML rule to remember

If there is one guiding principle to keep in the back of your mind when writing HTML, it should be to always write well-formed semantic markup.

Be sure to open and close all tags (well-formed)
Be sure to use the correct HTML element for each context (semantic)

A well-formed element is is one that is either a) opened and subsequently closed, or b) an empty element, which in that case must be terminated;
– Wikipedia

Semantic HTML is the use of is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.
– Wikipedia

List of the Most Commonly Used HTML Tags

If you are going to memorize any HTML elements, start with these:

<!doctype>
<html>
<head>
<meta>
<title>
<link>
<body>
<h1> - <h6>
<p>
<a>
<strong>
<em>
<ul>, <ol>, & <li>
<img>
<div>
<span>
<form>, <input>, & <textarea>
<script>

Here’s an even shorter list of HTML5 semantic elements that are commonly used:

<header>
<footer>
<nav>
<main>
<section>
<article>

There are others, along with a full list at W3Schools, but for now the above are more than enough to get started.

Web Page with Commonly Used HTML Elements

[gist https://gist.github.com/kccnma/15ef80c933568116c94e4eef5ef3c42e /]

Note how the document is divided into two main sections: the head and the body.

Summary

HTML is easier to learn than most “coding” languages, partly because there are fewer elements and attributes to remember. If there is one rule to remember, it is to always use well-formed semantic markup when writing html.

Go Further

Read about Web Standards and the W3C (World Wide Web Consortium).
Try coding a simple HTML web page.

Author Notes

This was written specifically to help aspiring web designers as they aim to:

Learn the basic elements, syntax, and common uses of HTML Markup