Html element closing tag

what are you trying to achieve? HTML is not designed to do that and I’m sure whatever it is that you’re trying to achieve can be done without this method.

If you need to see where the tags end and you can’t use comments because they get stripped out, you can always add a tag with an id or some other attribute right before the closing tag (and add a class to hide), like:

6 Answers 6

Short answer, No.

For XHTML, w3.org/TR/REC-xml/#dt-etag. For HTML5, dev.w3.org/html5/spec/Overview.html#end-tags. HTML4 is defined in terms of SGML, for which the official ISO specification document is sadly not freely available.

The answer is no for most tags. However, you could argue that tags like «img» that can be self-closing, are able to have attributes in them. But these self-closing tags are taking the place of an opening tag and a closing tag, so it’s not the same as having an attribute in a closing tag. To be honest, there is really no need for this, it would just create more for the browser to have to read and make the page size bigger.

The OP specifically stated that it was for helping to identify matching tags, ie it’s for readability. This isn’t even an answer, it’s an opinion. @drudge covers it better in their comment citing the w3c validator’s error output.

Sorry, but it doesn’t work and doesn’t validate.

If you try other attributes in closing tags, then the browser skips the attribute. I tried it in several ways, tested it with ids and classes, and the css and the javascript didn’t recognized them in the ending tag. Your best bet is the commenting.

Or you could make your own html tags.

You must use hyphenation, and you should avoid

document.createElement('foo-bar'); 

I believe this answer is just as valid as drudge’s comment on the original question, however the portion about making custom tags is confusing. How do custom tags solve the commenting problem?

You can define custom tags and then the opening and closing tag will bear the name you want, for example: .

no, not possible. some browser will ignore it, but maybe some other browsers will complain and won’t display HTML correctly.

@PeterV maybe some? I’m kind of hoping they’ll all work. If I find out anything to the contrary and I remember this, I’ll update here.

The original question describes a specific scenario of four parts:

1. improving html code readability, and specifically: matching opening and closing … tags;
2. while reading (debugging) the rendered html page source grabbed from the browser;
3. when the rendered source has been dynamically generated (server-side generated/processed) and also stripped of all comments before sending the webpage to the requesting client;
4. and in this case the question is specific to WordPress (the well known php CMS platform for creating websites, blogs, etc.).

The specific complexity here is that there is no one source file to look at on the server as the webpage was dynamically generated by code with input from many files, databases, APIs, etc.

That as previously noted, a common technique of placing a comment at the end of each closing is not helpful here because WordPress, has stripped all comments prior to serving the page, presumably to make the page size smaller.

A Javascript Solution:

Forget about trying to hack the html in an effort to circumvent WordPress and the browser and the standards. Instead simply re-insert the comments back into the rendered source like this.

When matching opening

tags this javascript may help. This function will comment every closing div tag and label it with the div’s ID attribute, producing a result like this:

 
 
Lorem ipsum dolor sit amet, consectetur . anim id est laborum.
 
 

This will work even when the rendered page is stripped of comments (by WordPress as in the original question). Just trigger or inject the function at any point you like, then view or save the source. As others noted previously, using comments doesn’t violate the spec as some other suggestions may.

This short function should be easy to understand and to modify for similar purposes. (Note the insertBefore workaround, as there is no JS insertAfter method.)

var d = window.document; insertCommentAtDivCloseTag(d); function insertCommentAtDivCloseTag(document) < var d = document; var divList = d.getElementsByTagName('div'); var div = <>; for (div of divList) < var parent = div.parentNode; var newNode = new Comment(' end #' + div.id + ' '); parent.insertBefore(newNode, div.nextSibling); >> 

This is the quick and easy one-off solution. If that’s all you need skip the rest.

If WordPress/web development is something you do everyday you may wish to consider exploring some of the following:

Again forget about hacking the HtML standard and hack wordpress instead. In fact WordPress is designed to be hacked. Virtually every function WordPress uses in creating a webpage has a hook that you can use to override or alter what it does.

Find the one stripping out your comments and add a function to turn it off and on.

If it’s been thought of before, there’s already a plugin for it.

WordPress plugins come and go, some are maintained others not, some are very good, and some are poorly designed, some are just bad. So caveat emptor. With that proviso, I was able find such a plug-in in ten seconds, with one search, on the first try.

For so many reasons, it is beneficial to serve the smallest possible version of your webpage and WordPress may not be the only actor dynamically altering your code or caching older versions.

Your WordPress Installation and Blog Post (database)

The HTTP Server, such as Apache and it’s Modules

A Proxy Server such as Nginx

A CDN, Content Delivery Network

Finally My Browser the Client

Also any Caches Maintained by Any of the Above

Finally, if this sort of thing is or is becoming your job, you’ll eventually want to explore specialized IDEs and separate production and development servers.

Источник

HTML Elements with Example

In this tutorial, we are going to learn about HTML elements for example. We will also look at other concepts that move around it like tags and attributes.

HTML Elements

HTML elements are the building blocks of HTML pages. HTML elements tell the browser how to display specific content on web pages. Like text, images, videos, and other content.

Almost all HTML element has a start tag and an end tag. The start tag looks like and the end tag looks like .

Some of the elements do not have an end tag. For example,
tag does not have an end tag. HTML elements without closing tags are called self closing elements.

Self closing elements do not have content. They are called void elements .

HTML elements example

Let’s see some examples of HTML elements with code and output.

The

tag is used to create a paragraph. the content inside the paragraph is displayed in a normal font on the page.

This is paragraph 1
 
This is paragraph 2
 
This is paragraph 3

The to tags are used to create headings. The content inside the heading is displayed in bold font on the page.

The tag is used to create a heading level 1, tag is used to create a heading level 2, and so on to .

This is heading 1
 
This is heading 2
 
This is heading 3
 
This is heading 4
 
This is heading 5
 
This is heading 6

tag is used to create an unordered list. The
tag is used to create an ordered list.

The tag is used to create an image. It does not have a closing tag.

To display an image, you need to specify the source of the image using the src attribute.

There is another attribute called alt which is used to specify the alternative text of the image. This text is displayed when the image is not loaded.

HTML elements can be nested

HTML element structure

An HTML element is made up of a start tag , attribute , content , and end tag . The start tag is used to open the element. The end tag is used to close the element.

Attributes are used to specify the element’s properties. If there are more than one attribute then they are separated by a space.

HTML elements types

There are 2 types of elements in HTML:

1. Elements that needs to be closed — Example

   , , etc

2. Elements that does not need to be closed (self cloasing) — Example ,
   , etc

HTML elements list

Here is the list of most commonly used HTML elements:

Here is a list of self closing elements:

HTML Elements vs Tags

In general terms, both «tag» and «element» are interchangeably used. But technically there is little difference between them.

Conclusion

Everything on the web is part of an HTML element. You can create everything from a simple paragraph to a complex form using HTML elements.

1. what are empty elements in HTML? Empty elements are elements that have no content. They are self closing elements like
   and
   

   ---

   .

2. what are block elements in HTML? Block elements are elements that are displayed in a single line. They are

   , , etc.

3. what are inline elements in HTML? Inline elements are elements that are displayed in a single line. They are , , etc.

Источник

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.

Источник