Skip to content
Tech for Everyone

Building Structure with HTML

Read Aloud with Speechify Practice with Kahoot Open Journal with Inkblok Play Online Game

What is the Structure of a Webpage?

When you visit a website, you see text, images, and buttons all arranged in a certain way. This arrangement is called the structure of a webpage. Just like how a house needs walls, doors, and windows, a website needs parts that help organize the information. These parts are built using HTML blocks in EduBlocks.

Key Concept: What is HTML?

HTML stands for Hypertext Markup Language. It is the basic language used to build the structure of every website on the internet. In EduBlocks, we use blocks that represent HTML elements, so we don’t need to write the code ourselves. These blocks allow us to add headings, paragraphs, lists, and more to a webpage.

Important HTML Elements

Here are the most important HTML elements that we will use to build our webpages:

  1. Headings

    • Headings are like the titles or section headers of your webpage.
    • You can use different levels of headings, from Heading 1 (H1), which is the largest, down to Heading 6 (H6), which is the smallest.
    • In EduBlocks, you can use the Heading Block to add a heading to your webpage.

  2. Paragraphs

    • A paragraph is a block of text that gives more information.
    • You can add as many paragraphs as you need to explain the content of your webpage.
    • Use the Paragraph Block to create paragraphs of text.

  3. Lists

    • Lists help you organize information in a neat way.
    • There are two main types of lists:
      • Ordered Lists (OL): These are numbered lists (1, 2, 3, etc.).
      • Unordered Lists (UL): These are bulleted lists.
    • Use the Ordered List Block or the Unordered List Block to create lists.

Using HTML Blocks to Build a Webpage

Let’s now create a simple webpage using these elements.

Step 1: Open EduBlocks

  • Make sure you have EduBlocks open and are in the HTML mode.

Step 2: Add a Heading

  • Drag the Heading Block onto the workspace.
  • In the heading block, type “My Favorite Animals.”

Step 3: Add a Paragraph

  • Drag the Paragraph Block onto the workspace, just below the heading.
  • In the paragraph block, type “Here are some of my favorite animals and why I like them.”

Step 4: Add an Ordered List

  • Now, drag an Ordered List Block onto the workspace.
  • Inside the list block, add three items. For example:
    • “1. Dogs – because they are loyal and friendly.”
    • “2. Cats – because they are independent and playful.”
    • “3. Birds – because they can fly and sing beautifully.”

Step 5: Preview Your Webpage

  • Click the Preview button at the top of EduBlocks to see how your webpage looks.
  • You should see your heading, paragraph, and a numbered list of animals.

Understanding HTML Structure

Webpages are built using layers of elements, just like building blocks. Each block has its place, and these blocks are connected to form the structure of the page.

The Importance of Headings

Headings are very important because they help people understand what each section of your webpage is about. On top of that, search engines like Google use headings to help people find your webpage. That’s why it’s good to use headings that describe your content clearly.

Using Lists to Organize Information

Lists make it easier for people to read and understand information on a webpage. By using either ordered (numbered) or unordered (bulleted) lists, you can show details in a neat, organized way.

Activity: Building a Webpage with More Structure

Now that we know how to create headings, paragraphs, and lists, let’s build a webpage about your favorite subjects in school.

  1. Open EduBlocks and create a new project.
  2. Use a Heading Block to add a title like “My Favorite Subjects.”
  3. Use a Paragraph Block to write a short introduction, such as “Here are the subjects I enjoy the most in school.”
  4. Use an Unordered List Block to list your favorite subjects. For example:
    • Math
    • Science
    • Art
    • History
  5. In each list item, explain why you like that subject.
  6. Click Preview to see your webpage.

What Have We Learned?

In this chapter, we learned how to use HTML blocks in EduBlocks to build the structure of a webpage. You now know how to:

  • Add headings to organize sections of your webpage.
  • Write paragraphs to explain your ideas.
  • Use lists to organize information in a clear way.

These elements form the basic structure of most webpages, and you will use them a lot as you continue learning web development.

Activities

  1. Build a Structured Webpage:
    • Use EduBlocks to create a webpage about your favorite foods. Add a heading, a paragraph, and a list of your top 3 favorite foods with descriptions.
  2. Explore List Types:
    • Try using both ordered and unordered lists. What happens when you change between the two? Which list type is better for different kinds of information?