Html self closing tags

LearnSelf-Closing Tags in HTML 5 [Guide]

TL;DR: In HTML5 it is not strictly necessary to close certain HTML tags.

Tags that aren’t required to have specific closing tags are called self-closing tags. What is a self closing tag? An example of a self closing tag is something like a line break (
) or the meta tag ( ). This means that the following are both acceptable:

Let’s take a look at some more examples.

Optional HTML Closing Tags

Some closing tags are optional, however. The tags are optional because it’s implied that a new tag would not be able to be started without closing it. These are the following:

There are also tags that are forbidden to be closed: img, input, br, hr, meta, etc.

Should Optional HTML Tags be Closed?

Code with closing tags is much more readable and easy to follow. It is much easier to visually inspect a page with well laid out markup. Working with this markup is easier for developers.

It makes little to no difference to a rendering engine in a browser that can parse markup written this way, so the tags can be considered redundant. For mobile users and browsers that can easily parse these pages, it is not necessary to close the tags. Not doing so can save on bandwidth as well. The problem arises when a browser is unable to parse markup written this way. The poor markup is still there.

The phrase “Be strict in what you send, but generous in what you receive” continues to apply. If your team is comfortable with that style of markup and the trade-offs then it may be acceptable. If your team prefers clean markup and will be visually inspecting markup most of the time, it is preferable to close tags even when not strictly necessary.

Get Started With Treehouse

Want to learn more about the basics of HTML? Check out our Intro to HTML & CSS Guide. Or, start your free trial with a Treehouse Techdegree to polish up your programming skills.

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you’ve been dreaming about.

Источник

List of HTML Self-Closing Tags

Here is a complete list of self-closing tags for HTML5. These are called void-elements in HTML spec.

• ---

• (obsolete)
• (obsolete)
• (obsolete)
• (obsolete)

The space before the slash is optional.

Is the Ending Slash Optional?

• HTML5: the slash is optional.
• HTML4: the slash is technically invalid. However, it’s accepted by W3C’s HTML validator.
• XHTML: The slash is REQUIRED.

I recommend to always add the slash. Because, it provides a visual clue of non-closing tags.

XHTML Supports Self-Closing Syntax for All Tags

In XML/XHTML, any tag can be self-closed by the ending slash .

When you test XML, you have to make sure the server is sending the correct Internet media type as XHTML (for example, application/xhtml+xml ), otherwise browsers will treat it as HTML, regardless of the DOCTYPE in your file.

Reference

HTML Basics

• Basic Syntax
• HTML Comment
• HTML Tags
• Case Sensitivity
• Allowed Characters
• Charset/Encoding
• Self-Closing Tags
• Custom Tag
• Custom Data Attribute
• Class Attribute
• Entities

List

Источник

Self Closing Tags In HTML

In this tutorial, you will learn about self closing tags in HTML, how to use them, and close the self closing tag. Also, you will go through various self closing tags with descriptions and examples.

HTML Self Closing Tag

A self closing tags in HTML are the type of HTML tags that need not to be closed manually by its closing tag, which means there is no saperate closing tag for it as .

A few examples of self closing tags are , ,
,

---

, etc.

Self closing tags are also alternatively known as void tags, empty tags, singletons tags, etc. i.e these tags do not have contents and also can not have any child.

The following are some examples of self closing tags in HTML.

None of the self closing tags in the above code snippets has content within them, nor do they have any child nodes.

Here are of closing tags in HTML (tags that need to be closed) are

.

,

.

,

, . ,

, etc.

The correct way to write a self closing tag

In HTML, closing a self closing tag with its closing tag is invalid. For example, closing a tag like is not valid.

But the question is do we need to close these tags by using/> at the end of the tag. i.e
, , etc or we just need to end these tags with > .

The fact is there is no need to close self closing tags by a slash/> at the end of the tag. Although many people use it but there is no meaning of slash at the end of the start tag even though you use it is ignored by the browsers.

But when using XHTML it is the rule to close the self closing tag by a slash at the end, so for the convenience of XHTML users HTML also allows closing tag like XHTML in HTML but simply ignores the slash.

Even if you close the tag browser remove the slashes and then render the element. You can see the picture below to understand.

Note — Even if the browser ignores the closing slash in void tags, it’s good practice to close it because:
1. in frameworks like react js if these are not close, it creates an error
2. if you want your document to be readable by an XML parser then must close all elements

List of self closing tags in HTML

Here is a list of all the self closing tags in HTML with little description of all. Non of self closing tags can have content or child node.

Self closing tags in HTML example

Let’s see a few examples of self closing tags.

Источник

What are Self Closing Tags in HTML?

• A traditional HTML tag such as

  , , , etc., had an opening tag and a closing tag. However, due to their fundamental structure, void components in HTML, such as images and links, do not technically require closing tags. Images and links cannot have content — they are pointers to an element installed on the website.

• Instead of including independent opening and closing tags in more modern HTML variants such as XHTML, developers employ a self-closing tag that includes a «/» within the carets (\<>) . For example –

Output

• A self-closing tag in HTML is a kind of HTML tag that does not need to be closed manually by its closing tag, which means it does not have a separate closing tag as . Some few self-closing tags are ,
  

  ---

  ,
  , , etc.

• Self-closing tags in HTML are sometimes also known as empty tags, void tags, singletons tags, etc. This means that these tags have no content and cannot have any children.

Complete List of Self-Closing Tags for HTML5

Tag	Description
	The HTML tag specifies an area within an image map with predetermined clickable zones based on coordinates, which subsequently accepts a URL and behaves as a hyperlink. This element can only be used inside an element.
	The HTML tag specifies a base URI, often known as a base URL, for relative links in a document. A document can only include one element. For example, you can specify the base URL once in the header area of your page, and all subsequent relative links will utilize that URL as a starting point.
	The HTML tag is used to create a line break in the text. It is typically employed in poems or addresses where line division is required. It is an empty tag, which means it contains no content and is referred to as a void element. Including the tag in the HTML code functions similarly to pressing the enter key in a word processor.
	The HTML tag specifies the attributes for columns contained within the tag. This allows you to format or add a class to a column or group of columns rather than each individual cell. It is most commonly found within an element. This element specifies the style property for each column.
	The HTML tag is used to embed external applications, which are typically multimedia elements such as audio or video, at the specified place in an HTML document. It serves as a container for plug-ins such as flash animations. This is a new tag in HTML 5, and it just requires the beginning tag.
	The HTML tag is used to insert a horizontal rule or a paragraph-level thematic break in a Html document to split or separate document sections. It is used when the topic of your HTML content abruptly changes. It divides them by drawing a horizontal line. The tag is an empty tag that does not require a closing tag. For example, a change of scene in a story or a switch of the topic within a segment.
	The HTML tag is used to display or embed an image on the web page. The HTML image element is an inline and empty element that only includes attributes; closing tags are not used in the image element.
	The HTML tag is used to create interactive controls for web-based forms to accept data from the user; depending on the device and user agent, a wide variety of input data and control widgets are accessible. The element is among the most powerful and complex in all HTML tags due to the vast amount of input types and attribute combinations. It is used inside the element to declare input controls that allow users to enter data. can be used to define labels for the input element.
	The HTML tag is used to establish a connection between a current document and an external resource. The link tag is mainly used to connect to external sheets and establish site icons (both «favicon» style icons and icons for the home screen and apps on mobile devices), among other things. This element can appear more than once, but it only appears in the head section. The link element’s values indicate how the item is linked to and is related to the containing page.
	The HTML tag allows you to add metadata — extra essential information about a document in a number of ways. The elements can be used to incorporate name/value pairs specifying HTML document features such as expiry date, author, a list of keywords, document author, etc. You can include more than one meta tag in your document depending on the information you wish to maintain. Still, in general, meta tags do not affect the physical appearance of the document. Thus it makes no difference whether you include them or not.
	The HTML tag is used to pass a parameter to the object associated with the element for plug-ins. We can use several tags within an element in any order, but each tag must have a name and value attribute and should be inserted at the beginning of the content. The parameter tag governs the behavior of the element by specifying a distinct pair of name and value attributes, such as autoplay, controller, etc.
	The HTML tag is used as a child element to define multiple media resources for the , , and elements. It is widely used to provide the same media material in several file formats, such as mp3, mp4, and so on, in order to enable compatibility with a wide range of browsers due to their varying support for image and media file formats. Basically, it is used to attach multimedia assets such as audio, video, and images.
	The HTML tag is used as a child element of and elements in order to define time-based text tracks for a media file. It is used to include a subtitle, caption, or any other type of text that will be rendered when a media file gets displayed. For example, it allows you to set timed text tracks (or time-based data) to handle subtitles automatically. WebVTT (Web Video Text Tracks) format (.vtt files) is used for the tracks.
	The HTML tag stands for word break opportunity. This tag denotes a spot within the text where the browser may optionally break a line, even though its line-breaking rules would not otherwise cause a break at that location. It is typically used when the employed term is too long, and there is a risk that the browser would break lines at the incorrect location in order to fit the content.

Examples

Example 1: Using
tag.

Example 2: Using

---

tag.

Example 3: Using tag.

Источник