{"id":19322,"date":"2020-07-11T01:35:03","date_gmt":"2020-07-11T08:35:03","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19322"},"modified":"2021-01-04T05:36:48","modified_gmt":"2021-01-04T13:36:48","slug":"semantic-html-symbols","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/semantic-html-symbols\/","title":{"rendered":"Using Semantic HTML in Projects: A Primer"},"content":{"rendered":"\n

One of the things we have to consider as developers is how to make our sites accessible to those who need screen readers to consume a website. HTML assists in that endeavor by providing the use of semantic elements in markup. In this article, we will cover some of the more popular semantic elements to use in web development. <\/em>
<\/p>\n\n\n\n

Semantic HTML<\/h2>\n\n\n\n

When it comes to describing what \u2018semantic HTML\u2019 means, we can go straight to the definition of the word \u2018semantics\u2019 to help us. According to Merriam-Webster<\/a>, semantics is the study of meanings or the meaning of a sign. So when we are writing semantic HTML, we are creating an HTML code that absolutely implies what the tags mean.
<\/p>\n\n\n\n

We use semantic markup so that we can describe the structure of our web pages in a standard way: this allows screen readers and voice assistants to scan our HTML elements and return the relevant information to the user if they request it. <\/p>\n\n\n\n

Semantic Elements <\/h3>\n\n\n\n

When the HTML5 specification was released in 2014, it came with additional semantic elements to better indicate the structure of a web page. Here are some of the tags that would be considered semantic tags: <\/p>\n\n\n\n

<header><\/h4>\n\n\n\n

Headers are primarily container elements that act as sectional semantic HTML elements. They typically contain the logo, <nav><\/code> and an <h1><\/code> that describes the website itself. This is usually consistent across all pages in your site. <\/p>\n\n\n\n

<nav><\/h4>\n\n\n\n

A <nav><\/code> element is short for a navigational element. It holds links that take users to other parts of your site:
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n \n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width">\n  <title>repl.it<\/title>\n  <style>\n    header {\n      height: 100px;\n      background: lightblue;\n      display: flex;\n      align-items: center;\n    }\n \n   .logo-container {\n     display: flex;\n     flex-flow: column wrap;\n     justify-content: flex-start;\n     padding: 0px 20px;\n \n   }\n \n   h1 {\n     font-size: 1rem;\n     margin: 0;\n     padding: 0;\n     align-self: center;\n   }\n \n    img {\n      width: 200px;\n      height: 50px;\n    }\n \n    nav.navigation-links-container {\n      width: calc(100% - 200px);\n      display: flex;\n      justify-content: space-around;\n    }\n \n    nav.navigation-links-container a {\n      color: black;\n      text-decoration: none;\n    }\n \n    nav.navigation-links-container a:hover {\n      color: darkgoldenrod;\n      text-decoration: underline;\n    }\n  <\/style>\n<\/head>\n \n<body>\n  <header>\n   <div class="logo-container">\n     <img src="http:\/\/www.placekitten.com\/200\/50" alt="placeholder-kitty"\/>\n     <h1>Kit Kat Logo<\/h1>\n   <\/div>\n     <nav class="navigation-links-container">\n       <a href="about-us.html">About Us<\/a>\n       <a href="contact-us.html">Contact Us<\/a>\n       <a href="services.html">Services<\/a>\n       <a href="login.html">Login\/Register<\/a>\n     <\/nav>\n   <\/header>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Navigation elements can have links, menus, and submenus. The elements, however, cannot contain other <nav><\/code> elements. In the example above, I have an <img><\/code> that acts as a placeholder for a logo and a <nav><\/code> that contains our anchor (<a>) elements. These are all nested inside a <header><\/code>. <\/p>\n\n\n\n
<main>, <section>, <h2> – <h6><\/h4>\n\n\n\n
The <main><\/code> tag tells us the main content of the site, outside of the initial <header><\/code>. It can have <section><\/code> tags which can have their own <header><\/code> and <h2><\/code>–<h6><\/code> elements. 
<\/p>\n\n\n\n
The general rule of thumb about the heading tags is that there is only one<\/em><\/strong> <h1><\/code> element per page that matches the title given to the page. In addition, you can\u2019t use a higher numbered heading, until you use a lower-numbered one. You do have the ability, however, to go from a higher-numbered heading to a lower-numbered one out of order. This basically follows the structure of what a web page should be: 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n \n<head>\n  <meta charset="utf-8">\n  <meta name="viewport" content="width=device-width">\n  <title>repl.it<\/title>\n  <style>\n    header.main-header {\n      height: 100px;\n      background: lightblue;\n      display: flex;\n      align-items: center;\n    }\n \n    .logo-container {\n      display: flex;\n      flex-flow: column wrap;\n      justify-content: flex-start;\n      padding: 0px 20px;\n \n    }\n \n    h1 {\n      font-size: 1rem;\n      margin: 0;\n      padding: 0;\n      align-self: center;\n    }\n \n   h6 {\n     text-decoration: line-through;\n   }\n \n   h6.ok {\n     text-decoration: none;\n   }\n \n    img {\n      width: 200px;\n      height: 50px;\n    }\n \n    nav.navigation-links-container {\n      width: calc(100% - 200px);\n      display: flex;\n      justify-content: space-around;\n    }\n \n    nav.navigation-links-container a {\n      color: black;\n      text-decoration: none;\n    }\n \n    nav.navigation-links-container a:hover {\n      color: darkgoldenrod;\n      text-decoration: underline;\n    }\n  <\/style>\n<\/head>\n \n<body>\n  <header class="main-header">\n    <div class="logo-container">\n      <img src="http:\/\/www.placekitten.com\/200\/50" alt="placeholder-kitty"\/>\n     <h1>Kit Kat Logo<\/h1>\n   <\/div>\n     <nav class="navigation-links-container">\n       <a href="about-us.html">About Us<\/a>\n       <a href="contact-us.html">Contact Us<\/a>\n       <a href="services.html">Services<\/a>\n       <a href="login.html">Login\/Register<\/a>\n     <\/nav>\n   <\/header>\n   <body>\n<main>\n <header>\n   <h2>\n       I'm an h2 -- Semantic Elements -- Describes purpose of main content\n   <\/h2>\n <\/header>\n  <section>\n    <header>\n      <h3> I'm a h3 -- Layout Semantic Elements -- Describes purpose of section content<\/h3>\n    <\/header>\n   <div>Content and More stuff and things that pertain to h3 <\/div>\n   <h4> I'm an h4 -- Even less important heading <\/h4>\n   <div>More content that pertains to h4<\/div>\n <\/section>\n  <section>\n    <header>\n      <h3> We can go back up to h3 even though we used h4<\/h3>\n    <\/header>\n    <div>More stuff and things that pertain to h3 <\/div>\n    <h6>No h6 until h4 and h5<\/h6>\n    <h4> This can't be h6, unless h4<\/h4>\n    <div>More content that pertains to h4<\/div>\n \n    <h5> and h5 are used first. <\/h5>\n    <div>More content that pertains to h5<\/div>\n    <h6 class="ok">Now h6 can be used!<\/h6>\n \n   <\/section>\n  <\/main>\n  <footer>\n\t\n  <\/footer>\n  <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Remember that even though we can use heading tags out of order, it is not best practice to do so. Having the proper hierarchy leads to better accessibility.<\/strong><\/p>\n\n\n\n