Skip to content

HTML & CSS

HTML and CSS logos

Introduction: The Skeleton and Skin of the Web

Think of a website like a person. HTML (HyperText Markup Language) is the skeleton it gives structure and meaning. It defines what things are: a heading, a paragraph, an image, a form.

CSS (Cascading Style Sheets) is the skin and clothes it makes everything look good. Colors, fonts, spacing, layouts that's all CSS.

Why HTML/CSS Matters for Security:

Why should you care about HTML/CSS as a security person? Here's why: - Web Application Security Testing: Understanding HTML structure helps you identify injection points, understand form submissions, and find XSS vectors - Security Tool Development: Many security tools have web interfaces (think Burp Suite, OWASP ZAP, custom dashboards) - Report Writing: Well formatted HTML reports look professional - Understanding Vulnerabilities: Most web vulnerabilities involve HTML/CSS understanding them helps you understand the attacks

The HTML/CSS Relationship:

HTML and CSS are inseparable. HTML provides the structure and meaning. CSS provides the presentation. JavaScript (which we cover separately) provides the behavior. But HTML is always the foundation without it, there's nothing to style or script.

This Cheatsheet's Structure:

We'll cover: - HTML fundamentals (structure, semantic tags, forms) - Security considerations (XSS prevention, secure forms, CSP) - CSS basics (enough to make things look decent) - Practical examples (forms, layouts, security hardened pages)

You don't need to become a web designer, but understanding HTML/CSS will make you a better security professional.

Table of Contents

Part 1: The Absolute Basics of an HTML Page

Every HTML document you create will have the same fundamental structure. Think of it as the required boilerplate for any webpage. Once you understand this structure, you can read and understand any HTML page which is incredibly useful for security testing.

The Structure:

HTML documents have a hierarchy: 1. Document Type Declaration (<!DOCTYPE html>) 2. Root Element (<html>) 3. Head Section (<head>) metadata, not displayed 4. Body Section (<body>) visible content

It's like a Russian nesting doll each element contains the next. Understanding this hierarchy helps when you're inspecting web pages, testing for XSS, or understanding how an application structures its pages.

1. The DOCTYPE Declaration

This is always the very first line of your HTML file. It's not technically an HTML tag, but an instruction to the web browser about what version of HTML the page is written in. For modern HTML5, it's beautifully simple.

<!DOCTYPE html>

That's it. Always start with this.

2. The <html> Element

This is the root element of the page. Everything else is nested inside it. It's good practice to include the lang attribute to declare the primary language of the page for accessibility and search engines.

<html lang="en">
  <!-- All other elements go here -->
</html>

3. The <head>: The Brains of the Page

The <head> element contains meta information about your HTML page. This is stuff that isn't displayed directly on the page itself, but is important for the browser, search engines, and other services.

  • <meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is the standard and can handle almost any character from any language.
  • <meta name="viewport" content="width=device width, initial scale=1.0">: This is crucial for responsive design. It tells the browser to set the width of the page to the device's screen width and to set the initial zoom level to 1.
  • <title>: This is the title that appears in the browser tab or window title bar. It's also a very important factor for Search Engine Optimization (SEO).
  • <link rel="stylesheet" href="style.css">: This is how you link to an external CSS stylesheet (more on this in Part 8).
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device width, initial scale=1.0">
  <title>My Awesome Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>

4. The <body>: The Actual Content

Everything that you want to be visible to the user goes inside the <body> element. This is where your headings, paragraphs, images, links, and all other content will live.

<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>
</body>

5. A Complete Barebones Example

Putting it all together, this is the simplest valid HTML5 page you can create. You can use this as a starting template for any new project.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device width, initial scale=1.0">
  <title>My First Webpage</title>
</head>
<body>

  <h1>My Main Heading</h1>
  <p>This is a paragraph of text. Welcome to my site!</p>

</body>
</html>

Part 2: Text and Core Content Elements

These are the tags you'll use most often to build out the content of your pages.

6. Headings: <h1> to <h6>

Headings are used to structure your content hierarchically. <h1> is the most important heading (usually the main title of the page), and <h6> is the least important.

  • Best Practice: Use only one <h1> per page for the main title. Don't skip heading levels (e.g., don't go from an <h2> to an <h4>).
<h1>This is the Main Title</h1>
<h2>This is a Major Section Heading</h2>
<h3>This is a Sub section Heading</h3>
<p>And this is just regular paragraph text.</p>

7. Paragraphs: <p>

The <p> tag is for paragraphs of text. The browser automatically adds some space (a margin) before and after each paragraph.

<p>This is the first paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>This is the second paragraph. You don't need to do anything special; the browser handles the spacing.</p>

The anchor tag <a> is used to create hyperlinks. The href attribute is the most important part—it specifies the URL the link goes to.

<!-- Link to an external site -->
<a href="https://www.google.com">Go to Google</a>

<!-- Link to another page on your own site -->
<a href="/about.html">About Us</a>

<!-- Link to an element on the same page -->
<a href="#section-2">Jump to Section 2</a>

For security, when linking to external sites that open in a new tab, always add rel="noopener noreferrer". (More on this in Part 7).

9. Images: <img>

The <img> tag is used to embed an image. It's a self closing tag.

  • src: The path to the image file. This is required.
  • alt: Alternative text for the image. This is crucial for accessibility (for screen readers) and for SEO. It will also be displayed if the image fails to load.
  • width and height: It's good practice to set these to prevent the page layout from shifting as images load.
<img src="images/gopher.png" alt="A cute blue gopher, the mascot of Go." width="200" height="200">

10. Lists: <ul>, <ol>, <li>

  • <ul>: Unordered List (bullets).
  • <ol>: Ordered List (numbers).
  • <li>: List Item (used inside both <ul> and <ol>).
<h4>My To-Do List (Unordered)</h4>
<ul>
  <li>Build a secure website</li>
  <li>Learn HTML</li>
  <li>Drink coffee</li>
</ul>

<h4>My Top 3 Priorities (Ordered)</h4>
<ol>
  <li>Security</li>
  <li>Accessibility</li>
  <li>Performance</li>
</ol>

11. Emphasis and Importance: <em> & <strong>

  • <em>: Used for emphasis. By default, browsers render this as italic text.
  • <strong>: Used for strong importance, seriousness, or urgency. By default, browsers render this as bold text.

Don't use <i> or <b>. While they might look the same, <em> and <strong> provide semantic meaning, which is better for screen readers and SEO.

<p>You <em>must</em> complete this section. It is <strong>critically important</strong>.</p>

12. Line Breaks and Horizontal Rules: <br> & <hr>

  • <br>: A line break. Use it when you need a new line without starting a new paragraph (e.g., in an address or a poem). It's a self closing tag.
  • <hr>: A thematic break or horizontal rule. It represents a transition to another topic. It's also a self closing tag.
<p>123 Gopher Lane<br>
Go City, GC 12345</p>

<hr>

<p>The topic has now changed.</p>

Part 3: Structuring Content with Semantic HTML

Semantic HTML means using tags that describe the meaning of the content they contain, not just how they look.

13. Why Use Semantic Tags?

  1. Accessibility: Screen readers use them to navigate the page. A user can ask their screen reader to "jump to the main navigation" if you use a <nav> tag.
  2. SEO: Search engines understand the structure of your page better, which can improve your ranking.
  3. Maintainability: Your code is easier to read and understand for other developers (and your future self).
  4. Mobile: They can help mobile browsers provide better reader modes.

14. Page Layout Tags: <header>, <footer>, <nav>, <main>

  • <header>: The introductory content for a page or a section. Often contains the site logo, title, and main navigation.
  • <footer>: The footer for a page or a section. Often contains copyright information, contact details, and secondary links.
  • <nav>: Contains the main navigation links for the site.
  • <main>: The main, unique content of the page. There should only be one <main> element per page.
<body>
  <header>
    <h1>My Awesome Site</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h2>Main Content Here</h2>
    <p>This is the most important part of the page.</p>
  </main>

  <footer>
    <p>&copy; 2025 My Awesome Site. All rights reserved.</p>
  </footer>
</body>

15. Content Grouping Tags: <article>, <section>, <aside>

  • <article>: A self contained piece of content that could be distributed on its own, like a blog post, a news story, or a forum comment.
  • <section>: A thematic grouping of content, typically with a heading. It's a way to break up a long <article> or <main> area.
  • <aside>: Content that is tangentially related to the content around it. Often used for sidebars, pull quotes, or ad groups.
<main>
  <article>
    <h1>My First Blog Post</h1>
    <p>This is the intro to my post.</p>

    <section>
      <h2>Chapter 1: The Beginning</h2>
      <p>It all started on a dark and stormy night...</p>
    </section>

    <section>
      <h2>Chapter 2: The Middle</h2>
      <p>Things got interesting here.</p>
    </section>
  </article>

  <aside>
    <h3>Related Posts</h3>
    <ul>
      <li><a href="#">Another Post</a></li>
    </ul>
  </aside>
</main>

16. The Generic Containers: <div> and <span>

When there is no semantic tag that fits your needs, you can fall back on these.

  • <div>: A block level container. It's used to group larger chunks of content, often for styling purposes (e.g., creating a centered container for your page content).
  • <span>: An inline container. It's used to group smaller pieces of text within a block element, often to apply a specific style or to target with JavaScript.
<div class="container">
  <p>This paragraph is inside a div. The word <span class="highlight">highlight</span> is inside a span.</p>
</div>

Rule of thumb: Always try to use a semantic tag first. Only use <div> and <span> as a last resort.

Part 4: Forms

Forms are how you collect data from users. They are one of the most complex and security sensitive parts of HTML.

17. The <form> Element

The <form> element is a container for all your form controls.

  • action: The URL where the form data should be sent when submitted.
  • method: The HTTP method to use.
    • GET: Appends the form data to the URL. Good for search forms or things that don't change data. Never use GET for sensitive data.
    • POST: Sends the form data in the HTTP request body. Use this for submitting sensitive information (like passwords) or for any action that changes data on the server (like creating a user).
<form action="/submit data" method="POST">
  <!-- All form controls go here -->
</form>

18. The All-Important <input> Element

The <input> tag is a workhorse. Its behavior is determined by its type attribute.

  • type="text": A single line text field.
  • type="password": Like a text field, but the characters are obscured.
  • type="email": A field for an email address. Mobile browsers may show a special keyboard.
  • type="number": A field for numbers, with spinners.
  • type="checkbox": A checkbox. Allows for multiple selections in a group.
  • type="radio": A radio button. Only one can be selected within a group that shares the same name.
  • type="file": Allows the user to select a file to upload.
  • type="hidden": An input that is not visible to the user. Often used to send tokens or tracking IDs.
  • type="submit": A button that submits the form.

Common Attributes:

  • name: The name of the input, which is sent to the server along with its value.
  • id: A unique identifier for the element, used to connect it with a <label>.
  • placeholder: Hint text that appears in the field when it's empty.
  • required: A boolean attribute that makes the field mandatory.
<form action="/register" method="POST">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <input type="email" name="email" placeholder="your@email.com">
  <input type="submit" value="Register">
</form>

19. Labels for Accessibility: <label>

Always use a <label> for every form control. It tells users (especially those using screen readers) what the input is for. The for attribute of the label should match the id of the input.

<label for="user id">Username:</label>
<input type="text" id="user id" name="username">

20. Multi line Text Input: <textarea>

For longer text input, use a <textarea>.

<label for="comment">Your Comment:</label>
<textarea id="comment" name="comment" rows="5" cols="30"></textarea>

21. Drop down Selections: <select> and <option>

Used to create a drop down list.

<label for="tool select">Choose a tool:</label>
<select name="tool" id="tool select">
  <option value="">--Please choose an option--</option>
  <option value="nmap">Nmap</option>
  <option value="metasploit">Metasploit</option>
  <option value="burp">Burp Suite</option>
</select>

22. The <button> Element

While <input type="submit"> works, the <button> element is more flexible. It can contain HTML content, like an image and text.

<button type="submit">
  <img src="icons/save.png" alt=""> Save
</button>

<button type="reset">Reset Form</button>

<button type="button">Just a clickable button</button>

Part 5: Displaying Data with Tables

Tables should only be used for displaying tabular data (like a spreadsheet), not for page layout. Using tables for layout is an old, outdated practice that is bad for accessibility and responsiveness.

23. The <table> Element

This is the main container for your table.

24. Table Structure: <thead>, <tbody>, <tfoot>

These elements provide semantic structure to your table.

  • <thead>: The table header group. Contains the column headings.
  • <tbody>: The main body of the table content.
  • <tfoot>: The table footer group. Can be used for summary rows.

25. Rows and Cells: <tr>, <th>, <td>

  • <tr>: Table Row. Creates a new row in the table.
  • <th>: Table Header cell. Used inside <thead> for column titles. Text is typically bold and centered by default.
  • <td>: Table Data cell. Used inside <tbody> for the main data.
<table border="1"> <!-- `border` attribute is for quick testing, use CSS for real styling -->
  <caption>Vulnerability Scan Results</caption>
  <thead>
    <tr>
      <th>ID</th>
      <th>Vulnerability</th>
      <th>Severity</th>
      <th>Host</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>SQL Injection</td>
      <td>Critical</td>
      <td>db.example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cross-Site Scripting (XSS)</td>
      <td>High</td>
      <td>web.example.com</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Scan completed: 2 vulnerabilities found.</td>
    </tr>
  </tfoot>
</table>

Part 6: Embedding Multimedia and Content

26. Embedding Video: <video>

The <video> tag allows you to embed video directly into your page. The controls attribute adds the default play/pause, volume, etc. controls.

<video controls width="400">
  <source src="videos/tutorial.mp4" type="video/mp4">
  <source src="videos/tutorial.webm" type="video/webm">
  Sorry, your browser doesn't support embedded videos.
</video>

27. Embedding Audio: <audio>

Similar to video, the <audio> tag embeds sound content.

<audio controls>
  <source src="audio/podcast.mp3" type="audio/mpeg">
  Sorry, your browser doesn't support embedded audio.
</audio>

28. Embedding Other Webpages: <iframe>

An <iframe> (inline frame) embeds another HTML document within the current one. This is often used for embedding maps, videos from other services (like YouTube), or payment forms.

Security Warning: Iframes can be a security risk. Always use the sandbox attribute if you are embedding untrusted third party content. (More on this in Part 7).

<!-- Embedding a YouTube video -->
<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard write; encrypted media; gyroscope; picture in picture" 
  allowfullscreen>
</iframe>

Part 7: HTML Security

HTML itself doesn't have logic, but how you write it can either create or help mitigate serious security vulnerabilities.

29. Understanding Cross-Site Scripting-(XSS)

XSS is the most common web vulnerability. It occurs when a web application includes unvalidated or unescaped user input in its output. An attacker can inject malicious scripts that are then executed by the victim's browser.

The Core Problem (Conceptual Server Side Example):

Imagine a server side script (like PHP, Python, or Node.js) that does this:

// DO NOT DO THIS
$username = $_GET['username']; // Attacker provides: <script>alert('XSS')</script>
echo "<h1>Welcome, " . $username . "!</h1>";

The server will send the following HTML to the browser, which will dutifully execute the script:

<h1>Welcome, <script>alert('XSS')</script>!</h1>

The Fix: The fix is always on the server side by properly escaping output. For example, converting < to &lt; and > to &gt;. As an HTML author, your job is to be aware of this and to use frameworks and template engines that do this automatically (like the html/template package in Go, or Jinja2 in Python).

30. Form Security Best Practices

  • Use POST for State-Changing Actions: Any form that creates, updates, or deletes data must use method="POST".
  • Autocomplete: For sensitive fields like passwords or credit card numbers, you can suggest to the browser not to save the value by using autocomplete="off".
  • CSRF Tokens: Cross-Site Request Forgery (CSRF) is an attack where a user is tricked into submitting a malicious request. The primary defense is a server generated, unpredictable token included in a hidden field in the form. While this is a server side implementation, the HTML part looks like this:
<form action="/change password" method="POST">
  <input type="hidden" name="csrf_token" value="SERVER_GENERATED_RANDOM_TOKEN">
  <label for="pwd">New Password:</label>
  <input type="password" id="pwd" name="password" autocomplete="new password">
  <button type="submit">Change Password</button>
</form>

When you link to an external site with target="_blank" (to open it in a new tab), the new page gains partial access to the original page via the window.opener object. A malicious site could use this to redirect your page to a phishing site.

  • rel="noopener": Prevents the new page from accessing window.opener.
  • rel="noreferrer": Prevents the browser from sending the Referer header to the new page.

Always use them together for external links that open in a new tab.

<a href="https://untrusted site.com" target="_blank" rel="noopener noreferrer">Visit this external site</a>

32. Iframe Security: The sandbox Attribute

If you must embed third party content in an <iframe>, use the sandbox attribute to severely restrict its capabilities.

  • An empty sandbox attribute blocks everything: scripts, form submissions, popups, etc.
  • You can add back specific capabilities by adding values.
<!-- A very locked down iframe -->
<iframe src="/ad content.html" sandbox></iframe>

<!-- An iframe that is allowed to run scripts and submit forms to the same origin -->
<iframe src="/interactive widget.html" sandbox="allow scripts allow same origin allow forms"></iframe>

33. Content Security Policy-(CSP) with <meta>

CSP is a powerful defense against XSS. It's a whitelist of sources that the browser is allowed to load content from (scripts, styles, images, etc.). While it's best implemented as an HTTP header, you can also set a basic policy using a <meta> tag in the <head>.

<head>
  <title>Secure Page</title>
  <!-- This CSP only allows scripts and images from the page's own origin -->
  <meta http equiv="Content-Security-Policy" content="default src 'self'; script src 'self'; img src 'self';">
</head>

Part 8: A Crash Course in CSS

This is a very brief introduction to give you the tools to make your HTML look decent.

34. What is CSS?

CSS (Cascading Style Sheets) is a language for describing the presentation of a document written in HTML. It lets you control colors, fonts, spacing, layout, and more.

35. How to Include CSS

There are three ways to add CSS to your HTML:

  1. External Stylesheet (Best Practice): Create a separate .css file and link to it in your <head>. This is the best way because it separates content (HTML) from presentation (CSS). 

    <link rel="stylesheet" href="styles.css">

  2. Internal Stylesheet: Place your CSS rules inside a <style> tag in the <head>. This is useful for page specific styles. 

    <style>
  body {
    background color: #f0f0f0;
  }
</style>

  3. Inline Styles (Avoid if Possible): Apply styles directly to an element using the style attribute. This is generally bad practice because it mixes content and presentation. 

    <p style="color: blue; font size: 16px;">This is a blue paragraph.</p>

36. Selectors: Targeting Elements

A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style.

/* Element Selector: Targets all <p> tags */
p {
  color: #333;
}

/* Class Selector: Targets any element with class="highlight" */
.highlight {
  background color: yellow;
}

/* ID Selector: Targets the single element with id="main title" */
#main title {
  font size: 32px;
}

37. The Box Model

Every element in HTML is a rectangular box. The CSS box model describes how this box is composed.

  • Content: The actual text, image, etc.
  • Padding: The space between the content and the border. It's inside the box.
  • Border: A line that goes around the padding and content.
  • Margin: The space outside the border. It clears an area around the element and separates it from other elements.

Box Model

.my box {
  width: 200px;
  padding: 20px; /* 20px of space on all four sides inside the border */
  border: 1px solid black;
  margin: 40px; /* 40px of space on all four sides outside the border */
}

38. Common CSS Properties

Here are a few of the most common properties to get you started.

body {
  font family: Arial, sans serif; /* Sets the font for the whole page */
  line height: 1.6; /* Improves readability */
}

h1 {
  color: #2c3e50; /* A dark blue color */
  font size: 2.5em; /* 2.5 times the base font size */
}

a {
  color: #3498db; /* A nice blue for links */
  text decoration: none; /* Removes the underline */
}

a:hover {
  text decoration: underline; /* Adds the underline back on hover */
}

.button {
  background color: #3498db;
  color: white;
  padding: 10px 15px;
  border: none;
  border radius: 5px; /* Rounded corners */
  cursor: pointer; /* Changes the mouse cursor to a pointer */
}

.button:hover {
  background color: #2980b9;
}

Part 9: Cookbook

39. Cookbook: A Semantic Blog Post

This example shows a complete HTML page for a blog post, using semantic tags for structure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device width, initial scale=1.0">
  <title>My First Semantic Blog Post</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>My Tech Blog</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>The Importance of Semantic HTML</h2>
        <p>Posted on <time datetime="2025-10-01">October 1, 2025</time> by 0x1RIS</p>
      </header>

      <p>Semantic HTML is not just a suggestion; it's a cornerstone of modern web development. In this post, we'll explore why.</p>

      <section>
        <h3>Accessibility Benefits</h3>
        <p>Screen readers and other assistive technologies rely on a well defined document structure to provide a good user experience. Using a `nav` element for your navigation, for example, allows a user to instantly jump to it.</p>
      </section>

      <section>
        <h3>SEO Advantages</h3>
        <p>Search engines like Google are getting smarter. They use the semantic meaning of your tags to better understand your content, which can lead to better search rankings.</p>
        <img src="images/seo.png" alt="A diagram showing SEO benefits.">
      </section>

      <footer>
        <p>Tags: <a href="#">html</a>, <a href="#">webdev</a>, <a href="#">accessibility</a></p>
      </footer>
    </article>
  </main>

  <aside>
    <h3>About the Author</h3>
    <p>0x1RIS is a security researcher who loves building secure and accessible things.</p>
  </aside>

  <footer>
    <p>&copy; 2025 My Tech Blog. <a href="#">Back to top</a></p>
  </footer>

</body>
</html>

40. Cookbook: A Secure Registration Form

This form demonstrates many of the input types and attributes discussed, with an emphasis on good practice.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device width, initial scale=1.0">
  <title>Register an Account</title>
  <link rel="stylesheet" href="forms.css">
</head>
<body>

  <h2>Create Your Account</h2>
  <form action="/register" method="POST">
    <!-- This hidden field is where a server would place a CSRF token -->
    <input type="hidden" name="csrf_token" value="a very random and unguessable string">

    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required minlength="3" maxlength="20" pattern="[a zA-Z0-9]+" title="Usernames can only contain letters and numbers.">
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>

    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required minlength="12" autocomplete="new password">
    </div>

    <div>
      <label for="dob">Date of Birth:</label>
      <input type="date" id="dob" name="dob">
    </div>

    <div>
      <p>Account Type:</p>
      <input type="radio" id="type_free" name="account_type" value="free" checked>
      <label for="type_free">Free</label>
      <br>
      <input type="radio" id="type_premium" name="account_type" value="premium">
      <label for="type_premium">Premium</label>
    </div>

    <div>
      <label for="country">Country:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="gb">United Kingdom</option>
      </select>
    </div>

    <div>
      <input type="checkbox" id="terms" name="terms" required>
      <label for="terms">I agree to the <a href="/terms" target="_blank" rel="noopener noreferrer">terms and conditions</a>.</label>
    </div>

    <button type="submit">Register</button>
  </form>

</body>
</html>

41. Cookbook: A Simple Portfolio Page Layout

This example shows how you might structure a simple, one page portfolio using semantic HTML and generic div containers for styling.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device width, initial scale=1.0">
  <title>someone Web Developer</title>
  <link rel="stylesheet" href="portfolio.css">
</head>
<body>

  <header class="site header">
    <div class="container">
      <nav>
        <a href="#about">About</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
      </nav>
    </div>
  </header>

  <main>
    <section id="hero">
      <div class="container">
        <h1>someone</h1>
        <p>Web Developer</p>
      </div>
    </section>

    <section id="about">
      <div class="container">
        <h2>About Me</h2>
        <p>I am a frontend dev</p>
      </div>
    </section>

    <section id="portfolio">
      <div class="container">
        <h2>My Work</h2>
        <div class="portfolio grid">
          <article class="portfolio item">
            <img src="images/project1.jpg" alt="Screenshot of Project One">
            <h3>Project One</h3>
            <p>A secure e commerce platform.</p>
          </article>
          <article class="portfolio item">
            <img src="images/project2.jpg" alt="Screenshot of Project Two">
            <h3>Project Two</h3>
            <p>A data visualization dashboard.</p>
          </article>
        </div>
      </div>
    </section>

    <section id="contact">
      <div class="container">
        <h2>Get In Touch</h2>
        <p>You can reach me at <a href="mailto:someone@example.com">someone@example.com</a>.</p>
      </div>
    </section>
  </main>

  <footer class="site footer">
    <div class="container">
      <p>&copy; 2025 0x1RIS</p>
    </div>
  </footer>

</body>
</html>

Sources