List of content you will read in this article:

HTML provides web authors with multiple ways to specify lists of information, and users must use one or more elements in the lists.

If you are fresh in development, you may not know much about HTML and coding. Luckily for you, HTML is one of the easiest languages to learn, and in no time, you will have your way around it. Learning the basic HTML codes should be the first step and will go a long way in understanding HTML development.

Here are some HTML codes that will make your time in development easier.

Images

Images play a critical role in improving the appearance of a web page and a website. They make content more appealing and contribute to web page ranking on search engines.

You can use the HTML code <img> to embed images to content on a web page. This is not considered as inserting an image as the images are essentially linked to a web page. The code <img> secures a space for the referenced image.

It is also important to note that the <img> code only contains attributes. The two required attributes for image codes are “src,” which highlights the image path, and “alt,” which provides an alternate image text. You can also use a style attribute in the code to specify the size of the image in length and width. Developers also use the code to resize images on web wages.

Ordered Lists

Ordered lists are utilized for items whose order matters and often contain numbers. The syntax for ordered and unordered lists is the same. However, the difference lies in the tag. The “ol” tag is used in ordered lists. This means that unordered lists can be converted into ordered lists by simply changing the tag.

The code used in an ordered list is <ol>. The tag is for the entire list, whereas <li> is used for the specific list item. Users can include as many lists as they wish. Below is an example of an ordered list:

<ol>

<li> Item 1 </li>

<li> Item 2 </li>

<li> Item 3 </li>

</ol>

In the browser, the list will appear as below:

Item 1
Item 2
Item 3

Unordered Lists

The order of items in an unordered list does not matter, and often the list appears in bullets in the web browser. When using the unordered lists, if the items on the list are rearranged, the meaning will not change, and confusion not be created.

The <ul> element is used to open and close the unordered list and the items are specified using the “li” tags. Here is an example of an unordered list.

<ul>

<li> Item 1 </li>

<li> Item 2 </li>

<li> Item 3 </li>

</ul>

The presentation of the unordered list in the web browser would be as follows:

Item 1
Item 2
Item 3

Headings

Headings can be considered the easiest HTML codes to learn and use. There are six types of headings, and they are created by wrapping the text in the tags.

An HTML heading code or tag is the title or subtitle you want to display on the web page. For instance, suppose you place text between the heading tags <h2 class="link-id">…. </h2 class="link-id"> on the web browser; it will appear in bold and in the format of H2 headings.

There are six HTML headings that you can create with the “h” tags, with H1 being the main and most important heading and H6 being the least important heading. The appearance of the heading tags is the same, with the only difference being in the numbers. Here is how the HTML heading codes should look.

<h1>first heading 1 </h1>

<h2 class="link-id">second heading 2</h2 class="link-id">

<h3>third heading 3</h3>

<h4>fourth heading 4</h4>

<h5>fifth heading 5</h5>

<h6>sixth heading 6</h6>

In the web browser, the heading will appear as below, in order of importance.

First heading 1

Second heading 2

Third heading 3

Fourth heading 4

Fifth heading 5

Sixth heading 6

The headings help the search engine, and users understand the structure of a web page. With this information, the search engine can index a web page.

Link

You can create links to another page on the same website or a different site using HTML. Inbound marketing is impossible without linking to relevant content, web pages, and websites. Links connect one page to another and allow users to navigate websites easily.

Links feature two ends, known as anchors: the source anchor where the link starts and the destination anchor. A link could be of any web page resource, ranging from text, videos, images, and even a PDF file. In the web browser, links are coded in three colors, blue, purple, and red, to indicate the status of the link.

A link highlighted in blue indicates that it has not been visited. Visited links are highlighted in purple, whereas active links are red.

The <a> tag is used to specify links in HTML, and as aforementioned, the links could be an image, video, or text. For instance, if you want to link to a family law website, the code will appear as below:

<a href = https://www.familylaw.com/>Visit familylaw.com! </a>.

Note that the text that falls between the <a> tag is the opening, and the </a> closing tag is the link that users on browsers will see and click on to visit the web page.

Paragraphs

To create paragraphs on a web page using HTML, all the user needs to do is wrap the text in the opening <p> tags and close with the </p> tag.

The tags will appear as blocks separate from the adjacent text blocks on the web browser. Apart from text, HTML paragraphs can structure other related group items such as fields and images.

Here is an example of an HTML paragraph code:

<p> Learning the basic HTML codes should be the first step and will go a long way in understanding HTML development. </p>

On the browser, the paragraph will appear as below:

Learning the basic HTML codes should be the first step and will go a long way in understanding TML development.

Conclusion

The HTML codes listed above are just a few among the many you can use to practice and code. Once you get the flow and the structure of the different codes, creating web pages will be a piece of cake. The HTML tags are powerful tools that you can use to create interactive web pages.

People also read:

Category: Tutorials

HTML Codes List