Learn HTML in 12 Minutes

Published September 29, 2022 · Updated March 19, 2024

HTML (Hypertext Markup Language) is the foundation of web development, providing the structure and content of web pages. In this quick tutorial, we’ll cover the essential HTML elements and concepts you need to get started with building web pages. By the end of this 12-minute tutorial, you’ll have a solid understanding of HTML fundamentals.

Step 1:

Setting Up Your Workspace

To begin, open a text editor of your choice, such as Notepad, Sublime Text, or Visual Studio Code. Create a new file and save it with a .html extension, for example, index.html.

Step 2:

Basic HTML Structure

Every HTML document starts with a document type declaration (<!DOCTYPE html>) followed by an <html> element that contains two main sections: <head> and <body>.

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

Step 3:

Adding Headings

Use heading elements <h1> to <h6> to define the headings of your web page. The <h1> element represents the most important heading, while <h6> represents the least important.

<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>

Step 4:

Creating Paragraphs

Use the <p> element to define paragraphs of text.

<p>This is a paragraph of text.</p>

Step 5:

Adding Links

Create hyperlinks using the <a> element and specify the destination URL using the href attribute.

<a href="https://www.example.com">Visit Example.com</a>

Step 6:

Inserting Images

Display images on your web page using the <img> element and specify the image source using the src attribute.

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

Step 7:

Creating Lists

Use <ul> for unordered lists (bullet points) and <ol> for ordered lists (numbered items). Each list item is represented by the <li> element.

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

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Step 8: Adding Comments You can add comments to your HTML code using .

<!-- This is a comment -->

Step 9: Structuring Content with Divs Use <div> elements to group and structure content. Divs are commonly used for layout purposes.

<div>
    <p>This is some content inside a div.</p>
</div>

Step 10: Styling with Classes and IDs Add classes and IDs to HTML elements for styling and JavaScript purposes.

<p class="highlight">This paragraph has a class.</p>
<div id="container">This div has an ID.</div>

Step 11: Embedding Videos Use the <video> element to embed videos on your web page.

<video src="video.mp4" controls></video>

Step 12: Final Touches Review your HTML code, ensure proper indentation and structure, and save your file. Open it in a web browser to see your HTML page in action!

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <!-- Content goes here -->

<h1>This is a Heading Level 1</h1>
<h2>This is a Heading Level 2</h2>

<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Visit Example.com</a>
<img src="image.jpg" alt="Description of Image">


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

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

<!-- This is a comment -->

<div>
    <p>This is some content inside a div.</p>
</div>

<p class="highlight">This paragraph has a class.</p>
<div id="container">This div has an ID.</div>
<video src="video.mp4" controls></video>

</body>
</html>

Conclusion: In just 12 minutes, you’ve learned the basics of HTML and created a simple web page. HTML is the foundation of web development, and mastering its fundamentals is essential for building engaging and interactive websites. Keep practicing and exploring more HTML elements and concepts to enhance your web development skills further. Happy coding!