{"id":512,"date":"2023-09-24T04:45:00","date_gmt":"2023-09-24T04:45:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=512"},"modified":"2023-09-24T04:45:02","modified_gmt":"2023-09-24T04:45:02","slug":"html-cheatsheet","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/html-cheatsheet\/","title":{"rendered":"HTML Cheatsheet"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n
<!DOCTYPE html>  <!-- Document type declaration -->\r\n\r\n<html> <!-- Root element -->\r\n\r\n<head> <!-- Document head containing metadata -->\r\n    <meta charset=\"UTF-8\"> <!-- Character encoding -->\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <!-- Responsive viewport settings -->\r\n    <title>Your Page Title<\/title> <!-- Page title displayed in the browser tab -->\r\n    <link rel=\"stylesheet\" href=\"styles.css\"> <!-- Link to an external stylesheet -->\r\n    <style>\r\n        \/* Internal CSS styles *\/\r\n    <\/style>\r\n    <script src=\"script.js\"><\/script> <!-- Link to an external JavaScript file -->\r\n<\/head>\r\n\r\n<body> <!-- Document body where visible content goes -->\r\n    <header> <!-- Header section -->\r\n        <h1>Heading 1<\/h1> <!-- Heading with the largest font size -->\r\n        <h2>Heading 2<\/h2> <!-- Subheading -->\r\n        <nav> <!-- Navigation menu -->\r\n            <ul>\r\n                <li><a href=\"#\">Home<\/a><\/li> <!-- List item with a link -->\r\n                <li><a href=\"#\">About<\/a><\/li>\r\n                <li><a href=\"#\">Services<\/a><\/li>\r\n            <\/ul>\r\n        <\/nav>\r\n    <\/header>\r\n\r\n    <main> <!-- Main content section -->\r\n        <section> <!-- Section with a heading -->\r\n            <h2>Section Title<\/h2>\r\n            <p>This is a paragraph of text.<\/p>\r\n            <a href=\"https:\/\/www.example.com\">Visit Example<\/a> <!-- Link to an external website -->\r\n            <img src=\"image.jpg\" alt=\"Image Description\"> <!-- Image with alternative text -->\r\n        <\/section>\r\n\r\n        <article> <!-- Independent, self-contained content -->\r\n            <h3>Article Title<\/h3>\r\n            <p>Article content goes here.<\/p>\r\n        <\/article>\r\n    <\/main>\r\n\r\n    <aside> <!-- Sidebar or supplementary content -->\r\n        <h3>Sidebar Title<\/h3>\r\n        <ul>\r\n            <li>Item 1<\/li>\r\n            <li>Item 2<\/li>\r\n        <\/ul>\r\n    <\/aside>\r\n\r\n    <footer> <!-- Footer section -->\r\n        <p>&copy; 2023 Your Website Name<\/p> <!-- Copyright notice -->\r\n    <\/footer>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/code><\/pre>\n\n\n\n
Structure<\/strong><\/p>\n\n\n\n
    \n
  • <html><\/code> and <\/html><\/code> enclose the entire HTML document.<\/li>\n\n\n\n
  • <head><\/code> and <\/head><\/code> contain information about the document, such as the title and meta tags.<\/li>\n\n\n\n
  • <body><\/code> and <\/body><\/code> contain the content of the document, such as headings, paragraphs, and images.<\/li>\n<\/ul>\n\n\n\n
    Headings<\/strong><\/p>\n\n\n\n
      \n
    • <h1><\/code> to <h6><\/code> create headings of different sizes.<\/li>\n\n\n\n
    • <p><\/code> creates a paragraph.<\/li>\n<\/ul>\n\n\n\n
      Lists<\/strong><\/p>\n\n\n\n
        \n
      • <ul><\/code> creates an unordered list.<\/li>\n\n\n\n
      • <ol><\/code> creates an ordered list.<\/li>\n\n\n\n
      • <li><\/code> creates a list item.<\/li>\n<\/ul>\n\n\n\n
        Images<\/strong><\/p>\n\n\n\n
          \n
        • <img><\/code> inserts an image into the document.<\/li>\n<\/ul>\n\n\n\n
          Links<\/strong><\/p>\n\n\n\n
            \n
          • <a><\/code> creates a link to another document or resource.<\/li>\n<\/ul>\n\n\n\n
            Tables<\/strong><\/p>\n\n\n\n
              \n
            • <table><\/code> and <\/table><\/code> enclose a table.<\/li>\n\n\n\n
            • <tr><\/code> and <\/tr><\/code> create rows in a table.<\/li>\n\n\n\n
            • <td><\/code> and <\/td><\/code> create cells in a table.<\/li>\n<\/ul>\n\n\n\n
              Forms<\/strong><\/p>\n\n\n\n
                \n
              • <form><\/code> and <\/form><\/code> enclose a form.<\/li>\n\n\n\n
              • <input><\/code> creates a text input field.<\/li>\n\n\n\n
              • <select><\/code> creates a drop-down list.<\/li>\n\n\n\n
              • <button><\/code> creates a button.<\/li>\n<\/ul>\n\n\n\n
                Attributes<\/strong><\/p>\n\n\n\n
                  \n
                • Attributes are used to specify additional information about elements. For example, the\u00a0src<\/code>\u00a0attribute of the\u00a0<img><\/code>\u00a0element specifies the source of the image.<\/li>\n<\/ul>\n\n\n\n
                  <!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>My Web Page<\/title>\r\n<\/head>\r\n<body>\r\n  <h1>This is my web page!<\/h1>\r\n  <p>This is a paragraph on my web page.<\/p>\r\n  <img src=\"https:\/\/example.com\/image.png\" alt=\"Image of a cat\">\r\n  <ul>\r\n    <li>Item 1<\/li>\r\n    <li>Item 2<\/li>\r\n    <li>Item 3<\/li>\r\n  <\/ul>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
                  Structure Headings Lists Images Links Tables Forms Attributes<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-512","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":514,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions\/514"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}