Author: Divy Pathak(pathakdivy03@gmail.com)

Semantic HTML tags are meaningful tags that describe the purpose of the content inside them — both to the browser and to developers (and also screen readers for accessibility).

<header> for top section (logo, nav, intro)
<nav> for nav menu with nav-links
<main> for main content of the doc
<section> sections of content 
<article> for blog post, news article
<aside> sidebar content, i.e. not related to main content
<footer> bottom section with links and copyright license
<figure> to wrap media images, diagrams, charts with captions
<figcaption> caption for figure
<mark> highlight text with yellow
<time> represent datetime="" attribute for machine readability  

also a new semantic tag added which is used to wrap personal social media address like email, linkedin, etc and NOT the actual postal address.

Published on 2025-09-14 at My New Hugo Site, last modified on 2025-10-01

Author: Divy Pathak(pathakdivy03@gmail.com)

Hyper Text Markup Language is the backbone of any website.

• Avoid using more than 1 as it is the biggest heading, only one h1 should be present in one sheet.
• Always use headings in order, first h1 then h2 and so on.
• Always use img tag inside a figure tag when images have caption

<figure>
   <img src="" />
   <figcaption>Caption</figcaption>
</figure>

• Use [[Semantic Tags]] like header, footer, section, article
• Avoid using , for bold and italics, instead use [[CSS]] properties like font-weight and font-style: “italic” or use for bold and for emphasis/italics.
• Don’t use block elements inside inline elements

Block and Inline element

Block elements always start on a new line and take up the full width available.

---

Published on 2025-09-14 at My New Hugo Site, last modified on 2025-10-01

]]>prep