HTML Elements

An HTML element is one that contains a start tag and end tag, with content inserted between the tags. The structure of an HTML element is:

<starttag> Content </endtag>

The HTML element includes everything from the start tag to the end tag.

An example could be:

<p> A small little paragraph </p>

The <p> tag represents a paragraph. Take note that the start tag is enclosed by the less than and greater than sign. Same goes with the end tag, however, there is a slash as well.

Html Headings

Headings are essential to the structure in websites and make the content more organized for the users. These can be placed into a website in various sizes. They can be defined with the <h1> going all the way to <h6> tags where the <h1> tag represents the largest header and <h6> the smallest.

Example

<h1> This is the largest header </h1>

<h2> This one is not as big </h2>

<h3> It is starting to get smaller </h3>

<h4> and smaller </h4>

<h5> Almost there </h5>

<h6> There we go. </h6>

Html Paragraphs

HTML paragraphs can be defined using the <p> tag.

Example

<p> This is some text </p>

Note: It is important that you always have the end tag otherwise, you may face some random errors or unexpected outcomes.

Html Line Breaks

Line breaks in HTML are defined by the <br> tag. You should be using the <br> tag if you would like to make some text in a paragraph fall on a new line.

Example

<p> The world is a great place filled with many awesome people <br> going on amazing adventures </p>

The above sentence would be displayed as:

The world is a great place filled with many awesome people
going on amazing adventures.

Note: The <br> tag is an empty tag, therefore, it does not require an end tag.

Html Horizontal rule

The <hr> tag is used to define the HTML horizontal rule. It can be used to neaten up a website by adding a straight horizontal line across the website in an organized manner.

There is no need for an example for this part, however, it must be noted again that the <hr> tag is an empty tag and does not require an end tag.

Html Text Decoration Methods

There are various methods of text decorating/formatting which include bold, italic, underline and strikethrough. These can help the text look more presentable to the user.

Bold

To represent a piece of text that you would like to be in bold, you use the <b> tag. Alternatively, you can use the <strong> tag to represent a piece of text of added importance.

Example

<p> This is a paragraph which contains <b> some bold text. </b> </p>

In the example above, the output would be:

This is a paragraph which contains some bold text.

Note: The <b> tag could be replaced with the <strong> tag and the outcome would be very similar.

Italic

To represent some text you may want to be in italic, you would use the <i> tag. The same goes for italic where you can use the <em> tag to represent italic text with added importance.

Example

<i> This is some italic text. </i>

The output for this would be:

This is some italic text.

Similarly, the <em> tag could be used in place of the <i> tag.

Underline

The <u> tag can be used to underline some text for whatever reason such as a misspelled word.

Example

<p> They <u> always </u> go to the mall. </p>

In the example above, the word “always” would be underlined due to a spelling error.

Strikethrough

The <del> tag can be used to define text that was removed/deleted.

Example

<p> My favorite food is <del> chicken </del> pizza! </p>

In the example above, the word “chicken” would be displayed with a strikethrough as it has been removed or deleted.

Html Unordered Lists

To initiate an unordered list, you use the <ul> tag. After, you can list each item using the <li> tag. In an unordered list, bullets would be used to mark each list item.

Example

<h2> Some of my favorite sodas: </h2>

<ul>
  <li> Coke</li>
  <li> Fanta</li>
  <li> Sprite</li>
</ul>

In the above example, the list items represent some of the favorite sodas, displayed with bullets preceding each item.

Some of my favorite sodas:

• Coke
• Fanta
• Sprite

Html Ordered Lists

An ordered list has a similar syntax. To initiate an ordered list, we use the <ol> tag and after that, you can list each item using the <li> tag.

Example

<h2> My favorite subjects: </h2>

<ol>
  <li> Maths </li>
  <li> Computer Science </li>
  <li> Physics </li>
</ol>

The output of the example would be:

Some of my favorite sodas:

1. Maths
2. Computer Science
3. Physics

Html Images

Images are required to improve the overall appearance of the webpage. To add an image, you need to use the <img> tag. Adding an image can include an HTML attribute known as the src attribute. The src attribute refers to the source of the specified image and is usually a URL; however, it can also be a location on your local device. Additionally, there is an alt attribute which specifies the alternative text displayed if the image cannot be loaded, typically due to a slow internet connection. This text describes the picture.

Here is an example of how you can add an image:

<img src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="beautiful birds">

This first image would display the image found on a specific webpage. Alternatively, you can use an image from your own device:

<img src="pictures/Mcdonalds.jpg" alt="fast food restaurant">

Note: It is not necessary to use the alt attribute when adding an image to a webpage, but it can significantly improve the SEO of your webpage.

Html Links

Links are important to redirect users to another page if necessary. HTML links are hyperlinks. The <a> tag is used to define an HTML link.

Similarly to the <img> tag, it uses an attribute known as the href attribute. This specifies the destination address of the link.

Example:

<p> This is <a href="https://visbug.com/"> my website. </a> </p>

In this example, if the user clicks on the words “my website”, they will be redirected to https://visbug.com/.

Note: A link does not necessarily have to be text; it can be an image as well.

Html Tables

The <table& tag is used to define an HTML table. Thereafter, each specific table row can be defined using the <tr> tag, while a table header is defined using the <th> tag. Each table cell is defined using the <td> tag.

Here’s an example of a table:

<table>

<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
</tr>

<tr>
    <td>John</td>
    <td>Billings</td>
    <td>26</td>
</tr>

<tr>
    <td>Thomas</td>
    <td>Frank</td>
    <td>34</td>
</tr>

</table>

Here’s an overview of how the table would look:

Html Iframes

Iframes are used to display the content of a webpage onto another webpage. The <iframe> tag is used to do this. Just like with images, there is the src attribute in which you refer to the webpage you want to display content from. You can also set the width and height of the iframe using the height and width attributes.

Example:

<iframe src="helloworld.html" height="250" width="350"> </iframe>

Note: The source can either be an HTML file from your local computer or the URL of any webpage online.