Understanding of HTML Basics

Nishant KumarNishant Kumar
3 min read

HTML - HyperText Markup Language

It is the most basic building block of the Web.

"Hypertext" refers to links that connect web pages to one another

HTML uses "markup" to annotate text, images, and other content for display in a Web browser

Content of Article

  • Skeleton of Webpages

  • Understanding of HTML tags and Element

What is Web Skeleton and Basics of HTML

Web skeleton refers to the basic structure of a website, similar to how a human body has a skeleton.

HTML Boilerplate

<!DOCTYPE html>

Declares the document as HTML5.

<html lang="en">

Defines the language as English.

<meta charset="UTF-8">

Ensures proper text encoding.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Makes the page responsive.

<title> → Sets the webpage title.

<link rel="stylesheet" href="styles.css">

Links an external CSS file.

<script src="script.js"></script>

Links an external JavaScript file.

Understanding of HTML tags and Element

HTML markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <search>, <output>, <progress>, <video>, <ul>, <ol>, <li>

HTML elements serve as the foundational components of a webpage, defining both its structure and content. Each element includes an opening tag, content, and a closing tag, except for self-closing elements.

An HTML element stands out from the regular text in a document because of its "tags." These tags have the element name wrapped in < and >. Plus, you don't have to worry about the case; the name inside the tag can be in any combination of uppercase or lowercase letters.

<header>, <main>, <footer> → Basic semantic structure.

Header : The element in HTML is all about the introductory stuff on a page. It usually contains things like navigation links and other info that helps set the scene.

Main: The <main> element in HTML represents the main content of a webpage. It contains the core information.

Footer : The HTML<footer> element is basically the bottom part of the nearest section or the main part of the page. It's like wrapping up the content in that area.

Good Practices

  • Proper Nesting: Close tags correctly.
    <p><strong>Text</strong></p>

  • Use Semantic Tags: Prefer <header>, <nav>, <section> over <div>.

  • Meaningful Class/ID Names: Avoid generic names like div1, use error-message.

  • Accessibility: Add alt for images, use <label> for form inputs.

  • Keep Code Clean: Indent properly, use lowercase tags, avoid inline styles.

  • External CSS & JS: Link stylesheets and scripts separately.

  • Meta Tags: Use <meta name="viewport" content="width=device-width, initial-scale=1.0"> for responsiveness.

HTML similar to Building blueprint

An HTML document is kind of like a building blueprint because both lay out a structured plan for what the final result will be.

  • Foundation & Structure: A blueprint shows the basic setup of a building, just like HTML maps out how a webpage is structured.

  • Sections & Layout: Blueprints break a building into different rooms (like the kitchen or living room), while HTML uses elements like <header>, <section>, and <footer> to keep content organized.

  • Labels & Identifiers: Just as rooms on a blueprint are labeled (like "Bathroom"), HTML uses id and class attributes to name different sections.

  • Functionality & Integration: A blueprint includes plans for things like wiring and plumbing, just as HTML works with CSS for styling and JavaScript for making things interactive.

0
Subscribe to my newsletter

Read articles from Nishant Kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5HTML tags htmlbasicsWeb DevelopmentwebdevChaiaurcodeChaiCohort

Written by

Nishant Kumar
Nishant Kumar