I tried to search the web about what is the purpose of the HTML <var> Tag and didn't find any good explanation or let say I'm not satisfied yet. I can read what they say about it but I don't understand the purpose. I tried two different lines of code and both gives me the same thing now I need to know what exactly is <var> and why we should use it rather than a single style.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<p style='font-style:italic'>y = mx + b</p>
Reference to name only one: https://html.com/tags/var/
Funny because I read the explanation but I still don't see what is the use of <var> other than just making the text italic!
Here is how W3Schools defines HTML:
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
The way I see it is that, even though <var> and <i> have the same output printed to the browser, they mean different things, specially if you are "reading" pages without opening a browser like search engines do.
Check it is not particular to the example you mentioned. Look at the example on <b> and <strong> (https://www.w3schools.com/html/html_formatting.asp). They also have the same output but mean different things.
Semantics.
<p> tags are generic paragraph elements, typically used for text.
<var> elements represent the name of a variable in a mathematical expression or a programming context.
If you italicize a paragraph it may resemble the default styling of the <var> element, but that's where the similarities end. Also, they're different to screen readers.
Here's an example using both elements and you can see that semantically, it's a paragraph of text that contains references to variables in a mathematical sense:
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
I suspect this is invalid html but I'm chiefly interested to know whether browsers will handle it gracefully. I want to <mark> some text that may have html tags interspersed. Specifically, if a mark tag opens after another formatting tag, say span or font, but the span/font closes before the mark closes, will (modern) browsers handle it gracefully?
<span><mark>text</span> more text</mark>
<span><mark>text</span> more text</mark> is invalid HTML, which can be confirmed by the W3 Validation Service.
Browsers cannot be relied upon to handle invalid markup reliably. In the above, <mark> will mark the first text. Then </span> will kick in and close the first <span>, and the parser will get confused as to how to handle the open <mark>. In most cases, your ending </mark> tag will be interpreted as invalid, because the parser will think that the tag is not open.
Here's an example with <p> and <a>:
<p>Google 1</p>Google 2
Note that the two lines are split, indicating that the <p> tag triggered, though both lines take the hyperlink.
As for your mention of the <font> tag, please note that this is obsolete, and you should be controlling the fonts via CSS instead.
Hope this helps. :)
When a user inserts linebreaks in a contenteditable element, browsers insert HTML into the element.
Here is what you get when you hit [Enter] in various browsers:
IE: <p></p>
Chrome: <div><br></div>
Safari: <div><br></div>
Firefox: <br />
Opera: <br />
(Test for yourself with this JSFiddle demo.)
Is there a way to get the browser NOT to insert HTML when the user hasn't inserted any HTML? Of course, I could just use
<textarea></textarea>
...and that does behave very similar to how I want, however, I don't want a strictly "text-only" input, as I will be adding and modifying HTML in the editable element using Javascript.
I considered constantly stripping all HTML out as the user types, only allowing HTML with a special class that I create to remain. That doesn't seem like a great solution, however. Is there something like wrap='soft' or some other way to say "stop making up HTML and putting it in my element!"
If you make it content editable, you are implicitly allowing the user to change the content of the HTML.
Pressing return should insert some kind of newline - either as closing a paragraph (</p>) and starting a new one (<p>), or entering a line break (<br>). Both of which in HTML require HTML tags, for the simple fact that a standard newline character (eg. \n or \n\r) is rendered as a single space, which is not what the user would expect - so inserting a raw newline as a "soft wrap" would not make sense and will ultimately lead to users impotently slamming their enter key getting mad at your site for not inserting a break when they think it should.
An even more fun fact is that if a user highlights some text, they can (or should) be able to bold and italicize text using keyboard shortcuts, which will again insert HTML.
Short of writing Javascript to override this behaviour, I am not sure you can disable the enter key inserting HTML tags to render the requested newlines.
To demonstrate this, here is a really simple page:
<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>
(In Internet Explorer at least) If you double click on the text it becomes editable. Move to the end of line and type the following:
Enter - ( A new paragaph is made (wrapping the prior text in p tags).
Type "Words", the select it and hit Crtl + b - the text is now wrapped in <strong> tags.
Hit Shift + Enter - a line break (<br>) is now inserted.
Type "More words", select it and hit Crtl + i Its now italicised in <em> tags.
And the source should look like:
<html>
<body>
<div contentEditable="true">
<p>Some things.</p>
<p>
<strong>Words</strong>
<br>
<em>More words</em>
</p>
</div>
</body>
</html>
If you want complete control over the content going into the area, I'd recommend using a WYSIWYG editor, or alternative, accept that the browser probably knows what its doing and let it do its thing so you don't need to worry about it.
There is no cross-browser way of disabling or forcing an editable div to interpret enter keypress differently from what the browser intended.
Besides, different browsers will do different things with the new line. Some will wrap lines inside <p> tags, some will add <br>.
The idea is that it's the browser that controls the editable div, not you.
If you try to fiddle with the output in real time, you will be like a passenger occasionally trying to snatch the wheel from the driver's hands.
You're not even guaranteed to get the key events from such a div. For instance, your fiddle does not seem to work in IE11.
I would rather do it just like this very SO editor does: use a textarea for user input and generate whatever rich HTML you want in another, non-editable div.
I make heavy use properties from bundles in my application as I strive to keep code maintainable in future. Because of this all HTML text is fetched from a key/value properties file eg. 'index_en.properties'
This has become problematic where I need the browser to render bold text and I don't find any topics online that address this problem.
Best solution I can then up would be to break every fetched value down with use of the
<h:outputText> tags that are child elements of the `<b>` tags.
What I need here is a methodology/tips/solution from someone who uses property files often.
I tried using html escape codes directly in the properties file, but this does not work.
Any tips?
Thank you,
Yucca
PS I doubt CSS will help me here.
Put HTML <b> in bundle and use escape="false" on <h:outputText> to disable standard HTML escaping by the component:
<h:outputText value="#{msg.text}" escape="false" />
Be sure that you never do this on user-controlled input as it would put XSS attack holes open. Also be sure that you don't go overboard with putting HTML in bundles. For basic text formatting with <b>, <u>, <i>, <s> and so on it's okay, but not for semantic markup like <p>, <div>, <h1>, etc.
I want to create something like
<menu>
<lunch>
<dish>aaa</dish>
<dish>bbb</dish>
</lunch>
<dinner>
<dish>ccc</dish>
</dinner>
</menu>
Can it be done in HTML5?
I know I can do it with
<ul id="menu">
<li>
<ul id="lunch">
<li class="dish">aaa</li>
<li class="dish">bbb</li>
</ul>
</li>
<li>
<ul id="dinner">
<li class="dish">ccc</li>
</ul>
</li>
</ul>
but it is so much less readable :(
You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).
Let's assume you want to use a custom tag element called <stack>. Here's what you should do...
STEP 1
Normalize its attributes in your CSS Stylesheet (think css reset) -
Example:
stack{display:block;margin:0;padding:0;border:0; ... }
STEP 2
To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):
<!--[if lt IE 9]>
<script> document.createElement("stack"); </script>
<![endif]-->
Then you can use your custom tag freely.
<stack>Overflow</stack>
Feel free to set attributes as well...
<stack id="st2" class="nice"> hello </stack>
I'm not so sure about these answers. As I've just read:
"CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."
http://www.crockford.com/html/
The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.
Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5.
And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.
So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.
I just want to add to the previous answers that there is a meaning to use only two-words tags for custom elements.
They should never be standardised.
For example, you want to use the tag <icon>, because you don't like <img>, and you don't like <i> neither...
Well, keep in mind that you're not the only one. Maybe in the future, w3c and/or browsers will specify/implement this tag.
At this time, browsers will probably implements native style for this tag and your website's design may break.
So I'm suggesting to use (according to this example) <img-icon>.
As a matter of fact, the tag <menu> is well defined ie not so used, but defined. It should contain <menuitem> which behave like <li>.
As Michael suggested in the comments, what you want to do is quite possible, but your nomenclature is wrong. You aren't "adding tags to HTML 5," you are creating a new XML document type with your own tags.
I did this for some projects at my last job. Some practical advice:
When you say you want to "add these to HTML 5," I assume what you really mean is that you want the pages to display correctly in a modern browser, without having to do a lot of work on the server side. This can be accomplished by inserting a "stylesheet processing instruction" at the top of the xml file, like <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Replace "menu.xsl" with the path to the XSL stylesheet that you create to convert your custom tags into HTML.
Caveats: Your file must be a well-formed XML document, complete with XML header <xml version="1.0">. XML is pickier than HTML about things like mismatched tags. Also, unlike HTML, tags are case-sensitive. You must also make sure that the web server is sending the files with the appropriate mime type "application/xml". Often the web server will be configured to do this automatically if the file extension is ".xml", but check.
Big Caveat: Finally, using the browsers' automatic XSL transformation, as I've described, is really best only for debugging and for limited applications where you have a lot of control. I used it successfully in setting up a simple intranet at my last employer, that was accessed only by a few dozen people at most. Not all browsers support XSL, and those that do don't have completely compatible implementations. So if your pages are to be released into the "wild," it's best to transform them all into HTML on the server side, which can be done with a command line tool, or with a button in many XML editors.
Creating your own tag names in HTML is not possible / not valid. That's what XML, SGML and other general markup languages are for.
What you probably want is
<div id="menu">
<div id="lunch">
<span class="dish">aaa</span>
<span class="dish">bbb</span>
</div>
<div id="dinner">
<span class="dish">ccc</span>
</div>
</div>
Or instead of <div/> and <span/> something like <ul/> and <li/>.
In order to make it look and function right, just hook up some CSS and Javascript.
Custom tags can be used in Safari, Chrome, Opera, and Firefox, at least as far as using them in place of "class=..." goes.
green {color: green} in css works for
<green>This is some text.</green>
<head>
<lunch>
<style type="text/css">
lunch{
color:blue;
font-size:32px;
}
</style>
</lunch>
</head>
<body>
<lunch>
This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
</lunch>
</body>
For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
Besides writing an XSL stylesheet, as I described earlier, there is another approach, at least if you are certain that Firefox or another full-fledged XML browser will be used (i.e., NOT Internet Explorer). Skip the XSL transform, and write a complete CSS stylesheet that tells the browser how to format the XML directly. The upside here is that you wouldn't have to learn XSL, which many people find to be a difficult and counterintuitive language. The downside is that your CSS will have to specify the styling very completely, including what are block nodes, what are inlines, etc. Usually, when writing CSS, you can assume that the browser "knows" that <em>, for instance, is an inline node, but it won't have any idea what to do with <dish>.
Finally, its been a few years since I tried this, but my recollection is that IE (at least a few versions back) refused to apply CSS stylesheets directly to XML documents.
The point of HTML is that the tags included in the language have an agreed meaning, that everyone in the world can use and base decisions on - like default styling, or making links clickable, or submitting a form when you click on an <input type="submit">.
Made-up tags like yours are great for humans (because we can learn English and thus know, or at least guess, what your tags mean), but not so good for machines.
Polymer or X-tags allow you to build your own html tags. It is based on native browser's "shadow DOM".
In some circumstances, it may look like creating your own tag names just works fine.
However, this is just your browser's error handling routines at work. And the problem is, different browsers have different error handling routines!
See this example.
The first line contains two made-up elements, what and ever, and they get treated differently by different browsers. The text comes out red in IE11 and Edge, but black in other browsers.
For comparison, the second line is similar, except it contains only valid HTML elements, and it will therefore look the same in all browsers.
body {color:black; background:white;} /* reset */
what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>
<p><code></code> <span>test</span></p>
Another problem with made-up elements is that you won't know what the future holds. If you created a website a couple of years ago with tag names like picture, dialog, details, slot, template etc, expecting them to behave like spans, are you in trouble now!
This is not an option in any HTML specification :)
You can probably do what you want with <div> elements and classes, from the question I'm not sure exactly what you're after, but no, creating your own tags is not an option.
As Nick said, custom tags are not supported by any version of HTML.
But, it won't give any error if you use such markup in your HTML.
It seems like you want to create a list. You can use unordered list <ul> to create the rool elements, and use the <li> tag for the items underneath.
If that's not what you want to achieve, please specify exactly what you want. We can come up with an answer then.
You can add custom attribute through HTML 5 data- Attributes.
For example: Message
That is valid for HTML 5. See http://ejohn.org/blog/html-5-data-attributes/ to get details.
You can just do some custom css styling, this will create a tag that will make the background color red:
redback {background-color:red;}
<redback>This is red</redback>
you can use this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyExample</title>
<style>
bloodred {color: red;}
</style>
</head>
<body>
<bloodred>
this is BLOODRED (not to scare you)
</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")
</script>
</html>
I found this article on creating custom HTML tags and instantiating them. It simplifies the process and breaks it down into terms anyone can understand and utilize immediately -- but I'm not entirely sure the code samples it contains are valid in all browsers, so caveat emptor and test thoroughly. Nevertheless, it's a great introduction to the subject to get started.
Custom Elements : Defining new elements in HTML