Deborah Emeni
Deborah Emeni's Blog

Deborah Emeni's Blog

HTML Semantics

Photo by Glenn Carstens-Peters on Unsplash

HTML Semantics

Deborah Emeni's photo
Deborah Emeni
·May 21, 2022·

5 min read

HTML stands for HyperText Markup language, and its basic function is providing a structure for a web page. It consists of tags that help create the structure with their various uses. Some of which includes; <html>, <head>, <title>, <h1>, <p>, <a>, <img> with closing tags for most.

These tags are divided into several categories. Some of them are for presentation purposes. For instance, the <b> tag is for making a text bold. However, some other tags establish the meanings of the various elements used. For instance, the <p> tag tells the browser that whatever text enclosed within the <p> tag is a paragraph and should be treated as such. This concept is termed HTML Semantics.

Therefore, HTML semantics refers to HTML tags that aren't just presentational but include meaning and enhances the understanding/interpretation of the browser and anyone reading the code.

Next, see some HTML tags existing alongside their meanings/uses.

List of HTML Tags and Uses

  1. <html></html>: It specifies or tells the browser that the type of document is an HTML document.

  2. <head></head>: It consists of sub-tags such as: <meta>, <title>, <link>, <script> tags that provide information about the document, set the title of the document that can be seen in the URL section of the browser, link files to the document or external APIs.

  3. <body></body>: It consists/encompasses all the code that is displayed or viewed in the browser (what is visible to the users).

  4. <H1></H1>: It tells the browser that the text enclosed by the tags is to be treated as a first-level heading with a larger font size attributed to an H1 element.

  5. <H2></H2>: It tells the browser that the text enclosed by the tags is to be treated as a second-level heading with a larger font size attributed to an H2 element.

  6. <H3></H3>: It tells the browser that the text enclosed by the tags is to be treated as a third-level heading with a larger font size attributed to an H3 element.

  7. <H4></H4>: It tells the browser that the text enclosed by the tags is to be treated as a fourth-level heading with a larger font size attributed to an H4 element.

  8. <H5></H5>: It tells the browser that the text enclosed by the tags is to be treated as a fifth-level heading with a larger font size attributed to an H5 element.

  9. <H6></H6>: It tells the browser that the text enclosed by the tags is to be treated as a sixth-level heading with a larger font size attributed to an H6 element.

  10. <p></p>: This tag defines a text as a paragraph. It starts the text on a new line with a default font size of 16px.

  11. <br></br>: This tag defines a line break. When used between two HTML elements, it demarcates the elements from each other by introducing a line of space between them.

  12. <hr>: This stands for a horizontal line. When it is used, it introduces a line horizontally.

  13. <!- ... - >: It is used to include comments in an HTML code that provides additional information about the code and what it does.

  14. <a></a>: This tag is called anchor links and includes links to an HTML document.

  15. <img>: This tag is for including images in HTML documents.

  16. <b></b>: This tag is used for making a text bold.

  17. <i></i>: This tag is used to make a text italics.

  18. <table> <tr> <td> <td> <tr> </table>: This tag is used to define a table with rows and columns.

  19. <font size></font>: This tag is used to increase or decrease the font size of an element.

  20. <dl> <dt> <dd> </dl>: It is used for specifying a definition in a list and indenting each definition.

  21. <div></div>: This tags is called a division tag. It allows you to divide your HTML code into several contents with several enclosed subtags.

  22. <span></span>: This elements is used to wrap inline text usually in a p or div tag.

  23. <thead></thead>: In representing a table, it can be used to single out or represent the head/title of the table that contains several rows and columns.

  24. <tbody></tbody>: This tag helps group the table's content that represents the content of the table.

  25. <tr></tr>: This tag defines the rows in a column and defines the structure for the row.

  26. <td></td>: This tag defines the content in the row of the table.

  27. <script></script>: This tag links a scripting file to the HTML document, which would be javascript files or plugins.

  28. <ul></ul>: This tag defines an unordered list.

  29. <li><li>: This tag is used to create several lists of items.

  30. <ol></ol>: This tag defines an ordered list.

  31. <strong></strong>: This tag makes a text bold, telling the browser to treat it as an important text.

  32. <abbr></abbr>: This tag defines an abbreviation.

  33. <address></address>: It is used to define contact information on the website.

  34. <embed></embed>: It defines a link to an external resource.

  35. <iframe><iframe>: It is used to embed an external link to a document inside another document.

  36. <footer></footer>: It defines content/information at the bottom of the document.

  37. <main></main>: It is used to define the main section of the document.

  38. <input></input>: It is used to define an input field for entering data by the user.

  39. <param></param>: It defines parameters in an object tag.

  40. <output></output>: It is used to define the output of a program or calculation.

Conclusion

In this article, you learned about HTML semantics, what it is, and some of its uses. You also covered forty (40) different HTML tags with their various meanings/uses.

 
Share this