HTML/CSS cheatsheet

HTML page basic structure
<!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="A brief description of the page content."> <title>My Webpage</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <h1>Welcome to My Webpage</h1> <p>Your description here</p> </div> </header> <nav> <div class="container"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav> <main> <div class="container"> <section id="home"> <h2>Home</h2> <p>Welcome to the homepage. Here you'll find the latest updates and news.</p> </section> <section id="about"> <h2>About</h2> <p>Learn more about our company and our mission.</p> </section> <section id="services"> <h2>Services</h2> <p>Discover the services we offer and how we can help you.</p> </section> </div> <aside> <div class="container"> <h2>Sidebar</h2> <p>Additional information, links, or ads can go here.</p> </div> </aside> </main> <footer> <div class="container"> <p>© 2024 My Webpage. All rights reserved.</p> </div> </footer> </body> </html>	DOCTYPE Declaration: The <!DOCTYPE html> declaration defines this document as an HTML5 document. HTML Element: The <html> tag is the root element of an HTML page. The lang attribute specifies the language of the document. Head Section: Meta Tags: <meta charset="UTF-8"> specifies the character encoding. <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the page responsive. <meta name="description" content="A brief description of the page content."> provides a summary of the page content for search engines. <title>: The <title> tag sets the title of the web page. CSS Link: The <link rel="stylesheet" href="style.css"> tag links to an external CSS file. Body Section: Header: The <header> tag contains introductory content, usually a logo or website title. Navigation: The <nav> tag contains the navigation menu. Main Content: The <main> tag wraps the main content of the page. Sections: Each <section> tag contains distinct parts of the content. Aside: The <aside> tag contains additional content like a sidebar. Footer: The <footer> tag contains footer content like copyright information. Container Divs: The <div class="container"> elements are used to wrap content for better styling and layout control using CSS.

HTML page basic structure

Code

Description


<!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="A brief description of the page content.">
      <title>My Webpage</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <header>
          <div class="container">
              <h1>Welcome to My Webpage</h1>
              <p>Your description here</p>
          </div>
      </header>
      <nav>
          <div class="container">
              <ul>
                  <li><a href="#home">Home</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#services">Services</a></li>
                  <li><a href="#contact">Contact</a></li>
              </ul>
          </div>
      </nav>
      <main>
          <div class="container">
              <section id="home">
                  <h2>Home</h2>
                  <p>Welcome to the homepage. Here you'll find the latest updates and news.</p>
              </section>
              <section id="about">
                  <h2>About</h2>
                  <p>Learn more about our company and our mission.</p>
              </section>
              <section id="services">
                  <h2>Services</h2>
                  <p>Discover the services we offer and how we can help you.</p>
              </section>
          </div>
          <aside>
              <div class="container">
                  <h2>Sidebar</h2>
                  <p>Additional information, links, or ads can go here.</p>
              </div>
          </aside>
      </main>
      <footer>
          <div class="container">
              <p>&copy; 2024 My Webpage. All rights reserved.</p>
          </div>
      </footer>
  </body>
</html>

DOCTYPE Declaration: The <!DOCTYPE html> declaration defines this document as an HTML5 document.

HTML Element: The <html> tag is the root element of an HTML page. The lang attribute specifies the language of the document.

Head Section:

Meta Tags:
- <meta charset="UTF-8"> specifies the character encoding.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> makes the page responsive.
- <meta name="description" content="A brief description of the page content."> provides a summary of the page content for search engines.
<title>: The <title> tag sets the title of the web page.
CSS Link: The <link rel="stylesheet" href="style.css"> tag links to an external CSS file.

Body Section:

Header: The <header> tag contains introductory content, usually a logo or website title.
Navigation: The <nav> tag contains the navigation menu.
Main Content: The <main> tag wraps the main content of the page.
Sections: Each <section> tag contains distinct parts of the content.
Aside: The <aside> tag contains additional content like a sidebar.
Footer: The <footer> tag contains footer content like copyright information.
Container Divs: The <div class="container"> elements are used to wrap content for better styling and layout control using CSS.