HTML Coding

Structuring the Web development With HTML

At Codelabpro, we make coding easier and enable learners with top notch programming tutorials, courses, and resources. Whether you are a novice making your initial strides in coding or a seasoned developer aiming to improve your skills we offer practical real world insights to assist you in achieving success.

Get Quote
Youtube Instagram Facebook-f

What is HTML?

HTML stands for HyperText Markup Language. It is a standard language used to create and structure web pages for the World Wide Web. It defines the arrangement and content of a web page through markup tags. Such tags are used to structure text, images, links, tables, forms, and multimedia.

  • HyperText: denotes the possibility of connecting with more resources (web pages) which is realized through hyperlinks.
  • Markup Language: is a scheme based on tags that outlines the structure and function of content.
An HTML document is made of:
  • Tags: Enclosed in angle brackets (< >), e.g. <p> for a paragraph. 
  • Attributes: Provide additional properties to tags, e.g. class, id. 
  • Elements: A combination of opening and closing tags with content in between.
Example of an HTML Tag and Element:

<p id=”intro”>This is a paragraph.</p>

  • <p>: Opening tag. 
  • id=”intro“: Attribute defining a unique identifier. 
  • This is a paragraph: Content inside the element. 
  • </p>: Closing tag.

Types of HTML Elements

HTML elements are categorized into types based on their purpose and behavior:

  • Define the structure of the webpage.
  • Examples: <header>, <footer>, <main>, <section>, <article>

Example

<header>

    <h1>Welcome to My Website</h1>

</header>

 
  • Style or organize text content. 
  • Examples: <h1> to <h6> (headings), <p> (paragraph), <strong> (bold), <em> (italic)
Example

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

  • Facilitate user interaction. 
  • Examples: <button>, <form>, <input>, <textarea>

Example

<form>
    <input type=”text” placeholder=”Enter your name”>
    <button type=”submit”>Submit</button>
</form>

  • Embed images, videos, or audio. 
  • Examples: <img>, <video>, <audio>

Example

<video controls>
<source src=”movie.mp4″ type=”video/mp4″>
</video>

  • Create navigational links between pages or sections. 
  • Examples: <a> (anchor tag)

Example

<a href=”https://codelabpro.org”>Visit now</a>

  • Organize content into rows and columns. 
  • Examples: <table>, <tr>, <td>, <th>

Example

<table>
        <tr>
             <th>Name</th>
             <th>Age</th>
        </tr>
        <tr>
              <td>John</td>
              <td>30</td>
        </tr>
</table>

  • improve content readability for both users and search engines. 
  • Examples: <nav>, <article>, <aside>, <time>

Example

<article>

    <h2>HTML Basics</h2>

    <p>HTML is the foundation of web pages.</p>

</article>

 

Categories of HTML

  • Occupy the full width of the parent container.
  • Start on a new line.
  • Examples: <div>, <p>, <h4>, <section>
  • Only take up as much width as required.
  • Do not start on a new line.
  • Examples: <span>, <a>, <strong>
  • Do not have a closing tag.
  • Examples: <img>, <br>, <hr>
 
  • No longer recommended due to modern alternatives.
  • Examples: <font>, <center>, <marquee> (replaced by CSS).

Example of a Complete HTML Document

<!DOCTYPE html>
<html>
<head>
        <title>HTML Overview</title>
</head>
<body>
       <header>
             <h1>Understanding HTML</h1>
             <nav>
                      <a href=”#types”>Types</a> |  
                      <a href=”#categories”>Categories</a>
               </nav>
       </header>

        <main>
                   <section id=”types”>
                               <h2>HTML Types</h2>
                               <p>HTML includes various types of elements such as structural, multimedia, and semantic elements.</p>
                  </section>

            <section id=”categories”>
                      <h2>HTML Categories</h2>
                       <ul>
                              <li>Block-Level Elements</li>
                              <li>Inline Elements</li>
                              <li>Void Elements</li>
                       </ul>
                      </section>
              </main>

      <footer>
             <p>Join codelabpro.org</p>
       </footer>
</body>
</html>

Summary

  • HTML is quite fundamental in developing web pages and websites. 
  • It incorporates tags, attributes and elements into content definition. 
  • Further, there are different categories of elements: multimedia, semantic, structural, and interactive components. 
  • Other classifications include block-level, inline, and void elements.