DEV Community

Cover image for What is HTML and HTML semantic elements
Abdurrahman Adewusi
Abdurrahman Adewusi

Posted on

What is HTML and HTML semantic elements

Not too long ago, I had no idea what HTML was. It was just one of those tech terms I’d heard people mention, but I couldn’t explain it if my life depended on it. Fast forward to now — I’ve learned a few things, and I’m still on the journey of figuring it all out. Along the way, I’ve discovered not just what HTML is, and some other things it entails.
Now, What exactly is HTML?
HTML stands for HyperText Markup Language. It’s the standard language used to create and structure content on the web. The “HyperText” part means it can link to other documents or pages, and the “Markup” part means it uses special tags to tell the browser how to arrange and display the content. It is often assisted by web technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. The collaboration of these three frontend web technologies and some other technologies make up the builders of a web page.

Over the years since the early 90's, HTML has been evolving but the latest update/version of HTML; HTML 5 has come in with some features that makes developers' works more defined and descriptive. Those features are called The HTML Semantic Elements
What are HTML Semantic Elements?
Unlike the conventional method of using div tags to division contents on the web page, HTML semantic elements are tags that clearly describe their purpose and the type of content they hold — both to web browsers and to developers reading the code. They are of great benefits as they have improved accessibility, understandability of search engines and also readability by other web developers. For example, the nav tag tells the browser explicitly that 'this is where the navigations link live'. This latest version of HTML has saved developers from the use of using loads of classes and ids which make codes look bulky and confusing. Below are some of the most common HTML 5 semantic elements and their uses:

  1. header- Represents the top section of a page or a section, usually containing a logo, heading, or navigation.
  2. nav- Defines a section containing navigation links.
  3. main- Represents the main content of the document (unique, not repeated on the page).
  4. section- Groups related content into a thematic section.
  5. article- Represents an independent, self-contained piece of content like a blog post or news article.
  6. aside- Contains content that is tangentially related, like sidebars or callout boxes.
  7. footer- Represents the bottom section of a page or section, often containing copyright or contact info.

HTML is the backbone of every webpage, and semantic elements are what give that backbone meaning. If a webpage is a body, HTML is the skeleton holding everything together. But without labels for each bone, things can get confusing. Semantic elements are like name tags for your HTML, telling both browsers and developers exactly what each part is. They make codes easier to read, more accessible to users, and better understood by search engines. Whether you’re just starting your web development journey or refining your skills, making semantic HTML a habit will set a strong foundation for everything you build next.

Top comments (0)