HTML BASIC

HTML Element Syntax

An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.

Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that define its additional properties. For example, a paragraph, which is represented by the p element, would be written as:

HTML attributes are additional information that can be added to HTML elements to provide various functionalities, behaviors, or styles to those elements. Attributes are defined within the start tag of an HTML element and are typically composed of a name and a value, separated by an equal sign (=). The value is enclosed in double or single quotes.

Here is the basic syntax of an HTML attribute:

<element attribute_name="attribute_value">

Here are some common HTML attributes and their purposes:

1. id: Provides a unique identifier for an HTML element, which can be used for CSS styling or JavaScript manipulation.

<div id="unique-id">This is a unique element.</div>

2. class: Assigns one or more class names to an element, allowing you to apply CSS styles or JavaScript actions to multiple elements at once.

<p class="important-text">This is an important paragraph.</p>

3. style: Applies inline CSS styles directly to an element. It allows you to customize the presentation of an element.

<h1 style="color: blue; font-size: 24px;">This is a styled heading.</h1>

4. src: Specifies the source URL for external resources, such as images, audio files, or scripts.

<img src="image.jpg" alt="An image">

5. href: Specifies the URL that the linked element points to, such as hyperlinks in anchor (<a>) tags.

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

6. alt: Provides alternative text for images, which is displayed when the image cannot be loaded or for accessibility purposes.

<img src="image.jpg" alt="A beautiful sunset">

7. disabled: Used to disable form elements, such as buttons or input fields.

<input type="text" disabled>

8. target: Specifies where to open linked content. Common values include _blank (opens in a new tab) or _self (opens in the same tab).

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

9. data-*: Custom data attributes allow you to store additional data on an element that can be accessed via JavaScript.

<div data-product-id="12345">Product Name</div>

These are just a few examples of HTML attributes. There are many more attributes available, each with its specific purpose and behavior. Always refer to the official documentation to find the appropriate attributes for your specific use case.

HTML tables are used to display tabular data in a structured grid format, consisting of rows and columns. They provide an organized way to represent data, making it easy to compare and analyze information. Tables are created using the <table> element, and their structure is defined using additional elements such as <tr> for table rows, <th> for table headers, and <td> for table data cells.

Here's the basic structure of an HTML table:

<table>

  <tr>

    <th>Header 1</th>

    <th>Header 2</th>

    <!-- More table headers if needed -->

  </tr>

  <tr>

    <td>Data 1, Row 1</td>

    <td>Data 2, Row 1</td>

    <!-- More table data cells if needed -->

  </tr>

  <!-- More table rows if needed -->

</table>

Let's break down the elements used in an HTML table:

1. <table>: The main container element that defines the entire table.

2. <tr>: Stands for "table row" and is used to define a row in the table. It contains the cells for that row.

3. <th>: Stands for "table header" and is used to define the header cells of the table. The content within these cells is typically bold and centered by default.

4. <td>: Stands for "table data" and is used to define the data cells of the table. These cells contain the actual data.

Here's an example of a simple HTML table:

<table>

  <tr>

    <th>Name</th>

    <th>Age</th>

    <th>City</th>

  </tr>

  <tr>

    <td>John Doe</td>

    <td>30</td>

    <td>New York</td>

  </tr>

  <tr>

    <td>Jane Smith</td>

    <td>25</td>

    <td>Los Angeles</td>

  </tr>

</table>

The above table will create a 3x2 grid, with the first row as the header and the subsequent rows containing data.

Advanced table features include:

• colspan and rowspan attributes: These attributes can be used to merge multiple cells horizontally or vertically.

• <caption>: The <caption> element can be used to provide a caption or summary for the table.

• <thead>, <tbody>, and <tfoot>: These elements help group the table headers, body content, and footer content, respectively.

1. Ordered Lists (<ol>): An ordered list is a list of items where each item is preceded by a sequential number. The order of items is important, and they are displayed with numbers by default.

<ol>

  <li>First item</li>

  <li>Second item</li>

  <li>Third item</li>

</ol>

Output:

1. First item

2. Second item

3. Third item

You can change the starting number and the numbering style by using the start and type attributes, respectively.

2. Unordered Lists (<ul>): An unordered list is a list of items where each item is preceded by a bullet point. The order of items is not significant, and they are typically used for collections or lists without a specific sequence.

<ul>

  <li>Red</li>

  <li>Green</li>

  <li>Blue</li>

</ul>

Output:

• Red

• Green

• Blue

You can change the bullet style using CSS, but by default, most browsers display a disc (•) as the bullet.

3. Definition Lists (<dl>): A definition list is a list of terms and their corresponding definitions. Each term is represented by a <dt> (definition term) element, and each definition is represented by a <dd> (definition description) element.

<dl>

  <dt>HTML</dt>

  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>

  <dd>Cascading Style Sheets</dd>

</dl>

Output:

HTML

• HyperText Markup Language

CSS

• Cascading Style Sheets

The dl element is often used for glossaries, definitions, or descriptions.

It's essential to use these list elements appropriately based on the content you want to represent. Lists provide semantic meaning to your content, making it more accessible and better understood by both users and web crawlers.