Semantic HTML

Semantic HTML:
HTML provides tag specially for each part of your document.
Like the header part, the body part, footer, images, image caption.

Semantic HTML

Benefits of Semantic HTML:

  • Gives meaning to the document.
  • Makes the document (HTML file) way more accessible. View the AOM (Accessibility Object Model) in dev tools.

Semantic HTML

Semantic HTML

  <div class="header">
    <div>
      <div><a href="#about">About</a></div>
      <div><a href="#projects">Projects</a></div>
      <div><a href="#contact">Contact</a></div>
    </div>
  </div>

  <div class="main">
    <div id="about">
      <div>
        <div>Welcome to My Creative Space</div>
        <div>I'm <span>[Your Name]</span>, a passionate developer and designer with a love for creating meaningful digital experiences.</div>
        <div>Let's embark on a journey through my world of creativity!</div>
      </div>
    </div>

    <div id="projects">
      <div>Featured Projects</div>

      <div class="project">
        <div>
          <img src="project1.jpg" alt="Project 1">
          <div><span>Project Title 1</span></div>
          <div>Description of the project goes here. <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
          <a href="#">View Project</a>
        </div>
      </div>

      <div class="project">
        <div>
          <img src="project2.jpg" alt="Project 2">
          <div>Project Title 2</div>
          <div>Description of the project goes here. <span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></div>
          <a href="#">View Project</a>
        </div>
      </div>

      <!-- Add more projects as needed -->
    </div>
  </div>

  <div class="aside">
    <div id="contact">
      <div>
        <div>Let's Connect</div>
        <p>Have a project in mind or just want to say hi? Feel free to get in touch!</p>
        <form action="submit.php" method="post">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required>
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required>
          <label for="message">Message:</label>
          <textarea id="message" name="message" required></textarea>
          <button type="submit">Send Message</button>
        </form>
      </div>
    </div>
  </div>

  <div class="footer">
    <p>&copy; 2024 My Creative Portfolio. All rights reserved.</p>
  </div>

  <header>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="about">
      <div>
        <h1>Welcome to My Creative Space</h1>
        <p>I'm [Your Name], a passionate developer and designer with a love for creating meaningful digital experiences.</p>
        <p>Let's embark on a journey through my world of creativity!</p>
      </div>
    </section>
    <section id="projects">
      <h2>Featured Projects</h2>
      <article class="project">
        <figure>
          <img src="project1.jpg" alt="Project 1">
          <figcaption>
            <h3>Project Title 1</h3>
            <p>Description of the project goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#">View Project</a>
          </figcaption>
        </figure>
      </article>
      <article class="project">
        <figure>
          <img src="project2.jpg" alt="Project 2">
          <figcaption>
            <h3>Project Title 2</h3>
            <p>Description of the project goes here. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <a href="#">View Project</a>
          </figcaption>
        </figure>
      </article>
    </section>
  </main>
  <aside>
    <section id="contact">
      <div>
        <h2>Let's Connect</h2>
        <p>Have a project in mind or just want to say hi? Feel free to get in touch!</p>
        <form action="submit.php" method="post">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required>
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required>
          <label for="message">Message:</label>
          <textarea id="message" name="message" required></textarea>
          <button type="submit">Send Message</button>
        </form>
      </div>
    </section>
  </aside>

  <footer>
    <p>&copy; 2024 My Creative Portfolio. All rights reserved.</p>
  </footer>

Semantic HTML

Validate your HTML's semantic

Semantic HTML

Element Description
<address> Indicates that the enclosed HTML provides contact information for a person or people, or for an organization.
<article> Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
<aside> Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
<footer> Represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data, or links to related documents.
<header> Represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<main> Represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
<nav> Represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<section> Represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
<search> Represents a part that contains a set of form controls or other content related to performing a search or filtering operation.

Semantic HTML

Element Description
<blockquote> Indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
<dl>, <dd>, <dt> description list, description definition, description term
<figcaption> Represents a caption or legend describing the rest of the contents of its parent <figure> element.
<figure> Represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
<hr> Represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
<menu> A semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).
<pre> Represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.

Semantic HTML

Element Description
<abbr> Represents an abbreviation or acronym.
<b> Use to bold text
<br> Produces a line break in text (carriage-return).
<code> Displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
<em> Marks text that has stress emphasis. The <em> element can be nested, with each nesting level indicating a greater degree of emphasis.
<mark> Represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.
<q> Indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.
<s> Renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.
<strong> Indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
<sub> Specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
<sup> Specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
<time> Represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

Tables In HTML

<table class="table-1">
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Product A</th>
      <th>Product B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$1000</td>
      <td>$800</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1200</td>
      <td>$950</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$1300</td>
      <td>$850</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3500</td>
      <td>$2600</td>
    </tr>
  </tfoot>
</table>

Tables In HTML

<table class="table-1">
  
  <thead>
  </thead>

  <tbody>
  </tbody>

  <tfoot>
  </tfoot>
  
</table>

Tables In HTML

<table class="table-1">
  <tbody>
    <tr> /* table row */
      <td>January</td> /* table data */
      <td>$1000</td>
      <td>$800</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$1200</td>
      <td>$950</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$1300</td>
      <td>$850</td>
    </tr>
  </tbody>
</table>
<table class="table-1">
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr> /* table row */
      <th>Month</th> /** table head **/
      <th>Product A</th>
      <th>Product B</th>
    </tr>
  </thead>
</table>
<table class="table-1">
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3500</td>
      <td>$2600</td>
    </tr>
  </tfoot>
</table>

HTML Head Tag: MetaData

character set encoding meta tag,
<meta charset="utf-8" />

  • it basically tells the browser what “character-set” to use for this webpage
  • this meta tag should always come before the “title” in the head.

“title” meta tag:
<title>My Website Name</title>

title of the webpage
appears in:

  • browser tab,
  • the list of open windows,
  • the history,
  • search results, and,
  • in social media cards

viewport settings meta tag
<meta name="viewport" content="width=device-width" />

  • it prevents the site's content (text) from being sized down to fit a 960px site onto a 320px screen
  • content="width=device-width" means - make the site responsive, starting by making the width of the content the width of the screen
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table with Dummy Data</title>
    <style>
        table {
            width: 100%;
        }
        th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

</body>
</html>

description meta tag:
<meta name="description" content="We are WebMasters" />
Super important for SEO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

adding Favicon:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
 appears a little icon on tab, beside the title

 

Only for Safari browser:
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.png" />
<link rel="mask-icon" href="/images/favicon.svg" color="#226DAA" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

→ adding css written in “.css” file
<link rel="stylesheet" href="styles.css">


→ without “rel” (relationship) attribute your stylesheet won’t be linked, the css will not be applied.
→ it’s good to add your stylesheets in the head for better performance
⟶ whatever is in the head gets executed before the <body>
⟶ the browser will know before the content (<body>) is loaded, how to render the content (style),
⟶ this will save the cost of repaint for the browser.
⟶ Also browser can cache the external (css) file.

→ css can also be added by adding <style> in your <head> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="styles.css">
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

http-equiv - old ways
<meta http-equiv="refresh" content="60; https://priyaminnovations.com/regTimeout" />
Refreshes the page after 60 seconds

 

<meta http-equiv="content-security-policy" content="default-src https:" />
Content policy mostly specify allowed server origins and script endpoints, which help guard against cross-site scripting attacks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="refresh" content="60; https://priyaminnovations.com/regTimeout" />
    <meta http-equiv="content-security-policy" content="default-src https:" />
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

javascript <script> tags:

javascript is downloaded then executed
→ We can add <script> tag in <head> and Js directly there:
<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

→ We can also add JS in <body> as the last thing. (Better approach, because:
⟶ js code can reference html elements, so html should be loaded before js is loaded.
⟶ JavaScript is render-blocking. Also the browser stops downloading all assets (images, css etc) when scripts are downloaded and doesn't resume downloading other assets until the JavaScript is executed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="refresh" content="60; https://priyaminnovations.com/regTimeout" />
    <meta http-equiv="content-security-policy" content="default-src https:" />
    <script>
      document.getElementById('switch').addEventListener('click', function() {
        document.body.classList.toggle('black');
      });
    </script>
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
  <script src="js/switch.js"></script>
</body>
</html>

defer and async attributes:


<script src="js/switch.js" defer></script>

→ With “defer” HTML rendering is not blocked during the JavaScript download, and the JavaScript only executes after the HTML has finished rendering.


<script src="js/switch.js" async></script>

→ With “async”, HTML rendering isn't blocked during the JavaScript download either (most of HTML is rendered), but once the JavaScript has finished downloading, the HTML rendering is paused while the JavaScript is executed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="refresh" content="60; https://priyaminnovations.com/regTimeout" />
    <meta http-equiv="content-security-policy" content="default-src https:" />
    <script>
      document.getElementById('switch').addEventListener('click', function() {
        document.body.classList.toggle('black');
      });
    </script>
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
  <script src="js/switch.js" defer></script>
  <script src="js/switch.js" async></script>
</body>
</html>

Open Graph: for social media cards:
Facebook
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="We build softwares" />
<meta property="og:image" content="https://www.priyaminnovations.com/image/all.png" />
<meta property="og:image:alt" content="priyaminnovations images" />


Twitter social card:
<meta name="twitter:title" content="Software development" />
<meta name="twitter:description" content="Software" />
<meta name="twitter:url" content="https://www.priyaminnovations.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.priyaminnovations.com/image/all.png" />
<meta name="twitter:image:alt" content="softwares" />
<meta name="twitter:creator" content="@pi" />
<meta name="twitter:site" content="@pi_software" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="refresh" content="60; https://priyaminnovations.com/regTimeout" />
    <meta http-equiv="content-security-policy" content="default-src https:" />
<!-- Twitter Card -->
    <meta name="twitter:title" content="Software development" />
    <meta name="twitter:description" content="Software" />
    <meta name="twitter:url" content="https://www.priyaminnovations.com/?src=twitter" />
    <meta name="twitter:image:src" content="http://www.priyaminnovations.com/image/all.png" />
    <meta name="twitter:image:alt" content="softwares" />
    <meta name="twitter:creator" content="@pi" />
    <meta name="twitter:site" content="@pi_software" />
  
  <!-- Facebook Card -->
    <meta property="og:title" content="Machine Learning Workshop" />
    <meta property="og:description" content="We build softwares" />
    <meta property="og:image" content="https://www.priyaminnovations.com/image/all.png" />
    <meta property="og:image:alt" content="priyaminnovations images" />
  
    <script>
      document.getElementById('switch').addEventListener('click', function() {
        document.body.classList.toggle('black');
      });
    </script>
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

A manifest file:

 

If your website is a progressive web app (PWA) or app-capable (like Android or iOS apps), you can add a manifest.json file to your app, defining some basic App features like, Home Screen icon, Home Screen App Name

<link rel="manifest" href="/manifest.json">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="We are WebMasters" />
    <title>HTML Table with Dummy Data</title>
    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="styles.css">
    <link rel="manifest" href="manifest.json" />
    <style>
        table {
            width: 100%;
        }
    </style>
</head>
<body>
</body>
</html>

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}

Media Queries in CSS

@media print {
  /* … */
}

@media screen, print {
  /* … */
}

@media screen and (orientation: portrait) {
  /* … */
}

@media (max-width: 1250px) {
  /* … */
}

@media (width <= 1250px) {
  /* … */
}

@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

@media (30em < width < 50em) {
  /* … */
}

@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

/* if either is true */
@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

@media not screen, print and (min-height: 680px) {
  /* … */
}

@media only screen and (min-height: 680px) {
  /* … */
}

W3_D5

By Yash Priyam

W3_D5

  • 141

More from Yash Priyam