Getting Started with HTML

sayge learn html and webdevelopment

HTML, or HyperText Markup Language, is the foundation of every web page. It’s a markup language that structures the content on a webpage and defines its layout.

Learning HTML: The Basics

Learning HTML is not as daunting as it may seem. Start by understanding the basic structure of an HTML document. An HTML document consists of elements, which are represented by tags. Tags are enclosed in angle brackets and usually come in pairs: an opening tag and a closing tag.

For example, the <h1> tag is used to define a heading, while the <p> tag is used to define a paragraph. By using different tags, you can structure your content and give it meaning.

Building Your First Web Page

Basic Structure of a Web Page

Let’s start with the basic structure of a web page. Every web page consists of a <!DOCTYPE> declaration, an <html> tag that wraps all content, a <head> section for metadata, and a <body> which contains all visible content.

<!DOCTYPE html>
    <title>Your Web Page Title Here</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Link to CSS file -->
    <link rel="stylesheet" href="style.css">
    <!-- Page content goes here -->
  • <!DOCTYPE html>: Tells the browser which version of HTML the page is written in.
  • <html>: The root element that contains all other HTML elements.
  • <head>: Contains metadata about the document, including its title, character encoding, and links to CSS files.
  • <body>: Contains the content of the document, such as text, images, and other media​ (FreeCodeCamp)​.

Please confirm if you’d like to proceed to the next section on Semantic HTML.

Semantic HTML

Semantic HTML introduces meaning to the web page structure through specific tags that define the role of each part of the content, making it more accessible and SEO-friendly. Here’s how to use some fundamental semantic HTML5 elements:

<!DOCTYPE html>
    <title>Semantic HTML Example</title>
    <meta charset="UTF-8">

    <h1>My Blog</h1>
            <li><a href="#home">Home</a></li>
            <li><a href="#posts">Posts</a></li>
            <li><a href="#contact">Contact</a></li>

        <h2>About Me</h2>
        <p>This section can contain information about the site owner or the purpose of the website.</p>
        <h3>My First Blog Post</h3>
        <p>This is the content of your first blog post.</p>

    <p>Contact us at</p>

  • <header>: Defines the header section of the page, typically containing the website’s title and navigation.
  • <nav>: Used for the navigation menu, making it easier for users and search engines to find your main pages.
  • <main>: Represents the main content of your document, distinct from sidebars, footers, or navigation links.
  • <section>: Defines a section in a document, such as chapters, headers, footers, or any other sections of the document.
  • <article>: Specifies independent, self-contained content that could be distributed outside the web page, like blog posts or news articles.
  • <footer>: Defines the footer section of the page, usually containing copyright information, contact details, or links to privacy policies​ (OpenClassrooms)​.

This structure not only helps in making the content more accessible but also plays a significant role in SEO. Confirm if you’re ready to move on to incorporating media into your web pages.

orange plastic blocks on white surface

3. Incorporating Media into Web Pages Tutorial

Adding images and videos can greatly enhance the appeal of your web page. Here’s how to embed these media types using HTML:

Adding an Image

The <img> tag is used to embed images in your HTML documents. This tag is self-closing, meaning it doesn’t need an end tag. The src attribute specifies the path to the image file, while the alt attribute provides alternative text for the image if it cannot be displayed.

<img src="path/to/your/image.jpg" alt="Description of the image">

Adding a Video

The <video> tag enables you to embed video files into your web pages. This tag supports multiple source files (to ensure compatibility across different browsers) through the <source> tag. The controls attribute adds video controls, like play, pause, and volume.

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
  • The <source> tags within the <video> tag specify different video formats to accommodate various browsers.
  • The text inside the <video> tag (e.g., “Your browser does not support the video tag.”) is displayed only if the browser doesn’t support the <video> tag​ (FreeCodeCamp)​.

These elements enhance the interactivity and visual appeal of your website, making your content more engaging for visitors. Confirm if you’re ready to learn about links and navigation.

Hiring Full Stack developers gives businesses access to pros proficient in various technologies and frameworks. Their versatility streamlines collaboration, leading to faster development and enhanced efficiency.

Links and Navigation

Links are a crucial part of web navigation, allowing users to click from one page to another or to a specific section within a page. The <a> tag is used for creating hyperlinks in HTML.

Creating a Simple Link

To create a link, you wrap the <a> tag around the text or image you want to act as the link. The href attribute specifies the URL that the link goes to.

<a href="">Visit</a>

Linking to Sections Within the Same Page

You can also use the <a> tag to link to specific sections within the same page. This is done by assigning an id to the section you want to link to, and then setting the href attribute of the <a> tag to # followed by the id.

<!-- Link to the section -->
<a href="#section1">Go to Section 1</a>

<!-- The section in the same page with an ID -->
<div id="section1">
  <h2>Section 1</h2>
  <p>This is the content of Section 1.</p>

Navigation Menus

Navigation menus are typically created using a combination of <nav>, <ul>, and <a> tags. The <nav> tag defines a navigation link section, <ul> creates an unordered list, and <li> tags define list items within the list. Each list item contains an <a> tag with a link.

    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>

This setup helps users navigate your site efficiently, improving the overall user experience​ (MDN Web Docs)​.

Please confirm if you’re ready to proceed to the final section, which covers additional resources and further exploration in web development.

Would you like to get engaged with professional Specialists?

We are a software development team with extensive development experience in the Hybrid and Crossplatform Applications development space. Let’s discuss your needs and requirements to find your best fit.

Further Exploration and Resources in Web Development

Diving into web development can be an exciting journey, and there’s always more to learn. Here are some resources and tips for further exploration after you’ve mastered the basics:

Online Learning Platforms

  • MDN Web Docs: A comprehensive resource for developers, offering guides and references on HTML, CSS, JavaScript, and more.
  • FreeCodeCamp: Offers free coding lessons and projects in web development, including responsive web design and front-end libraries.
  • Codecademy: Provides interactive coding lessons in various programming languages and web development technologies.

Web Development Resources

Resource TypeNameURL
Online LearningMDN Web
BookHTML and CSS: Design and Build WebsitesAmazon Link
CommunityReddit – r/
CommunityReddit – r/
Web Development BlogsSmashing
Web Development
Code EditorVisual Studio
Code EditorSublime
Browser ToolsChrome Developer ToolsGoogle Chrome
Browser ToolsFirefox Developer EditionMozilla Firefox
Best Web Development Resources and Platforms

Elevate your software engineering skills without any subscription required!

Aditya Rana Avatar

More On This Topic