Web Worriors !!
HTML: The Skeleton That Shapes Every Website!

HTML: The Skeleton That Shapes Every Website!

The Foundation Behind Every Website

Kumar Nirupam's photo
Kumar Nirupam
·

7 min read

Table of contents

Introduction

HTML it stands for Hyper Text Markup Language . In the Building a website on the Internet HTML acts as the Skeleton which gives the website a structure —— like in the Human body the skeleton give the structure and the framework to the body , on which muscles, organs and other stuffs are placed to make it fully functional. HTML acts as the base and top off it we could use CSS for styling the website and use JS to make it functional.

HTML is not a Programming language .

Understanding HTML :

Brief History of HTML :

HTML was first introduced by Tim Berners-Lee in 1991.

Tim Bernes-Lee

Over the years, HTML evolved through various versions:

  • HTML 1(1993): The first version.

  • HTML 4(1999): Widely used until HTML5.

  • HTML 5(2014): Modernized for multimedia content and responsive design was included.

Basics of HTML

While writing code in editors like VSCode, we can use Emmet shortcuts to code faster and save a lot of time, I will also provide helpful Emmet shortcuts to speed up coding in HTML.

HTML Structure

Type ! and press Tab to instantly generate an HTML boilerplate in VSCode!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Key Components:

  • <!DOCTYPE html>: Declares the document type as HTML for the browser.

  • <html lang="en">: The root element that wraps all the HTML content in English language, it could be in any other language like :

    <html lang="hi"> - for hindi

    <html lang="zh">- for Chinese.

  • <head>:Contains metadata like the page title, character encoding, and linked resources.

  • <body>:Holds the visible content of the webpage.

  • <title>:This tag is used to give name to the webpage which will displayit’s name on the tab section of the browsers.

Every HTML tags start with <html> and ends with </html>. Which is true for every tag in HTML.

Meta tags

Meta Tags are HTML elements that provide information about a web page, mostly to search engines and browsers beforhand .

  • Meta Charset

      <meta charset="UTF-8">

    Sets the character encoding to UTF-8, ensuring text displays correctly across all languages and special characters. We could use UTF-16 which also supports emoji’s on the browers.

  • Meta Viewport

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

    Makes your page mobile-friendly by adjusting its layout to fit the device's screen size and setting the default zoom level.

Common HTML Elements :

1. Headings ( <h1> to <h6> )

Headings tags are used to define the title and subheadings of the content. <h1> is the main heading, and <h6> is the smallest heading.

Type h1> the , hit Tab to auto generate tags .

<h1>This is a Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller Heading</h4>
<h5>Tiny Heading</h5>
<h6>Smallest Heading</h6>

2. Paragraphs ( <p> )

Paragraphs tag are used to display blocks of text.

<p>This is a paragraph of text that explains something in detail.</p>

Type Lorem*20 then, hit Tab, and instantly generate 20 random words.

3. Line Breaks ( <br> )

Line breaks are used to create a new line without starting a new paragraph.

<p>This is some text.<br>And this is a new line in the same paragraph.</p>

4. Horizontal Rules ( <hr> )

Horizontal rules create a visual separation between sections.

<p>This is the first section.</p>
<hr>
<p>This is the second section, separated by a horizontal rule.</p>

5. Text Formatting

  • Bold (<b>)
    The <b> tag makes text bold, often used for emphasis.

      <p><b>This text is bold.</b></p>

  • Italic (<i>)
    The <i> tag makes text italicized.

      <p><i>This text is italicized.</i></p>

  • Strong (<strong>)
    The <strong> tag is used to emphasize text and is typically displayed in bold by default.

      <p><strong>This text is important and strong.</strong></p>

6. Lists

  • Ordered List (<ol>)
    An ordered list displays items in a numbered sequence points.

      <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ol>

  • Unordered List (<ul>)
    An unordered list displays items with bullet points.

    Use ul>li*3 and click Tab key, this automatic generate list structures.

      <ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
  </ul>

  • List Items (<li>)
    List items are the individual elements in both ordered and unordered lists.

      <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

7. Nested Lists

A nested list is a list within another list, which can help organize items hierarchically.

<ul>
  <li>Item 1
    <ul>
      <li>Sub-item 1.1</li>
      <li>Sub-item 1.2</li>
    </ul>
  </li>
  <li>Item 2
    <ol>
      <li>Sub-item 2.1</li>
      <li>Sub-item 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ul>

Links and Navigation

Creating Links
Use the <a> tag:

<a href="https://example.com"  target: "_blank" >Visit</a>

Attributes:

  • href: URL of the link of the content .

  • target: Specifies how the link opens (e.g., _blank). This helps if we want to open the link in on the current tab, or use new tab on the browser.

Don't use 'www.example.com' as the href because it may append 'www' on top of the current webpage, causing the link to not open correctly; instead, use 'https://' to ensure the proper link is opened.

Images and Multimedia

Images

<img src="image.jpg" alt="Description" width="300" height="200">

  • src: Path to the image.

  • alt: Alternative text for accessibility if the content failed to generate.

  • width & height :They are used to give a dimension to the image.

Multimedia

Videos:

This tag is used when the

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

iframe tag :

The <iframe> tag is used to embed an external webpage or content within the current page. It requires a src attribute (URL of the content), and you can set the width and height for display. Common uses include embedding videos, maps, or external websites.

Example:- If you want to access a Youtube video from your webpage , we use iframe in it.

<iframe src="https://www.example.com" width="600" height="400" title="Website"></iframe>

Audio:

  •           <audio controls>
              <source src="audio.mp3" type="audio/mpeg">
          </audio>

Tables

Tables are used to display data in a structured format of rows and columns. The <table> tag is the container for all the table content, and it's made up of various other tags for rows, columns, and data.

Key Tags for Tables:

  1. <table>: Defines the table itself.

  2. <tr>: Defines a row within the table.

  3. <th>: Defines a table header cell (bold and centered by default).

  4. <td>: Defines a regular table data cell.

  5. <th>: Groups the header content in a table.

  6. <tb>: Groups the body content in a table.

  7. <tf>: Groups the footer content in a table.

Example:

<table border="2">
        <tr>
            <th>City</th>
            <th>Country</th>
            <th>Population</th>
        </tr>
        <tr>
            <td>Delhi</td>
            <td>India</td>
            <td>400 million</td>
        </tr>
        <tr>
            <td>New York</td>
            <td>USA</td>
            <td>200 million</td>
        </tr>
        <tr>
            <td>London</td>
            <td>UK</td>
            <td>300 million</td>
        </tr>
    </table>

Special Attributes:

  • border: Adds a border to the table .

  • colspan: Specifies how many columns a cell should span.

  • rowspan: Specifies how many rows a cell should span.

Semantic HTML

Semantic HTML involves using HTML tags that not only define the structure of the content but also convey its meaning. Instead of just picking a <div> and styling it with .class or #id, HTML5 introduced predefined tags that make coding way easier. For example, instead of using a generic <div> for navigation, you can use the <nav> tag, and for the footer section, you use the <footer> tag. These tags help define the content’s purpose directly, making the code cleaner and more meaningful.

Common Semantic Tags:

  • <header>: Represents the header section of a document or section, typically containing elements like navigation links, logos, or introductory content.

  • <footer>: Defines the footer of a document or section, often including copyright information, contact details, or footer navigation links.

  • <section>: Groups related content into a distinct section, often with its own heading to define the content’s theme or topic.

  • <article>: Represents a self-contained piece of content, such as a blog post, news article, or any section that could be distributed independently.

  • <nav>: Specifies a navigation menu or links that guide users to other sections or pages.

  • <aside>: Contains content that is indirectly related to the main content, like sidebars, pull quotes, or related links.

  • <main>: Defines the primary content of the document, excluding elements like headers, footers, and navigation.

Conclusion

Now, we've gained a deeper understanding of how websites are structured. From the most visually stunning, feature-rich websites to the simplest, minimalistic designs, all websites are fundamentally built on HTML, which defines their core structure. Whether it's a complex, interactive platform or a straightforward, no-frills webpage, HTML serves as the backbone for organizing content and layout, making it an essential element in web development.

If you like this article please share you feedbacks ——>

Want More—- ?

Follow —> Kumar Nirupam , twitter

2Articles1WeekChaiCode