Running into new terminology is inevitable when you enter the world of coding. For example, if you’re just getting acquainted with HTML, answering the what are tags and attributes question is one of the first things you’ll need to learn about.
Let’s see what role these elements play in an HTML document and how to use them like a pro.
The Anatomy of an HTML Document
To locate tags and attributes in an HTML web page, it’s important to briefly discuss what HTML is and what comprises an HTML document.
As you might already know, HTML refers to HyperText Markup Language. It’s the basic code used for the most fundamental structure of any web page. Web browsers are designed to interpret HTML and translate it into a functioning website each time you type an address into the address bar and request an HTML document.
The HTML code behind any website you visit comprises HTML “elements.” These elements define the nature of the content displayed (e.g., whether it’s a paragraph, a bulleted list, etc.) and how the content will appear and act in your browser. Each HTML element is comprised of several parts, which necessarily include tags and optional attributes.
What Are HTML Tags?
Anyone who regularly uses the internet has likely come across different letters enclosed in brackets in the context of coding. So if you’re curious about what <p> or <br> stands for, you’ve come to the right place. These little markers answer your question about tags and attributes.
As we mentioned, an HTML document consists of a number of elements. An HTML element typically looks something like this: <h1>Title</h1>. We can separate this element into three parts: the opening (or starting) tag, the content, and the closing (or ending) tag. HTML tags will usually appear in pairs like so, but some tags don’t require any content or a closing tag.
An opening tag comprises the tag’s name inside a pair of angle brackets. However, the HTML element also needs a closing tag, the same as the opening tag, only with a forward slash. The closing tag defines where the element and all the attributes that may have been added end. That way, they don’t interfere with other elements, causing your browser difficulties in interpreting your code.
In the example above, <h1> and </h1> are the tags that tell your browser that the content within the element (“Title”) is a header. The role of these enclosing tags is thus clear: they communicate what type of content we’re dealing with.
Types of HTML Tags
There are numerous types of HTML elements, from section through textual to media elements. All of which mostly follow the pattern described above. Each HTML element has unique tags to accompany it. Here are a few common HTML tags you’ll find on any website:
- Text tags include <p>, <h1> through <h6>, <strong>, <blockquote>, etc.
- For links, the <a> tag is used.
- Insert images and other media with tags like <img>, <video>, <audio>, etc.
- Break tags that don’t need to be closed are <br> and <hr>.
- Create lists with tags like <ul>, <ol>, <li>, etc.
There are over 100 elements you can insert into an HTML document. You can find the complete list of HTML tags on Mozilla’s Developer page.
What Are Attributes?
While tags define some characteristics of HTML elements, they are far from everything. For further customization, each HTML element may be equipped with one or more attributes that provide additional information about how they should be displayed or how they will behave.
Attributes are inserted into HTML elements right after the opening tag name within the enclosing brackets and are separated from the tag name with a space. Every HTML attribute includes an attribute name, followed by “=” and then the attribute value in double quotation marks. While quotation marks aren’t technically mandatory, developers highly recommend using them.
In a simple example where we want to change the color of our paragraph’s text, we can insert a style attribute in the opening <p> tag. The result would look as follows: <p style=”color: blue”>. In this example, “style” is the attribute name, while the information inside the quotation marks is the attribute value.
Types of HTML Attributes
Some attributes work with all visible HTML elements – global attributes. Others can only be used with specific tags. In addition, some elements necessarily require a corresponding attribute. Otherwise, they don’t mean anything. Such are link and image elements that need their destination or source defined. Here are a few common attributes that you’ll likely come across:
- href – In combination with the <a> link tag, you can use href to specify where a hyperlink will lead.
- src – Image and other media elements require a source to embed the content from, and the src attribute serves this purpose.
- alt – This attribute can give images and other elements alternative text that will appear in case the piece of content can’t be displayed. It’s also key for accessible web design.
- style – This global attribute can define CSS styles for any element.
- width and height – You can use width and height to define the precise size of an element.
- lang – Use this attribute to specify the document language at the beginning of all your HTMLs.
- title – This attribute can add additional text to an element, which will appear in a tooltip when hovered over.
Similar to HTML tags, there’s also a large number of attributes you can use. Fortunately, you don’t have to remember which attributes and tags are compatible. Instead, you can simply reference them from Mozilla’s MDN Web Docs page.
Learn the Basics of HTML
Getting acquainted with basic HTML terminology is a great starting point for anyone wanting to eventually code their own website.
Now you’ve learned the answer to the question of tags and attributes: they are key parts of an HTML document. Hence, it’s essential to cover them thoroughly. Once you understand how they interact and make up HTML elements, you’ll be ready to start coding yourself.
