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:
- A "<" character.
- The element’s tag name.
- Optionally, one or more attributes, each of which must be preceded by one or more space characters.
- Optionally, one or more space characters.
- Optionally, a "/" character, which may be present only if the element is a void element.
- 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:
The HTML template in your XSLT will produce invalid HTML (thanks,
@JimGarrison);img
andh1
are not allowed inside ofhead
.
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>The reason that you were getting unclosed
meta
andimg
elements
is that without an explicitxsl:output/method
, HTML serialization
is used given thehtml
root element of your output tree; otherwise
the default would have been to use XML serialization. (Thanks,
@MichaelKay.)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-generatedmeta
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 thecontent
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
The Best Way to Parse a JSON in Dart
Get Angular2 Routing Working on Iis 7.5
HTML Form: Post an Array of Objects
How Might I Force a Floating Div to Match The Height of Another Floating Div
Make a List Item Clickable (HTML/CSS)
Random Querystring to Avoid Ie Caching
How to Create Chat Bubbles Like Facebook Messenger
Google Fonts Url Break HTML5 Validation on W3.Org
How to Squircle an App Icon Image with Just CSS
Svg Animation Delay on Each Repetition
Is There a CSS Not Equals Selector
How to Stack Divs from Top to Bottom in CSS
Why Does .Class:Last-Of-Type Not Work as I Expect
Setting Max-Height for Table Cell Contents
Two Input Fields Inside One Label
Can You Do This HTML Layout Without Using Tables
How to Prevent an Image from Overflowing a Rounded Corner Box