Skip to Content

What does create a tag mean?

By: Author Natalie Reed

0 Comments
What does create a tag mean?

To “create a tag” means to write new HTML code using angle brackets to define either a new element or provide additional meaning and structure to existing content. Tags give web pages semantics and accessibility.

When to Create New Tags

There are a few main reasons you may want to create a new tag in your HTML:

Defining New Page Elements

If you want to add a new type of content/layout that doesn’t match any existing HTML tags, creating a new tag allows you to define what that element is. For example, if you wanted a special type of pull quote, you could create a tag to represent it semantically.

Adding Extra Semantics

Adding new tags can provide extra semantic meaning to existing content. For example, screen reader accessibility can be improved by adding tags like

around key content. The

tag helps define article sections.

Hooking JavaScript/CSS

Custom tags allow developers to easily hook JavaScript or CSS to certain parts of a page. For example, you could define a tag then program the CSS and JS to make tooltips work.

Future Proofing Content

As new tags get introduced to HTML over time, using custom tag names can future proof your content. For example you could wrap site headers in a tag before the

tag existed.

How to Create New Tags

Creating a new tag is as simple as wrapping any content in angle brackets using either a new tag name you make up, or an existing tag repurposed for extra semantics.

For example:

<newtagname>Some content</newtagname>

Some key points on creating valid new tags:

Use Self Closing Tags When Needed

Some elements like images or inputs don’t wrap around content. These should use a trailing slash to close the tag:

<newinputtag />

Nest Tags Properly

Make sure to properly close tags so they are nested correctly:

<newtag>
  Some content
  <innernewtag>More content</innernewtag>
</newtag>

Use Lowercase Tag Names

Tag names should be lower case. Upper case tag names are not valid.

Avoid Existing Tag Names

Don’t reuse names of tags that already exist in HTML. This can cause conflicts.

Adding Attributes to Tags

Tags can also have attributes added to provide additional information:

<newtag attribute1="value1" attribute2="value2">
</newtag>

Some common cases to use attributes:

ID and Class For Styling/Selecting

Use id or class attributes to identify tags for styling or selecting with CSS or JavaScript:

<newtag id="cooltag" class="fancy-tag"></newtag>

Data Attributes

Custom data attributes allow storing extra data in the tag:

<newtag data-tooltip="More info!"></newtag>

ARIA Roles for Accessibility

ARIA roles like aria-hidden help convey extra meaning for screen readers:

<newtag aria-hidden="true"></newtag>

Examples Creating New Tags

Here are some examples of creating new tags in HTML:

Semantic Section Tag

Wrap a page section in a custom

tag: 
<section class="page-intro">
  <p>Welcome to our website!</p>
</section>

Styled Blockquote

Add a class to style a

differently:

<blockquote class="styled-quote">
  <p>To be or not to be, that is the question.</p>
</blockquote>

Clickable Image Map

Use a

tag with tags as image map hotspots: 
<img src="image.jpg" alt="Map" usemap="#map1">

<map name="map1">
  <area shape="circle" coords="200,250,25" href="east.html">
  <area shape="circle" coords="400,250,25" href="west.html">
</map>

Tabs Widget

Build a tabs component by adding tags:

  
<div class="tab">

  <button class="tablinks active" onclick="openTab(event, 'Overview')">
    Overview
  </button>

  <button class="tablinks" onclick="openTab(event, 'Details')">
    Details
  </button>

  <div id="Overview" class="tabcontent visible">
    <h3>Overview Tab</h3>
    <p>Overview content</p>
  </div>

  <div id="Details" class="tabcontent">
    <h3>Details Tab</h3>
    <p>Details content</p>
  </div>

</div>

Validating Custom Tags

When creating new tags, it’s important to validate your HTML to make sure it follows web standards.

Some ways to check validity:

W3C Validator

The W3C markup validation service can check for errors in your custom tags:

https://validator.w3.org

Browser Developer Tools

Tools like the Chrome DevTools can highlight issues with incorrect HTML.

Testing Across Browsers

Viewing your pages across different browsers helps spot compatibility issues. New unknown tags may render differently or cause errors.

Following web standards ensures custom tags behave predictably across browsers. Rarely used non-standard tags should be avoided.

Native Custom Element Tags

HTML also supports creating new tags as “custom elements” natively in the browser using JavaScript.

For example:

  
class NewElement extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('new-element', NewElement);

Allows using:

<new-element></new-element>

Benefits include:

  • Encapsulates functionality as a class
  • Lifecycle callbacks like connectedCallback
  • Works across frameworks like React/Vue/Angular

Downsides:

  • No IE11 support
  • Extra JavaScript overhead

So basic custom tags may be preferable in many cases.

Web Component Alternatives

If you need robust custom tags with events, properties, etc – consider using Web Components instead:

LitElement

LitElement provides a simple base class for customizable components using just HTML/JS/CSS:

import {LitElement, html} from 'lit-element';

class MyElement extends LitElement {

  render(){
    return html`<p>I'm a LitElement!</p>`;
  }

}

Stencil

Stencil is a compiler for generating small, blazing fast components:

@Component({
  tag: 'my-component'
})
export class MyComponent {

  render() {
    return <p>My Stencil component</p>;
  }

}

Other Options

There are many other frameworks like React, Vue, Angular, or Svelte for building custom components.

Conclusion

Creating new tags in HTML allows semantically defining parts of a document and building custom components. Valid use cases include adding semantics, styling, accessibility, data attributes, and hooking JavaScript.

Make sure to nest tags properly and validate your markup. For complex components, consider using Web Component libraries and frameworks that provide enhanced capabilities. But for simple sites, basic custom tags can suffice.

Related posts:

  1. What Are Facebook Shortcuts?
  2. Is Facebook Shortcut Random
  3. Are facebook shortcut public
  4. Why Are There Always Shortcuts of Friends Showing Up Facebook App