Creating Basic HTML Structure | CodeSignal Learn

Creating Basic HTML Structure | CodeSignal Learn

Introduction and Lesson Goal

Hello, and welcome to our journey into coding with HTML! HTML stands for HyperText Markup Language and it is the standard language used to create webpages, much like English is a standard language used around the world for communication. When we visit a website, what we see on our screens is a mix of HTML, CSS, and potentially other coding languages. But at its core, every webpage begins with HTML. Think of HTML as the skeleton or frame of a house, providing the basic structure and organization. Our goal today is to understand this basic structure and use HTML to start building a simple static to-do list.

Understanding HTML

Let's dive in a little deeper. HTML was invented by a physicist named Tim Berners-Lee in 1990 to allow scientists to share documents. Since then, it has evolved and is now maintained by the World Wide Web Consortium (W3C). HTML uses tags to describe the content of a webpage. HTML tags are like containers that tell the browser how to display the content inside them. Common examples include <html> which wraps all the content on the page, <head> that typically includes metadata about the page, <title> that gives the page a title (displayed in your web browser's tab), and <body> which contains all the visible content of the page. Let's imagine we're visiting a library. The library (webpage) is the <html> . The library's information board (metadata) would be the <head>, the library's name (website title) would be the <title>, and the actual books and resources (visible content) would be the <body> .

Basic HTML Structure

Now that we have some understanding of HTML, let's get our hands into coding! The basic structure of any HTML document can be fashioned as follows: HTML <!DOCTYPE html> <html> <head> <title>Library name</title> <!-- Webpage title --> </head> <body> <!-- The body content goes here --> </body> </html> The <!DOCTYPE html> declaration helps with the proper rendering of the webpage by telling the browser that the document type is HTML5. The <html> tag wraps all the page content, while <head> typically includes link tags, meta tags, and the title of the page. Finally, the <body> tag contains all the content visible to the webpage viewer, such as text, images, videos, etc. Note that while many tags need a corresponding closing tag, there are some that are self-enclosing. One example is the <img> tag: you do not need to add a </img> at the end.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Understanding Elements and Attributes

Within the HTML structure, we have elements and attributes . An element in HTML starts with a start tag and ends with an end tag, with the content in between. An attribute provides extra information about an element and it usually comes in name/value pairs like name="value" . Attributes are defined inside the opening tag and they change the way the HTML element behaves or is displayed. Some examples include the src attribute in an <img> tag to specify the source of an image, or the href attribute within an <a> (anchor) tag to specify the URL the link should go to. Imagine the HTML element as a vehicle. The type of vehicle (car, bus, bicycle) will determine the basic structure, similar to how an HTML element gives structure to the content. The attributes would then be similar to the color of the vehicle, the brand, the fuel type, etc. — extra information that specifies characteristics of the vehicle. <a href="https://www.example.com" target="_blank">Visit Example.com</a> In this example, <a> is the anchor (link) element. The attributes are: href="https://www.example.com" specifies the URL to which the link points. target="_blank" specifies that the link should open in a new browser tab or window. Now that we understand these building blocks, let's see how they come together in our to-do list.

Creating a To-Do List Structure

Now let's get started on creating our to-do list structure using HTML! We want a static list that represents a set of tasks with checkboxes next to each task. We can use the unordered list <ul> and list item <li> tags to create the main structure of the list, and the <input> tag with the type attribute set to checkbox to create the checkboxes. <!DOCTYPE html> <html> <head> <title>My To-Do List</title> </head> <body> <h1>My To-Do List</h1> <ul> <li><input type="checkbox"> Finish Homework</li> <li><input type="checkbox"> Wash Dishes</li> <li><input type="checkbox"> Walk the Dog</li> </ul> </body> </html> In the code above, you'll notice we've added an <h1> tag before the list. That's just a heading tag — h1 meaning heading 1 — and it makes the text inside it appear larger and bolder. This helps us distinguish the title of our to-do list from the tasks inside it!

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My To-Do List</title>
</head>
<body>
    <h1>My To-Do List</h1>
    <ul>
        <li><input type="checkbox"> Finish Homework</li>
        <li><input type="checkbox"> Wash Dishes</li>
        <li><input type="checkbox"> Walk the Dog</li>
    </ul>
</body>
</html>