A favicon (short for “favorite icon”) is a small, often square image that is associated with a website and is typically displayed in the browser’s address bar, bookmarks, tabs, and other places to represent the site. In HTML, you can set the favicon for your website using the <link> element in the document’s <head> section. Here’s an example:

Favicon in HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Favicon Example</title>
    <!-- Example: Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>

    <!-- Your website content goes here -->

</body>
</html>
  • The <link> element is used to define the relationship between the document and an external resource, in this case, the favicon.
  • The relationship between the linked resource and the current document is indicated by the rel property. For the primary favicon, it is set to “icon” in this instance.
  • The href attribute specifies the URL of the linked resource, which is the favicon image (favicon.ico in this example).
  • The referenced resource’s MIME type is specified by the type attribute. The default setting for favicons is “image/x-icon.”

Replace “favicon.ico” with the actual path or URL to your favicon image. The favicon should ideally be a 16×16 pixel or 32×32 pixel image in ICO format, though modern browsers also support PNG and GIF formats. Ensure that the file is named “favicon.ico” and is placed in the root directory of your website.

Page Title in HTML

The HTML page title is set using the <title> element within the <head> section of an HTML document. The title is displayed on the browser’s title bar or tab and is often used by search engines to identify the page. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Example: Page Title -->
    <title>My Awesome Website</title>
</head>
<body>

    <!-- Your website content goes here -->

</body>
</html>
  • The <title> element is used to define the title of the HTML document.
  • Inside the <title> element, you can place the desired title for your web page. In this example, the title is set to “My Awesome Website.”

The text within the <title> element is what appears on the browser tab or title bar when the page is open. It’s important to choose a concise and descriptive title that reflects the content of the page, as it helps users and search engines understand the purpose of the webpage.

HTML Tabular Data

HTML tables are used to organise and display structured data. The table> element is used to define the table, the tr> (table row) element for rows, the th> (table header) element for header cells, and the td> (table data) element for ordinary data cells. Here’s an easy example:

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

<!-- Example: Simple HTML Table -->
<table border="1">
    <caption>Employee Information</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td>Designer</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bob Johnson</td>
            <td>Manager</td>
        </tr>
    </tbody>
</table>

</body>
</html>
  • The <table> element is used to define the start and end of the table.
  • The <caption> element provides a title or caption for the table.
  • The <thead> element is used to group the header content in the table.
  • Inside the , defines a table row for the header, and defines the header cells.
  • The <tbody> element contains the main content of the table.
  • Inside the <tbody>, <tr> defines individual rows, and <td> defines the data cells.

To demonstrate how the table boundaries are shown, the
tag’s border=”1″ property is utilized. Actually, style may be done with CSS.

Lists in HTML


HTML (Hypertext Markup Language) provides several ways to create lists on a web page. The two main types of lists are ordered lists (<ol>) and unordered lists (<ul>). Within these lists, you use list items (<li>) to define individual list items.

Ordered List (<ol>)

An ordered list is used to represent a list of items where the order of the items is important. Each list item is automatically numbered. To create an ordered list, use the <ol> tag, and each item within the list is defined by the <li> tag.

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

Unordered List (<ul>)

When there is no significance attached to the elements’ order, a collection of objects is represented as an unordered list. Usually, a bullet point is used to indicate each item in the list. Use the element to construct an unordered list, and use the tag to specify each item in the list.

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

Nested Lists

You can also nest lists inside each other. For example, you can have an ordered list with unordered lists as its items, or vice versa.

<ol>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>Item 3</li>
</ol>

Description List (<dl>)

A description list is used to represent a list of terms and their descriptions. It uses the <dl> (description list), <dt> (term), and <dd> (description) tags.

<dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>
  <dt>Term 2</dt>
  <dd>Description 2</dd>
</dl>

Inline and Block Elements in HTML


In HTML, elements are classified as either block-level or inline based on their behavior in the document flow. Understanding the difference between block and inline elements is crucial for creating well-structured and styled web pages.

Block-level Elements:

Block-level elements typically start on a new line and stretch across the full width of their container. They create “blocks” of content. Examples include:

<div>: A generic container used for grouping other HTML elements.

<div>This is a block-level div element.</div>

<p>: Represents a paragraph of text.

<p>This is a block-level paragraph.</p>

<h1> – <h6>: Headings from level 1 to 6, where <h1> is the largest and <h6> is the smallest.

<h1>This is a block-level heading.</h1>

<ul>: Represents an unordered list.

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

Inline Elements:

Conversely, inline items just occupy the appropriate amount of width and do not begin on a new line. They are integrated into the text. As examples, consider:

<span>: A generic container used for applying styles or scripting to a specific part of the text.

<p>This is an <span>inline</span> element.</p>

<a>: Represents a hyperlink.

<p>Visit <a href="https://example.com">Example</a> for more information.</p>

<strong>: Represents strong importance, typically displayed as bold text.

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

<em>: Represents emphasized text, typically displayed as italicized.

<p>This is <em>emphasized</em> text.</p>

<img>: Represents an image.

<p>This is an inline image: <img src="image.jpg" alt="Description"></p>

Differentiating Block and Inline Elements:

  • Block-level elements create “blocks” of content, often starting on a new line and stretching the full width of their container.
  • Inline elements flow within the content, not starting on a new line, and only taking up as much width as necessary.
Post Views: 7

Categorized in:

HTML