HTML for Beginners: Building the Skeleton of a Webpage

TLDR:

HTML (HyperText Markup Language) is the core language for creating webpages. It employs elements (tags) to structure and present content like headings, paragraphs, links, and images. This blog covers the fundamentals of HTML, offering essential concepts and a guide to building a basic webpage structure.

Introduction:

Internet has become an integral part of our lives and it’s core lies web development. Have you ever thought how webpages are built? HTML(Hyper Text Markup Language) is the answer to it. HTML is the foundation of every website, serving as the “skeleton” holding the content in place and providing structure to what we see on the internet.

What is HTML?

HTML(Hypertext Markup Language) is a markup language used to create the structure of a webpage. It provides structure to webpages using tags and elements such as headings, paragraphs, images and links.

Key Concepts of HTML:

HTML Elements: An HTML element consists of a start tag, content, and an end tag. For example:
```
 <p>This is a paragraph.</p>
```
- <p> is the opening tag.
- This is a paragraph. is the content.
- </p> is the closing tag.
Attributes: HTML elements can have attributes, which provide additional information about the element. For example:
```
 <img src="image.jpg" alt="A descriptive text">
```
- src specifies the image source.
- alt provides alternative text if the image cannot be displayed.
HTML Document Structure: An HTML document has a specific structure, starting with the <!DOCTYPE html> declaration and organised using elements like <html>, <head>, and <body>.

Building the Skeleton of a Webpage:

Now, let's create the skeleton of a webpage step by step.

Step 1: Start with the Doctype Declaration

The first line in any HTML document is the doctype declaration:

<!DOCTYPE html>

This tells the browser that the document follows HTML5 standards.

Step 2: Add the `<html>` Element

The <html> element is the root element of an HTML document. All other elements are nested inside it:

<!DOCTYPE html>
<html>
</html>

Step 3: Create the `<head>` Section

The <head> section contains metadata about the webpage, such as its title, character encoding, and links to stylesheets or scripts. Add the following inside the <html> element:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
</html>

<meta charset="UTF-8"> specifies the character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> makes sure the webpage is responsive.
<title> specifies the webpage title that is displayed on the browser tab.

Step 4: Add the `<body>` Section

The <body> section contains the visible content of the webpage. Add it below the <head> section:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My First Webpage</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

<h1> defines a top-level heading.
<p> represents a paragraph.

Step 5: Save and Open in a Browser

Save the file with an .html extension, e.g., index.html.
Open the file in a web browser to view your first webpage.

Common HTML Elements for Webpage Structure:

Now that you have the skeleton, let's explore more elements commonly used in HTML.

1. Headings:

HTML provides six levels of headings, <h1> to <h6>, where <h1> is the largest and <h6> is the smallest:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

2. Paragraphs and Line Breaks:

<p> are used for paragraphs:
```
  <p>This is a paragraph of text.</p>
```

<br> used for line breaks:

  This is the first line.<br>This is the second line.

3. Links:

<a> used for creating links:

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

href specifies the URL the link points to.

4. Images:

<img> tag used for adding images:

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

src specifies the image location.
alt provides alternative text for accessibility.

5. Lists

Ordered List (numbered):

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

Unordered List (bulleted):

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

6. Tables:

<table> used for creating tables:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

<tr> defines a row.
<th> defines a header cell.
<td> defines a data cell.

7. Divisions and Spans

<div> is a block-level container used for grouping elements:

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

<span> is an inline container used for styling small portions of text:

  <p>This is <span style="color: red;">highlighted text</span>.</p>

8. Forms

Forms allow user input:

<form action="index.js" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>

Structuring a Complete Webpage

Here’s an example of a webpage combining all the elements we’ve learned:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Webpage</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>We are passionate about web development and design.</p>
        </section>

        <section id="services">
            <h2>Our Services</h2>
            <ul>
                <li>Web Design</li>
                <li>SEO Optimization</li>
                <li>Content Creation</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
    </footer>
</body>
</html>

Tips for Writing Clean HTML:

Indentation: Using proper indentation to make code readable.
Comments: Adding comments using  to explain the code.
Validating Code: Using tools like the W3C Validator to ensure HTML is error-free.
Semantic Tags: Prefering <header>, <footer>, <article>, and <section> over <div> for better structure and accessibility.

Conclusion:

HTML is the foundation for any aspiring web developer. Mastering how to create a webpage's skeleton marks the first step into web development.

Join the Discussion:

We appreciate your thoughts and experiences with HTML! Kindly use the comment section to ask any questions, share your views, or discuss how you can apply this in real life.

Engage with Us:

👍 Did you find this article helpful? Give it a like!
💭 Share your favourite tech jokes in the comments.
🔔 Subscribe for more tech content that's educational and occasionally funny.

Your feedback helps us create better content. Drop a comment below about:

Your experience with HTML.
Suggestions for future technical articles.