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> 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>
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.
Here’s an example:
<h2> Some of my favorite sodas: </h2>
<ul>
<li> Coke</li>
<li> Fanta</li>
<li>Sprite</li>
</ul>
The above example would be displayed as follows:
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:
My favorite subjects:
- Maths
- Computer Science
- 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 be a bit more complicated, however as it includes an HTML attribute. This is 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. There is also an alt attribute which is what the webpage would display in a circumstance in which the user is unable to display the image usually due to a slow internet connection. This is usually some text describing the picture.
Here is an example of how you do it in case you are still confused:
<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, however, you can also use an image from your own device.
For example:
<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 really 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 a Html link.
Similarly to the <img> tag, it uses an attribute which is known as the href attribute. This specifies the destination address of the link.
Example:
<p> This is <a> h ref = “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 a 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.
| First Name | Last Name | Age |
| John | Billings | 26 |
| Thomas | Frank | 34 |
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.
Leave a Reply