DEV Community

CodeWithDhanian
CodeWithDhanian

Posted on

Creating Simple Web Pages in HTML: A Quick Cheatsheet

HTML (HyperText Markup Language) is the foundation of web development. It provides the structure for web pages, allowing you to create headings, paragraphs, links, images, and more. Whether you're a beginner or need a quick refresher, this cheatsheet will guide you through the basics of creating simple web pages in HTML.

Basic Structure of an HTML Document

Every HTML document follows a standard structure. Here's the skeleton of a basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case).
  • <html>: The root element that wraps all content on the page.
  • <head>: Contains meta-information about the document, such as the title and character set.
  • <body>: Where the visible content of the web page is placed.

Adding Content to Your Web Page

1. Headings

Headings are used to define the hierarchy of your content. There are six levels of headings, from <h1> (most important) to <h6> (least important).

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Enter fullscreen mode Exit fullscreen mode

2. Paragraphs

Use the <p> tag to add paragraphs of text.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

3. Links

Links are created using the <a> tag. The href attribute specifies the destination URL.

<a href="https://www.example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode

4. Images

Images are added using the <img> tag. The src attribute specifies the image file path, and the alt attribute provides alternative text for accessibility.

<img src="image.jpg" alt="Description of image">
Enter fullscreen mode Exit fullscreen mode

Organizing Content

1. Lists

HTML supports both unordered (<ul>) and ordered (<ol>) lists.

<ul>
    <li>Unordered List Item 1</li>
    <li>Unordered List Item 2</li>
</ul>

<ol>
    <li>Ordered List Item 1</li>
    <li>Ordered List Item 2</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

2. Tables

Tables are created using the <table>, <tr>, <th>, and <td> tags.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

Forms for User Input

Forms allow users to submit data. Use the <form> tag with <input> elements for text, email, buttons, and more.

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode

Additional Elements

1. Buttons

Buttons can be created using the <button> tag.

<button>Click Me</button>
Enter fullscreen mode Exit fullscreen mode

2. Line Breaks and Horizontal Rules

Use <br> for line breaks and <hr> for horizontal rules.

<p>This is the first line.<br>This is the second line.</p>
<hr>
Enter fullscreen mode Exit fullscreen mode

3. Divisions and Spans

  • <div>: A block-level container for grouping content.
  • <span>: An inline container for styling or grouping text. 
<div>
    <p>This is inside a div.</p>
</div>
<p>This is a <span style="color:red;">span</span> inside a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Comments

Comments are notes in your code that are not displayed in the browser. They are written as follows:

<!-- This is a comment -->
Enter fullscreen mode Exit fullscreen mode

Putting It All Together

Here’s a complete example of a simple web page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple web page created using HTML.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" alt="Sample Image">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

With these basic HTML elements, you can create simple yet functional web pages. As you progress, you can enhance your pages with CSS for styling and JavaScript for interactivity.

Top comments (0)