Html tags and how to use them
Hypertext markup language commonly known as HTML is the structural basis of the web. Whether you’re writing Html with CSS and JavaScript, or you’re doing JSX in React or any other framework, Html tags are embedded in the fundamentals of them all, and having mastery of how these tags work helps you understand what tags to use where. In this article, we’d be discussing:
- What are Html tags?
- Types of HTML tags
- How to use HTML tags
- HTML tag attributes
What are HTML tags?
HTML tags define how a web browser will format and display the content. With the help of these tags, a web browser can distinguish between HTML content and straightforward content. An HTML element contains three significant parts an opening tag, the content, and a closing tag. While most HTML elements have both opening and closing tags, some HTML elements do not have closing tags these are called self-closing tags.
Types of HTML tags
There are over a hundred different HTML tags. in this article, we will cover a handful of the most used HTML tags, what they are used for, and how they are used. While most HTML tags show in the browser, some HTML tags do not show in the browser but rather are used by the browser to get information about the document you are working on. The code below shows a basic HTML document
. < ! DOCTYPE html>: doctype declaration is mentioned at the start of every HTML document. It is used for specifying which version of HTML the document is using. This is referred to as the document type declaration (DTD).
- <html>: This tag indicates the beginning and end of an HTML element in an HTML document. It has an opening and closing tag in which all other tags go in between.
- <head>: this element is a container for metadata or information about the HTML document it is always placed between the HTML tag and the body tag
- Meta: Metadata is data about the HTML document. The <meta> tags always go inside the <head> element and are typically used to specify the character set, page description, keywords, author of the document, and viewport settings. Though the data in this tag will not be displayed on the page, it is used by the browser to know how to display content or reload the page, search engine keywords, and other web services.
- <title>: This defines the title of the HTML document it shows in the title bar of the browser and it’s a must-have for every HTML document. Note: You can NOT have more than one <title> element in an HTML document.
- <body>: it is the body of the HTML document every other presentational tag goes in between these tags
- <h1>: is the first and biggest header tag. Header tags range from h1 to h6 reducing in their sizes as they go h1 being the largest and h6 the smallest.
- <p>: this is called the paragraph tag as it’s used to create paragraphs in your HTML it comes with default styles that make it stand as a paragraph.
Other HTML tags include:
- <style>: This is used to add style rules into the HTML without having an external style sheet
- <link>: is used to link external information into the HTML file information like style sheets, and icons. And lots more it is a self-closing tag
- <table>: as its name suggests this adds a table to the HTML document it has sun tags like <td> for defining a cell in a table row <th> for table head <tr> for table row and lots more.
- <img />: This tag helps embed images into an HTML document it is a self-closing tag
- <div>: This is a container that houses other elements it is used as a wrapper it is often referred to as a generic block of content, it is used for layout elements like containers. Other tags like this are the article tag and the section tag.
- There are many other HTML tags do a lot of other amazing things you can check this link for a reference on all HTML tags
How to use HTML tags
When writing HTML, it must follow a specific pattern in which the <!DOCTYPE html> on the very first line of the file. then we have the <html> tag and then the head tag that houses the meta tags and link tags before the body tag that has all other presentational tags in it every HTML file starts this way.
HTML Attributes
What are HTML attributes? An HTML attribute is a piece of markup language used to adjust the behavior or display of an HTML element they allow us to modify HTML elements in different ways. for example, they can change the appearance of the element, apply unique identifiers so the elements can be targeted by CSS, or provide necessary information to readers or screen readers. Attributes usually appear in lowercase and as name/value pairs, with their values in quotes. some examples of attributes are :
- Style: This is used to add style rules to an HTML element, this method is also known as inline styling. for example:
<p>My default color is black</p>but when we add some styling with the style attribute we have
- Id: this is a selector attribute it is used to identify a single element in an HTML document this means that the value of an id must not be repeated in the same HTML document. this attribute can be used to target that element in a CSS document.
- class: This is also a selector attribute but its value can be repeated in an html document it is used to identify a group of elements and give them specific styling or functionality (with CSS or javascript). the image below shows how to use the id and class.
. Alt: The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). the alt attribute is a text explaining what the image is all about.
Note: not all attributes can be used on all tags, forexample attributes like alt can only be used on the <img> tag while attributes like class can be used on all tags. To see more attributes and the tags they are associated with see this article by w3schools to learn more about them.
Thank you for reading this article I hope you were able to get an understanding of what HTML is, its tags, how to use it, and its attributes.
