Do You Need to Close Meta and Link Tags in HTML

Do you need to close meta and link tags in HTML?

A tag must always be closed by the tag close symbol > (if we ignore certain SGML rules that nominally apply in non-XHTML HTML but were never implemented in browsers).

What you mean to ask is whether the elements need to be closed by end tags. The answer is that non-XHTML HTML (including HTML5 in HTML serialization), no end tag is required or allowed for meta and link elements. In practice, however, browsers just ignore explicit end tags for them, as well as the cargo-cult / before >, if you use them. And HTML5 makes this permissiveness a rule by even formally allowing the / in HTML serialization, too.

In XHTML, XML rules apply, so every element, without exception, must have both a start tag and an end tag, but the same tag may be used for both roles if the element content is empty, e.g. <meta name="foo" content="bar"/> as short for <meta name="foo" content="bar"></meta>. If you violate this when serving a document with an XML (XHTML) content type to a conforming browser, then your document is not displayed at all; an error message is shown instead.

When using an XHTML server with the HTML content type (Content-Type: text/html), as XHTML documents almost always are on the web, then browsers will actually apply the non-XHTML HTML rules.

To summarize:

  • normally, use just <meta ...> with no /
  • if you are really using XHTML in a context where XHTML parsing is actually applied, play by XML rules (and make sure you know them)
  • if your boss tells you to write <meta ... />, do so; it’s not useful, but it causes no harm (except if you try to validate e.g. against the HTML 4.01 doctype).

xslt to html: link and meta tag never closed

by saying

<xsl:result-document method="html"

you are requesting for the result to be HTML, and not XML. if you want the output to be XML (or XHTML, as an XML-compliant variant of HTML), then you have to select output methods xml or xhtml. if you choose either of those, your output document will be well-formed XML.

What form of meta tag is valid in HTML5 <meta> or <meta/>?

As per this HTML5 standard: http://www.w3.org/TR/html-markup/syntax.html#void-element

Start tags consist of the following parts, in exactly the following
order:

  1. A "<" character.
  2. The element’s tag name.
  3. Optionally, one or more attributes, each of which must be preceded by one or more space characters.
  4. Optionally, one or more space characters.
  5. Optionally, a "/" character, which may be present only if the element is a void element.
  6. A ">" character.

The meta is a void element and hence the part #5 would apply with a caveat that "optionally, a / character, which may be present..."

<meta ... />

And so, you may omit the part #5 i.e. the closing "/", and hence this is also valid:

<meta ... >

Further down the spec says:

Void elements only have a start tag; end tags must not be specified
for void elements.

To summarize, end tag is not required. Self closing is not required. It will not hurt if end tag or self-close is present.

.

How do I end HTML 'meta' tags?

If you care about XHTML syntax, do it with <meta/>. If not, you are free to use <meta> or <meta/>

Difference between > or /> in HTML

XHTML requires trailing slashes for elements like ("br", "input", "img") whereas in HTML5 they're optional.

See: Should I remove trailing slashes in meta tags?

See also: Does HTML 5 Use a Trailing Slash

XSLT not closing META and IMG tags

Add

<xsl:output method="xml"/>

to the top-level your stylesheet to ensure that all tags are closed in the output markup. You may prefer that the output be indented, as the default for XML is "no":

<xsl:output method="xml" indent="yes"/>

Additional notes:

  1. The HTML template in your XSLT will produce invalid HTML (thanks,
    @JimGarrison); img and h1 are not allowed inside of head.
    Here's a fix:

    <?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" indent="yes"/>

    <xsl:template match="ROOT">
    <html>
    <head>
    <meta name="description" content="Results of system1 testing"/>
    <title>Test Execution Report</title>
    </head>
    <body>
    <img style="float: left;" src="logo.gif" alt="logo" />
    <h1 style="font-size:60px;text-align: center;">Test Execution
    Report</h1>
    <table>
    <tr>
    <td><xsl:value-of select="@script_name" /></td>
    </tr>
    <!- ... -->
    </table>
    </body>
    </html>
    </xsl:template>
    </xsl:stylesheet>
  2. The reason that you were getting unclosed meta and img elements
    is that without an explicit xsl:output/method, HTML serialization
    is used given the html root element of your output tree; otherwise
    the default would have been to use XML serialization. (Thanks,
    @MichaelKay.)

  3. For xsl:output/@method="xml", XSLT 1.0 won't generate

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    but it will propagate explicitly stated meta tags such as

    <meta name="description" content="Results of system1 testing"/>

    For XSLT 2.0, use xsl:output/@method="xhtml" to get both the
    auto-generated meta element and closing tags. (Thanks again,
    @MichaelKay.)

Can self closing <link> tags be problematic?

<link href="/css/style.css" rel="stylesheet" type="text/css"></link> is not a good idea.

If you use html4 use this:

<link href="/css/style.css" rel="stylesheet" type="text/css">

If you use xhtml use this:

<link href="/css/style.css" rel="stylesheet" type="text/css" />

In html5 both versions are fine.

Are multiple <meta> tags required or do I only need one?

Meta tags describe the meta of your page

It tells the browser, screen readers and search engines how to interpret your page, what kind of information to expect and how it should work on mobile phones, among other things.

Mozilla has some good documentation about the <meta /> tag. Have a lookt at the possible properties and their values to get a better understanding.

Some interesting things to note:

  • Multiple meta tags can be used.
  • The charset property declares the character encoding of the page
  • The name property can be used together with the content property.

Each meta tag describes a separate meta property of the page. Most meta properties are identified by the name=<propertyName> part, which you can NOT pass multiple times.

Common examples:

  • <meta charset="utf-8" />
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  • <meta name="theme-color" content="#000000" />
  • <meta name="description" content="This page contains information about X and Y" />


Related Topics



Leave a reply



Submit