What are HTML Semantics?
Coding HTML can be a very confusing process for many, especially for those who don't know much about coding. HTML is the standard markup language for creating web pages. There are different types of HTML that build your website, including Semantic HTML. Semantics are what build the foundation of your web page.
Defining HTML Semantics
In the article, "Semantic HTML: What It Is and How to Use It Correctly," by Vlado Pavlik, HTML semantics are tags that convey the meaning of the content within them. They help define the role and importance of each part of the page. On the flip side, non-semantic HTML use tags that don't convey any meaning, but act as placeholders.
Examples of HTML semantics for the structure include:
- <header>: The header tag defines content that should be considered the introductory information of a page or section
- <nav>: The navigation tag is used for navigation links. It can be nested within the <header> tag, but secondary navigation <nav> tags are also commonly used elsewhere on the page.
- <main>: This tag contains the main content (also called the body) of a page. There should be only one tag per page.
- <article>: The article tag defines content that could stand independently of the page or site it’s on. It does not necessarily mean a “blog post.” Think of it more as “an article of clothing”—a self-contained item that can be used in various contexts.
- <section>: Using <section> is a way of grouping nearby content of a similar theme. A section tag differs from an article tag. It isn’t necessarily self-contained, but it forms part of something else.
- <aside>: An aside element defines content that’s less important. It’s often used for sidebars—areas that add complementary but nonessential information.
- <footer>: You use <footer> at the bottom of a page. It usually includes contact information, copyright information, and some site navigation.
Examples of HTML semantics for text include:
- <h1> (heading): The H1 tag marks the top level heading. There’s usually only one H1 heading per page.
- <h2> to <h6> (subheadings): The subheadings of various levels of importance. There can be multiple headings of the same level on a single page.
- <p> (paragraph): A standalone paragraph of text.
- <a> (anchor): Used to mark up a hyperlink from one page to another.
- <ol> (ordered list): A list of items that are displayed in a particular order, starting with bullet points. One <li> (list item) tag contains a single item in the list.
- <ul> (unordered list): A list of items that do not need to be displayed in a particular order, starting with ordinal numbers. One <li> (list item) tag contains a single item of the list.
- <q> / <blockquote>: A quotation of the text. Use <blockquote> for long, multi-line quotations and <q> for shorter, inline quotations.
- <em> (emphasis): Used for text that should be emphasized.
- <strong> (strong emphasis): Used for text that should be strongly emphasized.
- <code>: A block of computer code.
Semantics on a page
Most website builders use semantic HTML to create their pages. Below is an example of my personal HTML code.
Here, you can see how much HTML is involved to make a basic web page. The first tag that's labeled <html lang="eng"> indicates the code is in English. From there, other tags included in the above examples are the headings, body, paragraphs and footer. The side by side imaging shows how code is translated onto a web page.
Here is an example from a more complex website:
Despite the complexity, the same foundation applies with HTML semantics such as the header and main content.
Conclusion
Learning the basics of HTML and semantics will help further your knowledge of website building. As you take small steps in learning the language, your coding and HTML skills will refine to build appealing and functional websites!