2. HTML Elements and Attributes

Now that you have understood the basic structure of an HTML document, it is time to explore the core building blocks of HTML, namely elements and attributes. These are what give HTML its power, allowing you to control the appearance, structure, and functionality of web pages. By the end of this section, you shall be versed in using different HTML elements and attributes effectively to build dynamic and content-rich web pages.

2.1 Understanding HTML Elements

In general, an HTML element is something that describes a part of the Web page, such as – a paragraph, an image, a link, etc. Elements are the building blocks of the structure and content of the page.

Structure of an HTML Element:

The general format of an HTML element includes:

1. Opening Tag: Composed of the name of the element placed within angle brackets. Example:
2. Content: This is the material that goes within the opening and closing tags. Example: This is a paragraph.
3. Closing Tag: This is just like the opening tag except that it has a forward slash in front of its element name. Example:

Here’s an example of an HTML element complete with everything:

<p>This is a paragraph element.</p>

In this case:

• <p> is an opening tag.
• This is a paragraph element. will be the content.
• </p> is a closing tag.

Self-Closing Elements: Some elements do not have any content and, for that reason, may be self-closing. These are elements that do not need a closing tag. For example, <img> is a self-closing element and is used to display images:

<img src="https://example.com/image.jpg" alt="Sample Image">

Beginner’s Tip: Always close your HTML tags. Forgetting to close tags can lead to unnecessary structural problems and broken pages.

2.2 Common HTML Elements

Now, let’s take a closer look at some of the more common HTML elements you will use in building web pages. Familiarizing yourself with these elements is critical to learning HTML.

Headings (<h1> to <h6>):

These are used to denote document titles and headings. There are six levels of headings available within HTML, ranging from the most important being to the least important being.

Example:

<h1>Main Heading (Largest)</h1>
<h2>Subheading (Smaller)</h2>
<h3>Section Heading</h3>
<h4>Subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading (Smallest)</h6>

• Why Headings? Headings structure your text, but also make it more available. Search engines use headings to gauge the importance of content – as a way to figure out content hierarchy.

Paragraphs (<p>):

The tag defines a paragraph of text. It may be the most common HTML tag used to put text onto a web page.

Example:

<p>This is a paragraph of text that would appear on the web page. You can have several lines of text in a single paragraph. </p>

Exercise: Put several paragraphs on your HTML page, each containing different text. For fun, try putting inline elements like <strong>or <em> inside of a paragraph to give emphasis to words.

Images (<img>):

The <img> element is used to embed images in a web page. It does require the src attribute in which you would place the source of your image, as well as the alt attribute for accessibility.

Example:

<img src="https://example.com/photo.jpg" alt="A description of the photo">

• Best Practice: If you use images, always add an alt attribute. That will ensure that at least you provide some accessibility so screen readers can at least read aloud what the image is. Useful when display of an image is not available. When writing links in HTML, we use the <a>, or anchor element.

Links (<a>):

Anchors or the <a> element are used for creating hyperlinks that anchor points on the web page where users can click to navigate from one page to another.

Example:

<a href="https://www.example.com">Click here to visit Example.com</a>

• The href attribute defines the destination URL.
• To open links in a new tab, add the target=”_blank” attribute.

Exercise: Have many links both internal-which means links within your site-and also external links-meaning links to another website.

Lists (<ul>, <ol>, and <li>):

HTML supports ordered and unordered lists.

1. Unordered lists (<ul>): Lists that are to be displayed with bullets.
2. Ordered lists (<ol>): Lists that are to be displayed with either numbers or letters.

Whichever type is used, the individual list items are specified by using the <li> element.

Example:

<ul>
  <li>First item in an unordered list</li>
  <li>Second item</li>
</ul>

<ol>
  <li>First item in an ordered list</li>
  <li>Second item</li>
</ol>

Interactive Activity: Place an ordered and unordered list in your web page. For the ordered list use the type attribute so that it appears as letters instead of numbers.

Tables (<table>, <tr>, <td>, and <th>):

Tables present information within a tabular format of rows and columns. A table consists of:

• <table>: The container for the entire table.
• <tr>: A row is specified within the table.
• <td>: A data cell is specified within the table.
• <th>: Defines a header cell.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
</table>

Exercise: Create a table with at least three columns and four rows. Have fun styling the table borders and cell padding using inline CSS.

2.3 Block-Level vs. Inline Elements

It is important to understand the difference between block-level and inline elements because it tells the browser how an element should be displayed on a page.

Block-Level Elements:

Block-level elements occupy the full width by default and always start from the next line. Some common block-level elements include:

• <div>
• <h1> to <h6>
• <p>
• <table>

Example:

<div>
  <h1>This is a block-level heading</h1>
  <p>This is a paragraph inside a block-level container.</p>
</div>

Inline Elements:

Inline elements only take up the width they need and will not force a line break. The most common inline elements are:

• <span>
• <a>
• <strong>
• <em>

Example:

<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>

Exercise: On your page combine block level and inline elements. Put inline elements inside of a block-level container and see what happens.

2.4 HTML Attributes

Attributes give more information or behavior to HTML elements. They are written inside the opening tag of an element and consist of name=”value”.

Common HTML Attributes:

1. href: For use in <a> tags to specify the URL to which a link should point.

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

2. src: This supplies the source of an image in <img> tags.

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

3. alt: Supplies alternative text for visually impaired users who use screen readers and when the image itself can not be loaded.

   <img src="image.jpg" alt="Description of image">

4. id: It provides a unique id to an element.

   <div id="main-content">Main content goes here.</div>

5. class: This is utilized to group elements for styling or scripting.

   <p class="highlight">This paragraph is highlighted.</p>

6. style: Applies CSS on an element directly.

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

7. title: Creates a tooltip that appears when you hover over an element.

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

2.5 HTML Comments

Comments in HTML allow you to write comments in code where the comments do not appear on the page. This is quite useful for organizing your thoughts, or even to temporarily exclude certain parts of your code from running.

Syntax:

<!-- This is a comment -->

Example:

<p>This is a visible paragraph.</p>
<!-- <p>This paragraph is hidden because it’s inside a comment.</p> -->

Best Practice: Use comments to document and organize your code. This is especially useful in larger projects and helps both you and other developers that may be working on your code later.

2.6 Forms and User Input

A form is something a user can fill in to provide information to be sent to the server for processing. Typically, forms include text boxes, buttons, and checkboxes.

Basic Form Structure:

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

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="Submit">
</form>

Common Form Elements:

1. Text Input (<input type="text">): A simple text box where users can write something.

   <input type="text" name="username" placeholder="Enter your username">

2. Password Input (<input type="password">): A text field in which characters are not displayed.

   <input type="password" name="password" placeholder="Enter your password">

3. Submit Button (<input type="submit">): This is a button that sends the form data.

   <input type="submit" value="Submit">

4. Checkboxes and Radio Buttons (<input type="checkbox">, <input type="radio">):
   Allow users to select options.

   <input type="checkbox" name="subscribe" value="yes"> Subscribe to the newsletter
   <input type="radio" name="gender" value="male"> Male

Interactive Activity:

Create a form which includes the form controls for user name, password, and email. Insert a submit button and enjoy playing with the form controls.

2.7 Summary

You have learned tons in this section! How HTML elements work from their most basic views, to working with attributes, block-level vs. inline elements, and even to making forms that facilitate interaction-you can now build richly structured web pages.

Quiz Time: