Firefox https://author-ide.skills.network/render?token=eyJhbGciOiJIUzI1NiIsI...
Common HTML Elements
This reading will introduce you to the most common HTML elements you need to know as a web developer. The HTML elements described in this reading are key to your learning.
Effort: 25 minutes
Objectives
After completing this reading section, you will be able to:
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
1. 1. Use titles and headings to label information
2. 2. Insert text using the paragraph element
3. 3. Insert line breaks on a page
4. 4. Add links to different sections of a page and other pages
5. 5. Create a list of items
6. 6. Add a table of data
7. 7. Insert an image
Copied!
HTML Setup
Recall that an HTML document must always start by specifying the DOCTYPE. The entire content is then enclosed within an <html> tag. Within this tag, the content is further segregated into either the <head> or <body>
elements of the code. The <head> tag contains all the metadata about the page, and the <body> tag contains the content that is displayed to the end user.
As per this setup, an empty HTML document without content or metadata should look as follows:
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <!-- Metadata goes here -->
5. </head>
6. <body>
7. <!-- Content goes here -->
8. </body>
9. </html>
Copied!
Browser Tab Title
The title of the page appears on the browser tab when you open a webpage in the browser. For example, if you open Google in a new tab, the browser title will display as “Google” along with the Google logo.
You can define the browser title using the <title> tag, which is placed within the <head> section of your HTML markup as follows:
1. 1
2. 2
3. 3
1. <head>
2. <title>Sample Page Title</title>
3. </head>
Copied!
Page Headings
You can separate your information into different sections by using headings, as can be seen in this reading. HTML defines six different font sizes for headings. Each heading represents a different level of importance and
text size.
HTML headings are defined with the following tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The number in these tags specifies the importance, with <h1> being the largest heading and <h6> being the smallest heading.
Since this element defines the content within a web page, it should be placed in the <body> section of your markup as follows:
1. 1
2. 2
3. 3
4. 4
1. <body>
2. <h1>Most Important (and Largest) Heading</h1>
3. <h6>Least Important (and Smallest) Heading</h6>
4. <body>
Copied!
Adding Text
The <p> tag should be used to insert text into your HTML document. This element stands for paragraph and includes any text content, whether it is a single word or a 10-page essay.
Since this element defines content within a web page, it should be placed in the <body> section of your markup as follows:
1. 1
2. 2
3. 3
4. 4
1 of 4 1/28/2024, 1:45 PM
Firefox https://author-ide.skills.network/render?token=eyJhbGciOiJIUzI1NiIsI...
5. 5
6. 6
7. 7
1. <body>
2. <h1>Most Important (and Largest) Heading</h1>
3. <p>This is some text. The content within this paragraph element can be as short or as long as needed.</p>
4.
5. <h6>Least Important (and Smallest) Heading</h6>
6. <p>This is another paragraph of text.</p>
7. <body>
Copied!
Using Line Breaks
A line break is used to complete one line and continue the remaining text
at the start of a new line, like what was just done here.
This can be useful in many scenarios, such as when writing addresses. You can use the <br> tag to insert a line break in HTML. This is not a container tag and therefore does not have an end tag.
1. 1
2. 2
3. 3
1. <body>
2. <p>This is some text that needs to be split up <br>here, <br>here, and <br>here.</p>
3. <body>
Copied!
Add Links to Other Pages
Web pages can link to other pages or other places on the same page via a hyperlink. The <a> tag defines a hyperlink in HTML, followed by the href attribute to define the destination address of the hyperlink.
Hyperlinks are normally inserted into text so that when you click some hyperlinked text, it takes you to the destination. For example, if you want to hyperlink the word “IBM” to the official IBM website, you can use the
<a> tag with the href attribute as shown below:
1. 1
1. <a href="https://www.ibm.com">IBM</a>
Copied!
In the example above, anytime a user clicks the “IBM” text, the IBM website will open in the current tab.
If you want a hyperlink to open a certain destination in a new tab, you can do so by adding target="_blank" to the <a> tag as follows:
1. 1
1. <a href="https://www.ibm.com" target="_blank">IBM</a>
Copied!
Hyperlinks are also able to link to other places on the same page. You can link to the top of the current page in either of the following two ways:
1. 1
2. 2
1. <a href="#">Top of Page</a>
2. <a href="#top">Top of Page</a>
Copied!
To link to a different section of the page, you can use the id of the section you want to link to, as follows:
1. 1
2. 2
3. 3
4. 4
5. 5
1. <a href="#section">Link to section</a>
2.
3. ...
4.
5. <h1 id="section">Section</h1>
Copied!
Create a List
To create a list of items, you can use the <ol> (ordered list) tag for numbered lists and the <ul> (unordered list) tag for bulleted lists.
Each point within a list will be enclosed by a <li> opening and closing tag, which represents a list item. This same tag is used for both ordered and unordered lists.
2 of 4 1/28/2024, 1:45 PM
Firefox https://author-ide.skills.network/render?token=eyJhbGciOiJIUzI1NiIsI...
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
1. <!-- Unordered List -->
2. <ul>
3. <li>This is a bullet point </li>
4. <li>The items in this list have no particular order </li>
5. <li>Each item will appear as a bullet, rather than a number </li>
6. </ul>
7.
8. <!-- Ordered List -->
9. <ol>
10. <li>This is an ordered list </li>
11. <li>The items in this list have a particular order </li>
12. <li>Each item will be numbered, starting from 1 </li>
13. <li>This is the fourth point in the list </li>
14. </ol>
Copied!
Add a Table
Tables are often required to format data, as shown below.
A table is created with HTML using the <table> tag. Within the table, each row of data is represented using the <tr> (table row) tag. The column or row headings can be specified by the <th> (table heading) element.
Finally, each data element within the table cells is specified using the <td> (table data) tag.
1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
1. <table>
2. <tr>
3. <th>Heading 1</th>
4. <th>Heading 2</th>
5. <th>Heading 3</th>
6. </tr>
7. <tr>
8. <td>H1 - Data Item 1</td>
9. <td>H2 - Data Item 1</td>
10. <td>H3 - Data Item 1</td>
11. </tr>
12. <tr>
13. <td>H1 - Data Item 2</td>
14. <td>H2 - Data Item 2</td>
15. <td>H3 - Data Item 2</td>
3 of 4 1/28/2024, 1:45 PM
Firefox https://author-ide.skills.network/render?token=eyJhbGciOiJIUzI1NiIsI...
16. </tr>
17. <tr>
18. <td>H1 - Data Item 3</td>
19. <td>H2 - Data Item 3</td>
20. <td>H3 - Data Item 3</td>
21. </tr>
22. </table>
Copied!
Add an Image
Images can be added within a web page by using the <img> tag. Both external images (for instance, from the internet) and local images (for instance, files saved on your computer) can be used in this tag.
To add an image, you need to know the image file name and include it in the ‘src’ attribute. The ‘src’ attribute specifies an external resource that you want to link, such as the URL of an image. If you are referencing a
file online, you can insert the URL of the image in this attribute. If you want to insert a local image, you should insert the file path of the image relative to the location of your HTML file.
The <img> tag also requires the ‘alt’ attribute, which defines alternative text to be displayed in the event the image cannot be loaded and when a screen reader is used.
The size of an image can also (optionally) be specified using the ‘width’ and ‘height’ attributes, with the numbers listed in pixels.
1. 1
2. 2
3. 3
4. 4
1. <!-- External Image -->
2. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/440px-IBM_logo.svg.png" alt="IBM Logo" width="300" height="300">
3. <!-- Local Images -->
4. <img src="images/IBMlogo.png" alt="IBM Logo" width="300" height="300">
Copied!
Congratulations
Congratulations! You have learned about some of the most common HTML elements you will be using as a web developer. Feel free to refer to this page as a reference when creating your own HTML documents.
Author(s)
Michelle Saltoun
Changelog
Date Version Changed by Change Description
2020-10-13 1.0 Michelle Saltoun Initial version created
2022-11-01 1.0 Steve Hord QA pass
© IBM Corporation 2022. All rights reserved.
4 of 4 1/28/2024, 1:45 PM
