HTML Basics for Beginners

The below are the most essential HTML tags every new web designer should know. Click any code box to instantly select it for copying.

clouds

Basic Page Structure

This is the foundation of your layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Webpage</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first webpage.</p>
</body>
</html>



Headings

Headings give your page visual hierarchy.

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>



Paragraphs & Text Formatting

<p>This is a paragraph of text.</p>
<p>This is <strong>important</strong> and this is <em>emphasized</em>.</p>



Links

<a href="https://example.com">Visit Example</a>
<a href="mailto:someone@example.com">Email Me</a>



Images

<img src="image.jpg" alt="Description of image">



Lists

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>



Divs (Layout Containers)

<div>
  <h2>Section Title</h2>
  <p>Some content here.</p>
</div>



Comments

This will help you leave notes for yourself as you work through your code. 

<!-- This is a comment and will not show on the page -->



CSS Tips

These simple CSS rules help you style your page and keep things neat. Keep these wrapped in the style block of your code. 

/* Change text color */
    p {
      color: #555;
    }
    
    /* Add space around elements */
    div {
      margin: 10px 0;
    }
    
    /* Center an image */
    img {
      display: block;
      margin: 0 auto;
    }
    
    /* Add a cute border */
    .box {
      border: 2px solid #e3b4f3;
      padding: 10px;
      border-radius: 6px;
    }
    
    /* Make text smaller on narrow screens */
    @media (max-width: 400px) {
      body {
        font-size: 12px;
      }
    }

Practice Challenge

Create a simple homepage using the tags above. You can use sites like Codepen.io to practice writing and testing your code.