Hello Readers, in this post you will learn Tags in HTML. HTML tags are like keywords that define how a web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. An HTML file must have some essential tags so that a web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.
HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content. Most tags must have two parts, an opening, and a closing part. For example, <html> is the opening tag and </html> is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. I tend to interpret this as the “end” or “close” character.
There are some tags that are an exception to this rule, and where a closing tag is not required. The <img> tag for showing images is one example of this. Each HTML file must have the essential tags for it to be valid so that web browsers can understand it and display it correctly. The rest of the HTML file can contain as little or as many tags as you want to display your content.
Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag, for example, looks like this: <br> – a line break doesn’t hold any content so the tag merrily sits by its lonely self. We will come across these examples later. All you need to remember is that all tags with content between them should be closed, in the format of opening tag → content → closing tag. It isn’t, strictly speaking, always a requirement, but it’s a convention we’re using in these tutorials because it’s good practice that results in cleaner, easier to understand code.
Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute=”value”>Margarine</tag>. We will come across tags with attributes later.
Here are some main tags mention below
The <!DOCTYPE html> declaration is used to inform a website visitor’s browser that the document being rendered is an HTML document. While not actually an HTML element itself, every HTML document should be with a DOCTYPE declaration to be compliant with HTML standards.
The <figure> element identifies self-contained content related to the main content, such as an image, table, or chart. The <figcaption> element is often nested within a <figure> element to add a caption to the content identified by the <figure> tags.
The <center> element was used to identify text that should be centered when rendered by a browser. However, the element has been deprecated, and the correct and modern way to center-align text is with CSS.
The <datalist> element is used to define autocompletion values for an associated <input> element. Suggested autocompletion values are added to a datalist by nesting one or more <option> elements between the opening and closing <datalist> tags.
The <a> element, or anchor element, that used to create a hyperlink to another webpage or another location within the same webpage. The hyperlink created by an anchor element is applied to the text, image, or other HTML content nested between the opening and closing <a> tags.
The <article> element identifies a self-contained piece of content that could theoretically be distributed to other websites and platforms as a stand-alone unit. The <article> element is a good choice to contain entire blog posts, news articles, and similar content.
The <footer> element is a structural element used to identify the footer of a page, document, article, or section. A <footer> typically contains copyright and authorship information or navigational elements pertaining to the contents of the parent element.
The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements are used to create headings in descending order of importance where <h1> is the most important and <h6> the least.
The <video> element, which adds native video playback support to the HTML specification in HTML5, can be used to embed a video in an HTML document. Add the video URL to the element by using either the src attribute of the <video> element or by nesting one or more <source> elements between the opening and closing <video> tags.
The <audio> element is used to add audio media resources to an HTML document that will be played by native support for audio playback built into the browser rather than a browser plugin.
The <aside> element is used to identify content that is related to the primary content of the webpage but does not constitute the primary content of the page. Author information, related links, related content, and advertisements are examples of content that may be found in an aside element.
The <input> element is used to create form fields that accept user input. Form <input> elements can be presented in many different ways, including simple text fields, buttons, checkboxes, drop-down menus, and more, by setting the type attribute of the input element to the appropriate value.
The <form> element is used to create an HTML form. The <form> element does not actually create form fields, but is used as a parent container to hold form fields such as <input> and <textarea> elements.