Hypertext Markup Language, HTML, is the markup text or code used to create a web page and everything else it contains. A web page is usually structured to have sections patterned after its purpose. The structure of a form is an example; it has different fields, which the user has to fill in, like name, age, and gender.
However, HTML does more than create the basic structure of the web page. It is also responsible for carrying the style sheet and interactive sessions of the web page, which are carried by CSS and JavaScript respectively. Depending on the choice of the user, the styling of the web page can be done within the HTML page or added as an external stylesheet with a link, often seen as style.css. The same goes for the .js file that is used to make the web page interactive.
The focus of this article is to show how to use semantic tags. Semantic tags are those elements that can be understood, both by the browser and the developer and have an apparent relationship with the content embedded in them.
There are non-semantic tags s well, but this does not mean that they are irrelevant. They are used quite often; they are just not recognized by the browser. Examples of these non-semantic elements include div and span.
It is important to note that the tags discussed in this article are supported by HTML 5. In no particular order, listed below are commonly used semantic tags in HTML and their descriptions.
<!DOCTYPE>
This tag defines the type of document it is.
<html>
This shows the root of an HTML document.
<a>
This signifies the presence of a link.
<body>
This shows the area where the body of the document is to be written.
<aside>
This is used to document information that will not be with the main content on the page.
<img>
This is used to embed images in the web page.
<audio>
This is used to embed audio files in the web page.
<br>
This indicates a line break and shows a visible gap on the web page.
<form>
This is used to create HTML forms on the web page. It allows for accessibility by the user.
<h1> to <h6>
These are used to indicate headings. The lower they go, the smaller the letter casing becomes. <h1> is the highest, <h6> is the lowest.
<p>
This indicates a paragraph.
<source> or <src>
This is used to identify and define media elements from media resources. Examples of the media elements are <video>, <audio> and <img>.
<style>
This is used to style the document, either by using inline styling / inline CSS or internal CSS. External CSS is not included in this as it is linked to the page with a <a> tag.
<title>
This indicates the title of the document. It is found at the top of the web page.
<strong>
This is used to indicate that the embedded text is important. It makes it bold.
These are common semantic elements used in HTML. There are many more that are used to create unique web pages. A quick search for those will reveal several tags and their uses.
Top comments (0)