In the introduction portion of this course, we discussed how tags are used to format our content and define a structure within our HTML document.
To refresh our memories, a tag is simply an instruction within HTML that dictates how the browser should display a certain part of the webpage. That instruction is written inside of closed brackets <>.
<center>This centers this sentence on the page</center>Elements
When an instruction consists of an opening tag, content (if any), and a closing tag, all enclosed within angle brackets (< and >), we call that an element.
<p>This is an element<p>Elements can be nested within each other to create hierarchical structures, such as with parent, child, and sibling relationships defining their positions within the document. Below, a parent, child and sibling relationship is shown:
<body>
<h1>This is a header element</h1>
<p>This is a paragraph element<p>
</body>In the code above, the body contains two children: h1 and p.
Both the h1 and the p elements are siblings to each other.
This is because they are the children of the same parent.
What makes an element an element?
An element is simply a named chunk of the page. From headings and paragraphs to lists, elements provide the structural framework for organizing things into chunks. Anything with an opening and closing tag is referred to as an element.
If I write the following:
<a href="https://www.google.com">Visit Google!</a>This is an element because it fits the criteria:
- There’s an opening and closing tag
- There’s content sandwiched in between
Tags
When a web browser encounters an HTML document, it reads the tags within the document to understand the structure and content of the page. However, it doesn’t display the tags themselves in the rendered page that users see. Instead, the browser interprets the tags to determine how the content should be formatted and displayed on the screen.
As mentioned in the introduction portion, HTML tags typically come in pairs, consisting of an opening tag and a closing tag. The opening tag denotes the beginning of an element, while the closing tag marks the end of the element.
However, there are certain tags that don’t come in pairs.
Void Tags
Some HTML tags, known as void or self-closing tags, do not require a closing tag because they do not contain any content. Void tags are used to insert standalone elements or define elements with no textual content. Examples of void tags include the <img>, <br>, <input>, and <meta> tags. Void tags are written as a single tag without a closing tag, like <img src="image.jpg">.
Nested Tags
As you’ve seen, HTML tags can be nested within each other to create hierarchical structures and define relationships between elements. Nested tags allow developers to create complex layouts and organize content in a logical and structured manner.
Where To Find More Tags To Use
There are several resources online where you can find more information about all of the tags available in the latest version of HTML:
- MDN Web Docs (Mozilla Developer Network): MDN Web Docs is an excellent resource for web developers, offering comprehensive documentation on HTML, CSS, JavaScript, and other web technologies. The HTML element reference on MDN provides detailed information about each HTML element, including its syntax, attributes, usage, and examples. MDN Web Docs – HTML Element Reference
- W3Schools: W3Schools is a popular website that offers tutorials, references, and examples for various web technologies, including HTML, CSS, JavaScript, and more. The HTML Tutorial section covers all aspects of HTML, including tags, attributes, forms, tables, and multimedia. W3Schools HTML Tag List
- HTML5 Doctor: HTML5 Doctor is a website dedicated to promoting best practices and standards-compliant HTML5 development. It provides articles, tutorials, and resources for web developers interested in learning about HTML5 features, semantics, and usage. HTML5 Doctor
- DevDocs: DevDocs is a comprehensive online documentation platform that aggregates documentation from various sources, including MDN, W3C, and others. It offers a searchable interface and supports offline access, making it convenient for developers to find information quickly. DevDocs – HTML
Attributes
Attributes in HTML are additional pieces of information that can be added to HTML elements to modify their behavior or provide extra details about the element. They are specified within the opening tag of an element and consist of a name-value pair, separated by an equals sign (=). The value of the attribute is typically enclosed in quotation marks (").
<button style="background-color:maroon">Click here</button>In the code above, style is the name of the attribute, followed by the attribute value which is the background-color:maroon part of the tag in quotation marks.
Attributes serve various purposes in HTML, including:
Providing Additional Information: Attributes can provide additional details about an element. For instance, the href attribute specifies the URL of a link, the src attribute defines the source of an image or other media, and the alt attribute provides alternative text for images.
Styling Elements: Attributes such as style can be used to apply inline CSS styles to elements, allowing developers to control the appearance of individual elements.
Semantic Markup: Attributes can contribute to the semantic meaning of an element by providing additional context or information. For example, the title attribute can be used to provide a tooltip or additional information about an element when it is hovered over by the mouse.