{"id":237,"date":"2025-07-24T03:12:12","date_gmt":"2025-07-24T03:12:12","guid":{"rendered":"https:\/\/mitalgoswami.in\/?p=237"},"modified":"2025-07-24T05:55:21","modified_gmt":"2025-07-24T05:55:21","slug":"html-5-syntax","status":"publish","type":"post","link":"https:\/\/mitalgoswami.in\/?p=237","title":{"rendered":"HTML 5 & Syntax"},"content":{"rendered":"\n

HTML5 Document Structure Tags<\/strong><\/h2>\n\n\n\n

HTML5 introduced semantic elements to describe the structure of web documents more clearly:<\/p>\n\n\n\n

Tag<\/strong><\/th>Purpose<\/strong><\/th><\/tr><\/thead>
<section><\/code><\/td>Defines a standalone section in a document, typically with a heading.<\/td><\/tr>
<article><\/code><\/td>Represents self-contained content (e.g., a blog post, article, or comment).<\/td><\/tr>
<aside><\/code><\/td>Defines content that is tangentially related (e.g., a sidebar or ad).<\/td><\/tr>
<header><\/code><\/td>Contains introductory content (logo, nav, heading) usually at the top of a section or page.<\/td><\/tr>
<footer><\/code><\/td>Contains footer information (contact, copyright, links).<\/td><\/tr>
<nav><\/code><\/td>Declares navigation links.<\/td><\/tr>
<dialog><\/code><\/td>Represents a dialog box or popup window.<\/td><\/tr>
<figure><\/code><\/td>Wraps self-contained media content (images, charts, etc.) with <figcaption><\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>HTML5 Structure Example<\/title>\n<\/head>\n<body>\n\n  <header>\n    <h1>My Website<\/h1>\n    <nav>\n      <a href=\"#home\">Home<\/a> |\n      <a href=\"#about\">About<\/a> |\n      <a href=\"#contact\">Contact<\/a>\n    <\/nav>\n  <\/header>\n\n  <section id=\"home\">\n    <h2>Welcome Section<\/h2>\n    <p>This is the main welcome section of the page.<\/p>\n  <\/section>\n\n  <section id=\"about\">\n    <article>\n      <h2>About Us<\/h2>\n      <p>This article talks about our history and mission.<\/p>\n    <\/article>\n    <article>\n      <h2>Team<\/h2>\n      <p>This article introduces our team members.<\/p>\n    <\/article>\n  <\/section>\n\n  <aside>\n    <h3>Quick Links<\/h3>\n    <ul>\n      <li><a href=\"#\">FAQ<\/a><\/li>\n      <li><a href=\"#\">Support<\/a><\/li>\n    <\/ul>\n  <\/aside>\n\n  <figure>\n    <img src=\"image.jpg\" alt=\"Example Image\" width=\"300\">\n    <figcaption>This is a caption for the image.<\/figcaption>\n  <\/figure>\n\n  <dialog open>\n    <p>This is a sample dialog box.<\/p>\n  <\/dialog>\n\n  <footer>\n    <p>&copy; 2025 My Website. All rights reserved.<\/p>\n  <\/footer>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
HTML5 Multimedia and Graphics<\/strong><\/h2>\n\n\n\n
Audio & Video Tags<\/strong><\/h3>\n\n\n\n
htmlCopyEdit<audio controls>\n  <source src=\"sound.mp3\" type=\"audio\/mpeg\">\n<\/audio>\n\n<video controls width=\"400\">\n  <source src=\"video.mp4\" type=\"video\/mp4\">\n<\/video>\n<\/code><\/pre>\n\n\n\n
    \n
  • Attributes:<\/strong> controls<\/code>, autoplay<\/code>, loop<\/code>, muted<\/code>, poster<\/code> (for <video><\/code>)<\/li>\n<\/ul>\n\n\n\n
    me-local<\/code><\/td>Select local date and time (no timezone).<\/td><\/tr>
    date<\/code><\/td>Select a calendar date.<\/td><\/tr>
    month<\/code><\/td>Select month and year only.<\/td><\/tr>
    week<\/code><\/td>Select a week of the year.<\/td><\/tr>
    time<\/code><\/td>Select time (hours & minutes).<\/td><\/tr>
    number<\/code><\/td>Input only numeric values.<\/td><\/tr>
    range<\/code><\/td>Slider control to select a numeric value.<\/td><\/tr>
    email<\/code><\/td>Validates email format.<\/td><\/tr>
    url<\/code><\/td>Validates web address format.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    \u2705 Example: HTML5 Web Form<\/strong><\/h2>\n\n\n\n
    htmlCopyEdit<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>HTML5 Input Types Example<\/title>\n<\/head>\n<body>\n\n  <h2>HTML5 Web Form Example<\/h2>\n  <form>\n    \n    <label for=\"datetime\">Date & Time:<\/label>\n    <input type=\"datetime-local\" id=\"datetime\" name=\"datetime\"><br><br>\n\n    <label for=\"date\">Date:<\/label>\n    <input type=\"date\" id=\"date\" name=\"date\"><br><br>\n\n    <label for=\"month\">Month:<\/label>\n    <input type=\"month\" id=\"month\" name=\"month\"><br><br>\n\n    <label for=\"week\">Week:<\/label>\n    <input type=\"week\" id=\"week\" name=\"week\"><br><br>\n\n    <label for=\"time\">Time:<\/label>\n    <input type=\"time\" id=\"time\" name=\"time\"><br><br>\n\n    <label for=\"number\">Number (1-10):<\/label>\n    <input type=\"number\" id=\"number\" name=\"number\" min=\"1\" max=\"10\"><br><br>\n\n    <label for=\"range\">Volume (0\u2013100):<\/label>\n    <input type=\"range\" id=\"range\" name=\"volume\" min=\"0\" max=\"100\"><br><br>\n\n    <label for=\"email\">Email:<\/label>\n    <input type=\"email\" id=\"email\" name=\"email\" required><br><br>\n\n    <label for=\"url\">Website:<\/label>\n    <input type=\"url\" id=\"url\" name=\"url\"><br><br>\n\n    <input type=\"submit\" value=\"Submit\">\n\n  <\/form>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    HTML5 Document Structure Tags HTML5 introduced semantic elements to describe the structure of web documents more clearly: Tag Purpose <section> Defines a standalone section in a document, typically with a heading. <article> Represents self-contained content (e.g., a blog post, article, or comment). <aside> Defines content that is tangentially related (e.g., a sidebar or ad). <header> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-237","post","type-post","status-publish","format-standard","hentry","category-internet-networking"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts\/237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=237"}],"version-history":[{"count":1,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts\/237\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=\/wp\/v2\/posts\/237\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mitalgoswami.in\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}