Introduction to HTML

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. It structures the content on the internet, like text, images, links, and videos, so that browsers can display them properly. Think of HTML as the skeleton of a website. It defines how the content should be arranged, like headings, paragraphs, lists, and links.

HTML Documents

An HTML document is a text file that contains HTML code. It is the basic building block of a website and is used to structure the content that will be displayed in a web browser. HTML documents have a specific structure, which makes it easy for browsers to understand and render the content correctly.

Structure of an HTML Document

An HTML document typically follows this structure:

  1. <!DOCTYPE html>
    This declaration tells the browser that the document is an HTML5 document.

  2. <html>
    The <html> tag is the root element that wraps all the content of the HTML document.

  3. <head>
    The <head> section contains meta information about the document, like the title, character set, and links to stylesheets or scripts. It is not visible to the user.

    • <title>: Defines the title of the webpage, which appears in the browser tab.

    • <meta>: Provides metadata such as the character encoding or author of the page.

  4. <body>
    The <body> tag contains all the visible content of the webpage, such as text, images, links, and other elements that users interact with.

Example of an HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>

Explanation

  • The <!DOCTYPE html>declaration defines that this document is an HTML5 document
  • The <html>element is the root element of an HTML page
  • The <head>element contains meta-information about the HTML page
  • The <title>element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
  • The <body>element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1>element defines a large heading
  • The <p>element defines a paragraph

Basic Structure of an HTML Document

Every webpage on the internet is built using HTML (HyperText Markup Language). An HTML document has three main parts, and these main parts are DosetypeDecclaration, HTML Document, and Head And Body section.

1. DOCTYPE Declaration (<!DOCTYPE html>)
  • It tells the web browser that the document is written in HTML5 (the latest version of HTML).
  • Without this declaration, the browser might not display the webpage correctly.

✅ Example:

<!DOCTYPE html>

2. HTML Document (<html> ... </html>)

  • Everything in an HTML document is written inside <html> tags.
  •  This tag acts like a container for all the content.
  • The <html> tag has two main parts:
  1. Head Section (<head> … </head>)
  2. Body Section (<body> … </body>)

3. Head and Body Sections

a) Head Section (<head> ... </head>)

  1. a) Head Section (<head> … </head>)
  • The <head> section contains important information about the webpage.
  • This information is not visible on the webpage but helps the browser understand the page.
  • It includes:
    • Title of the webpage (shown on the browser tab).
    • Meta information (helps search engines and browsers).
    • Links to CSS files (for styling the page).
    • Links to JavaScript files (for interactive features).

✅ Example of the Head Section:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
  • <meta charset="UTF-8"> → Allows different languages and symbols to be used.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the website look good on mobile devices.
  • <title>My First Webpage</title> → Shows the title of the page in the browser tab.

b) Body Section (<body> ... </body>)

  • The <body> section contains everything visitors can see on the webpage.
  • This includes: Text, Images, Links, Videos, Buttons,Forms

✅ Example of the Body Section:

<body>

<h1>Welcome to My Website</h1>

<p>This is a simple HTML document structure.</p>

</body>

<h1> → This is a heading (largest size).

<p> → This is a paragraph of text.

Complete HTML Document Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple HTML document structure.</p>
</body>
</html>

Summary of the HTML Structure

PartDescription
<!DOCTYPE html>Declares the document as HTML5.
<html>The main container of the webpage.
<head>Contains information about the webpage (title, meta tags, CSS links, etc.).
<body>Contains the visible content of the webpage.

Definition of an HTML Tag

  • An HTML tag is a code element used to define the structure and content of a webpage.
  • HTML tags are enclosed in angle brackets (< >) and usually come in pairs: an opening tag (<tag>) and a closing tag (</tag>), except for self-closing tags.

  • The following diagram illustrates how tags are commonly used in HTML elements:

Definition of an HTML Tag
Types of HTML tags:

There are various tags in HTML some of the tags are described below.

  1. Singular Tags (unpair tag)

    Singular, or self-closing tags, do not require a closing tag. They stand alone and often include attributes. Examples:

<br> <!-- Line break -->
<img src="image.jpg" alt="An image"> <!-- Image tag -->
<hr> <!-- Horizontal line -->
<input type="text" placeholder="Enter your name"> <!-- Input field -->

2. Pair tags

  • In HTML, pair tags consist of an opening tag and a closing tag. The closing tag includes a forward slash (/) before the tag name. Pair tags enclose content and define elements with both structure and meaning.

Examples of Pair Tags:

Paragraph (<p>...</p>)

  • Heading (<h1>...</h1> to <h6>...</h6>)

    <h1>Main Heading</h1>
    <h2>Subheading</h2>

  • Anchor (<a>...</a>)

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

  • Bold (<b>...</b>) and Strong (<strong>...</strong>)

    <b>Bold text</b>
    <strong>Important text</strong>

  • Italic (<i>...</i>) and Emphasis (<em>...</em>)

    <i>Italic text</i>
    <em>Emphasized text</em>

  • Div (<div>...</div>)

    <div>
    <p>This is inside a div.</p>
    </div>

  • Span (<span>...</span>)

    <p>This is <span style="color: red;">colored</span> text.</p>

  • List Tags

    • Unordered List (<ul>...</ul>)

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

    • Ordered List (<ol>...</ol>)

      <ol>
      <li>First</li>
      <li>Second</li>
      </ol>
       

Some important of HTML tags in a table format:

TagDescription
<!DOCTYPE>Defines the document type and version of HTML.
<html>The root element of an HTML document.
<head>Contains metadata about the document (e.g., title, character set).
<title>Sets the title of the webpage (appears in the browser tab).
<meta>Provides metadata about the HTML document.
<link>Specifies relationships between the document and external resources (e.g., linking to CSS files).
<script>Defines client-side JavaScript.
<body>Contains the main content of the HTML document.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>Header tags, <h1> being the highest level.
<p>Defines a paragraph.
<a>Defines a hyperlink.
<img>Embeds an image.
<ul>Defines an unordered list.
<ol>Defines an ordered list.
<li>Defines a list item (used inside <ul> or <ol>).
<div>Defines a division or section in the document.
<span>A generic inline container for text or other elements.
<table>Defines a table.
<tr>Defines a table row.
<th>Defines a table header cell.
<td>Defines a table data cell.
<form>Defines an HTML form for user input.
<input>Defines an input field for forms.
<button>Defines a clickable button.
<label>Defines a label for an <input> element.
<select>Defines a drop-down list.
<option>Defines an option in a drop-down list.
<textarea>Defines a multi-line text input.
<iframe>Embeds another HTML page within the current page.
<audio>Embeds sound content.
<video>Embeds video content.
<br>Inserts a line break.
<hr>Defines a horizontal rule (line).
<blockquote>Defines a block of text that is a quotation.
<code>Defines a piece of computer code.
<pre>Defines preformatted text (spaces and line breaks preserved).
<footer>Defines the footer of a document or section.
<header>Defines the header of a document or section.
<nav>Defines navigation links.
<article>Defines an article or content that can be independently distributed.
<section>Defines a section of content.
<aside>Defines content aside from the main content (sidebar).
<main>Defines the main content of the document.

This table organizes the HTML tags with their descriptions for easy reference.

 HTML Attributes:

  • In HTML, attributes are used to provide additional information about an element. They describe characteristics of an element that may affect how it is displayed, how it behaves, or how it interacts with other elements or resources. Attributes are written within the opening tag of an HTML element, and they usually come in pairs: the attribute name and the attribute value.

1. Basic Syntax of HTML Attributes:
  • The general syntax for an attribute in HTML is:
<element attribute="value">
  • element: The HTML tag or element, such as <a>, <img>, <p>, etc.
  • attribute: The name of the attribute that you want to apply to the element (e.g., href, src, class, id, alt).
  • value: The value assigned to the attribute, usually in quotes (e.g., class="highlight", src="image.jpg").
2. Examples of Common HTML Attributes:

a hrefAttribute (Used in <a> tag for links):

  • The href (Hypertext Reference) attribute is used to specify the URL that a link should go to.
<a href="https://www.example.com">Click here to visit Example</a>
  • Element: <a> (anchor tag)
  • Attribute: href
  • Value: "https://www.example.com"
  • Result: This makes the text “Click here to visit Example” clickable. When the user clicks it, they are redirected to https://www.example.com.
b. src Attribute (Used in <img> tag for images):
  • The src (source) attribute is used to define the file path or URL of an image.
<img src="image.jpg" alt="A beautiful landscape">
  • Element: <img>
  • Attribute: src
  • Value: "image.jpg"
  • Result: This tells the browser to display an image from the file image.jpg. The alt attribute provides a text description of the image, which improves accessibility for visually impaired users or if the image fails to load.
c. alt Attribute (Used in <img> tag):
  • The alt (alternative text) attribute is important for accessibility. It provides a text description for images, which is displayed if the image is not available or for screen readers.
<img src="logo.png" alt="Company Logo">
  • Element: <img>
  • Attribute: alt
  • Value: "Company Logo"
  • Result: If the image can’t be displayed, the text “Company Logo” will be shown in its place. Additionally, this text helps screen readers describe the image to users with visual impairments.
d. class Attribute (Used with most HTML elements):
  • The class attribute is used to assign one or more class names to an element. These classes can be used in CSS (Cascading Style Sheets) to style the element or in JavaScript to interact with it.
<p class="highlight">This is a highlighted paragraph.</p>
  • Element: <p>
  • Attribute: class
  • Value: "highlight"
  • Result: The class="highlight" assigns the class “highlight” to the paragraph. You can use CSS to apply styles like changing the background color or font size to all elements with the highlight class.
.highlight {
  background-color: yellow;
  font-weight: bold;
}
e. id Attribute (Used with most HTML elements):
  • The id attribute gives a unique identifier to an element. It must be unique within a document and can be used for styling, JavaScript targeting, or linking within the page.
<h1 id="main-heading">Welcome to My Website</h1>
  • Element: <h1>
  • Attribute: id
  • Value: "main-heading"
  • Result: The id="main-heading" assigns a unique identifier to the <h1> tag. You can then reference this ID in JavaScript or CSS to style or manipulate this specific element.
#main-heading {
  color: blue;
}
f. style Attribute (Used for inline CSS):
  • The style attribute allows you to directly apply CSS styles to an element. However, it’s usually better to use external CSS for maintainability.
<p style="color: red; font-size: 20px;">This text is red and large.</p>
  • Element: <p>
  • Attribute: style
  • Value: "color: red; font-size: 20px;"
  • Result: This directly applies the CSS styles to the paragraph, making the text red and increasing its font size.
g. target Attribute (Used in <a> tag):
  • The target attribute specifies where to open the linked document (e.g., in the same window or a new tab).
<a href="https://www.example.com" target="_blank">Visit Example in a new tab</a>
  • Element: <a>
  • Attribute: target
  • Value: "_blank"
  • Result: The link will open in a new browser tab when clicked.

4. Types of HTML Attributes:

  1. Global Attributes: These attributes can be used with almost any HTML element. Common global attributes include:
    • id: A unique identifier for the element.
    • class: Specifies one or more class names for an element.
    • style: Contains CSS styles for the element.
    • title: Provides additional information about the element (appears as a tooltip when hovering over the element).
  2. Element-Specific Attributes: These are attributes specific to certain HTML elements. For example:
    • src: Used with <img>, <audio>, and <video> to specify the source.
    • href: Used with <a> to define the link destination.
    • alt: Used with <img> to describe the image.

5. Commonly Used HTML Attributes:

AttributeDescriptionExample
idUnique identifier for an element<div id="header">Header content</div>
classAssigns a class or multiple classes to an element for styling<p class="important">This is an important paragraph.</p>
hrefDefines the target URL for a hyperlink<a href="https://www.google.com">Go to Google</a>
srcSpecifies the source of media (image, video, audio)<img src="logo.png" alt="Company Logo">
altProvides alternative text for images or other non-text elements<img src="image.jpg" alt="Description of image">
styleInline CSS styling for an element<div style="color: red;">This text is red.</div>
targetSpecifies where to open the linked document (e.g., a new tab)<a href="https://www.example.com" target="_blank">Visit Example</a>
Comparison Between HTML Tag and HTML Element:
1. HTML Tag:

An HTML tag is the part of an HTML document that defines the structure or the type of content you want to display. Tags are used to create elements and are usually written in pairs: an opening tag and a closing tag.

  • Example: <p> (opening tag) and </p> (closing tag).
  • Purpose: Tags tell the browser how to display content.
2. HTML Element:

An HTML element is everything between the opening and closing tag, including the content and any attributes within the tag. The element represents the actual object in the HTML document.

  • Example: <p>This is a paragraph.</p>
  • The element includes the opening tag <p>, the content “This is a paragraph”, and the closing tag </p>.

 

Summary of Differences:

AspectHTML TagHTML Element
DefinitionThe markup or label that indicates the type of content (e.g., <p>, <a>)The complete structure that includes the opening and closing tag, content, and any attributes
ContainsOnly the name of the tag (e.g., <p>)The tag, its content, and any attributes (e.g., <p>This is a paragraph</p>)
PurposeTo identify the type of content (such as paragraph, link, etc.)To represent the actual element on the page, including its content and attributes
Example<p>, <a>, <img><p>This is a paragraph.</p>, <a href="#">Link</a>

HTML Comments:

  • An HTML comment is a way to add notes or explanations inside an HTML document that will not be displayed on the web page. Comments are helpful for developers to write notes, describe parts of the code, or temporarily disable sections of code without affecting the actual content shown on the web page.
Syntax of HTML Comments:
<!-- This is a comment -->
  • <!--: Marks the beginning of the comment.
  • -->: Marks the end of the comment.
  • Anything between <!-- and --> will be treated as a comment and will not appear on the webpage.
  • Example containing the html comment.
<!-- This is the header section of the webpage -->
<header>
<h1>Welcome to My Website</h1>
</header>

<!-- This is the main content section -->
<main>
<p>Here is some important information about the website.</p>
</main>

CSS Comment Example

A CSS comment start with "/*" and ends with "*/" in CSS file.

/* CSS Style */ h4 {  text-align: center;  color: purple;       /* Font Color is purple */  font-family: verdana;} 

JavaScript Comment Example

Single line comment start with //.

 

Frequently Asked Questions

  1. What is HTML?

    HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages by structuring content with elements and tags.

  2. What are HTML tags?

    HTML tags are the building blocks of HTML that define elements within a web page. They are enclosed in angle brackets, such as <tagname>, and usually come in pairs: an opening tag <tagname> and a closing tag </tagname>.

  3. What is the purpose of the <html> tag?

    The <html> tag serves as the root element of an HTML document, encapsulating all other elements on the page. It indicates to the browser that the document is an HTML file.

  4. What does the <head> section contain?

    The <head> section contains meta-information about the HTML document, such as the title (<title> tag), character encoding, linked stylesheets, and scripts. This information is not displayed directly on the web page.

  5. What is the function of the <title> tag?

    The <title> tag defines the title of the HTML document, which appears on the browser’s title bar or tab. It provides a brief description of the page’s content and is important for search engine optimization.

  6. What is included in the <body> tag?

    The <body> tag encompasses all the content that is displayed on the web page, such as text, images, links, tables, and other elements. It represents the main body of the document.

  7. How do you create a heading in HTML?

    Headings are created using the <h1> to <h6> tags, with <h1> representing the highest (or most important) level and <h6> the lowest. For example, <h1>Main Heading</h1> creates a top-level heading.

  8. How can you add a paragraph in HTML?

    Paragraphs are added using the <p> tag. For example, <p>This is a paragraph.</p> creates a paragraph of text on the web page.

  9. How do you insert an image in HTML?

    Images are inserted using the <img> tag, which requires the src attribute to specify the image’s path. For example: <img src="image.jpg" alt="Description of image">. The alt attribute provides alternative text for the image.

  10. How do you create a hyperlink in HTML?

    Hyperlinks are created using the <a> tag with the href attribute specifying the URL. For example: <a href="https://example.com">Visit Example</a> creates a link to “https://example.com” with the anchor text “Visit Example”.

  11. What is the purpose of the <br> tag?

    The <br> tag inserts a line break within text, moving the following content to a new line. It is a self-closing tag and does not require a closing counterpart.

  12. How do you create an unordered list in HTML?

    An unordered list is created using the <ul> tag, with each list item enclosed in <li> tags. For example:

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

  13. How do you create an ordered list in HTML?

    An ordered list is created using the <ol> tag, with each list item enclosed in <li> tags. For example:

    <ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

  14. What is the function of the <table> tag?

    The <table> tag is used to create tables in HTML. A table consists of rows (<tr>), headers (<th>), and data cells (<td>). For example:

    <table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

  15. How do you add a comment in HTML?

    Comments in HTML are added using <!-- to open and --> to close the comment. For example: <!-- This is a comment -->. Comments are not displayed in the browser and are used to annotate the code for developers.

  16. What is the purpose of the <div> tag?

    The <div> tag is a block-level container used to group elements for styling or scripting purposes. It does not have any inherent visual representation but is useful for applying CSS styles or JavaScript functions to a section of content.

  17. What is the <span> tag used for?

    The <span> tag is an inline container used to mark up a part of a text or document for styling purposes. Unlike <div>, it does not create a new block but allows for applying styles or scripts to a specific portion of text within other elements.

  18. How do you create a form in HTML?

    A form is created using the <form> tag, which can contain various input elements like text fields, checkboxes, radio buttons, and submit buttons. For example:

    <form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

  19. What is the purpose of the <meta> tag?

    The <meta> tag provides metadata about the HTML document, such as character encoding, viewport settings, and descriptions. This information is used by browsers and search engines but is not

Post Views: 134
Scroll to Top