HTML, once a cornerstone of the digital landscape, is starting to slip from the minds of the younger generation. As technology continues to evolve, it’s essential to stay updated and maintain our understanding of HTML. Let’s dive in and refresh our knowledge to ensure we’re prepared for the digital challenges ahead.

What is HTML?

HTML is the most basic, and the most important language a developer should be aware of. HTML stands for Hypertext Markup Language. It is the standard markup language used to create and design web pages. HTML provides the structure and framework for web content by using a system of tags and attributes to define elements within a document. These elements include headings, paragraphs, images, links, lists, forms, and more.

HTML documents contain elements enclosed in opening and closing tags, which describe the content and how it should be displayed in a web browser.

<!DOCTYPE html>
  <title>My Web Page</title>
  <h1>Welcome to My Web Page</h1>
  <p>This is a paragraph of text.</p>
  <img src="image.jpg" alt="An image">
  <a href="">Visit</a>
HTML is complemented by Cascading Style Sheets (CSS) for styling and layout, as well as JavaScript for interactivity and dynamic behavior, forming the foundation of modern web development

The key components of HTML include:

  1. Elements: HTML documents are structured with elements using tags. Elements define the structure and content of the document, such as headings, paragraphs, links, images, lists, forms, etc.
    • The HTML element is everything from the start tag to the end tag:
    • <tagname> Content goes here… </tagname>

      </p><h1>First Heading</h1><p></p><p>Paragraph content...</p><p>

  2. Tags: Tags are the building blocks of HTML. They define the beginning and end of an element and are enclosed in angle brackets. Tags come in pairs: opening tags (<tag>) and closing tags (</tag>). Some elements, like images and line breaks, are self-closing and do not require a closing tag.
  3. Attributes: Attributes provide additional information about an element and are specified within the opening tag. They are usually in the form of name-value pairs, such as src=”image.jpg” for specifying the image source or href=”” for specifying the hyperlink destination.

    <br />The <a> tag having href as its attribute:<br /></a><a href=""> Visit Me </a><br />

    <br />The <img /> tag having src as its attribute:<br /><img src="img_boy.jpg" br="" /> <img src="" /><br />

  4. Document Structure: HTML documents have a specific structure defined by tags like <!DOCTYPE html>, <html>, <head>, and <body>. These tags define the document type, root element, metadata, and main content.
  5. Text Content: HTML allows the inclusion of text content within various elements such as paragraphs (<p>), headings (<h1>-<h6>), lists (<ul>, <ol>, <li>), and more. Text content forms the core of most web pages.
  6. Links and Anchors: Hyperlinks are created using the anchor element (<a>), allowing users to navigate between different web pages or sections on the same page.
  7. Images: Images are included in HTML documents using the image element (<img>) with the src attribute specifying the image file’s URL or path.
  8. Forms: HTML provides form elements (<form>, <input>, <textarea>, <select>, etc.) for collecting user input, such as text, checkboxes, radio buttons, and dropdown menus.
  9. Tables: Tables (<table>, <tr>, <td>, <th>) are used to organize and display tabular data in rows and columns.
  10. Comments: Comments in HTML are written using <!– comment –> syntax and are not displayed in the browser. They are useful for adding notes or explanations within the HTML code for developers.

Understanding these components is essential for creating well-structured and semantically meaningful HTML documents.

Here’s a quick video on how the basic structure of HTML works:

Play Video

As you can see that’s pretty much it LOL


~ click image at your own risk lol ~

Ryner Galaus

Ryner SG

An ordinary person with a tiny brain hoping to be useful in his own way. A homebody hoping to one day create and build his dreams while in service to people. An underachiever who was once called nobody slowly growing up. A web developer learning and earning his way through life. Ryner is what my family and friends call me, and I hope you do too. By the way, I am also affiliated with Frontrow International, so for inquiries or orders, message me.

1 Comment

HTML + Bootstrap Starting Template – Ryner World · March 26, 2024 at 3:52 am

[…] below, ensure you are familiar with HTML and Bootstrap. A brief overview of HTML can be found here [], and for Bootstrap, here’s the overview and main link […]

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *