□

Mangcoding

icon chat
Mulida Asti - Wednesday, 26 February 2025 - 11 months ago

HTML Basics: Understanding the Structure and Usage of HTML for Beginners

single image
Photo By Valery Sysoev on Unsplash

html

HTML, or Hypertext Markup Language, is the standard markup language used to create websites. Before diving deeper into HTML, let’s review a few important terms you should know.

What is a Website?

A website is a collection of interconnected web pages, usually hosted on a server, and containing information from individuals, groups, or companies (source: Wikipedia).

In simpler terms, a website is a digital page that stores information—whether personal, group-based, or corporate—that anyone with an internet connection can access.

What is a Browser?

A browser is a computer application used to open and view web pages. Without a browser, you would not be able to access any website.

What is a Text Editor?

A text editor is an application used to write, edit, and save text files. Some text editors are designed specifically for coding with HTML.

👉 We will explore text editors in more detail in the next lesson.

 

Development of HTML

According to W3Schools, here are some key points you need to know about HTML:

  • HTML stands for Hypertext Markup Language.

  • HTML describes the structure of a web page using markup.

  • HTML elements consist of tags that build a page.

  • HTML tags act as labels that define content types, such as:

    • Headings (<h1> … <h6>)

    • Paragraphs (<p>)

    • Tables (<table>)

  • Browsers do not display tags directly. Instead, they render the tags into a visible web page.

  • To view the HTML structure of a site, press Ctrl + U or choose View Page Source in your browser.

Example of a Simple HTML Document

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic HTML</title>
</head>
<body>
    <nav> 
         <a href="#">Home</a> 
         <a href="#">Page</a> 
         <a href="#">Contact</a> 
    </nav>
    <section id="content">
        <article>
            <h3>Your First Article</h3>
            <p> Your first HTML page. </p>
            <a href="#">More</a>
        </article>
        <article>
            <h3>Your second article</h3>
            <p> Your first HTML page. </p>
            <a href="#">More</a>
        </article>
    </section>
    <footer>
        <p>Copyright is protected by law</p>
    </footer>
</body>
</html>

Quick Explanation

  • The <!DOCTYPE html> Declares the document as HTML5.
  • The <html> root element of the HTML document.
  • The <head> Contains metadata and information about the web page.
  • The <title> Defines the title of the page.
  • The <body> Contains all visible elements on the web page.
  • The <h1> Defines a heading with the largest font size.
  • The <p> Defines a paragraph.
  • <header>,<nav>,<section>,<article>,<footer> These elements help structure a web page into specific sections. Introduced in HTML5, they provide better content organization but do not have special styling by default.</>

This is a brief introduction to HTML basics. You now understand what a website, browser, and text editor are, as well as how HTML structures a page.

By learning HTML step by step, you will build a strong foundation for web development. Remember, consistent practice is the key to mastering HTML.

This article on Understanding the Use of HTML is brought to you by Mangcoding. Hopefully, it’s useful and gives you new insights.

👉 If you have suggestions, feedback, or tutorial requests, feel free to leave a comment or reach us through email and social media.

Link Copied to Clipboard