Related
When looking at the source code of the HTML standard there were some tags that I didn't recognise..
For example in this snippet:
<pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlparagraphelement' data-dfn-type='interface'><c- g>HTMLParagraphElement</c-></dfn> : <a id='the-p-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
[<a id='the-p-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();
// <a href='obsolete.html#HTMLParagraphElement-partial'>also has obsolete members</a>
};</code></pre>
From https://html.spec.whatwg.org/multipage/grouping-content.html
I thought these may be custom elements, but it doesn't look like they are defined via the custom element registry.. This is the result of interrogating the customElements object.
>>> customElements.get('c')
undefined
>>> customElements.get('c-')
undefined
Is this allowed? (I'd guess so since it's from the HTML standard, but it's still surprising to me). How would the browser know how these elements are supposed to be displayed? For example display: block vs. display: inline.
These are custom-elements (and valid HTML), generated by bikeshed's highlighter.
There is no need to define these as customElements because they don't bring any particular behavior, all they do is to ... save bandwidth.
Here is the commit excerpt:
🚨 TERRIBLE-HACK-ALERT 🚨 Switch to using <c- kt> instead of <span clas…
…s='kt'> to cut the weight of highlighting in half. Still valid HTML!
So apparently by switching from <span class="kt"> to <c- kt> (and span.kt { to c-[kt]{) they saved half of the weight induced by their highlighting.
Though as they say, it's a "terrible-hack", which still can make sense when building a tool that generates the majority of Web Standards pages, which can get very lengthy.
Regarding the default display of such custom-element, I'll quote Alohci's comment which did put it nicely:
All elements take the initial, or inherited for inherited properties, value of each CSS property until specified otherwise. So they would be display:inline
And regarding your expectation to see only best practices in the specs sources, it's better not assume so. Read the content of these pages, don't look at how they're built.
Most HTML editors don't look at the tools that will generate the pages, they write the specs in a pseudo-HTML language full of templates.
Or as it's put in the source:
<!-- Note: This file is NOT HTML, it's a proprietary language that is then post-processed into HTML. -->
I'm trying to make text which is either invisible until moused over, or, has a "show" / "hide" button, or some other thing, so that it is not visible until the user interacts with it in some way.
I'm trying to do this on a github wiki page. (Specifically it's for a short self-quiz.)
Basically I want to get a similar effect to what SO achieves with the >! markup:
Hoho! Spoiler text!
as described in these meta posts.
The same markup doesn't work in github, I guess that it's an SO extension?
I saw this issue about using spoiler text in comments on github, which was closed, but I thought there might be a different answer for the wiki pages, or a different solution based on HTML or something?
Does anyone know if there's a way to do this, or if it is definitely unfortunately impossible?
GFM supports a subset of HTML. For now, you can wrap your question in a <summary> and your answer in any standard HTML tag like <p> and wrap the whole thing in the <details> tag.
So if you do this
<details>
<summary>Q1: What is the best Language in the World? </summary>
A1: JavaScript
</details>
You get this -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test
Browser support is an Issue.
The thing with GitHUB wiki is that it allows you write text in other formats like AsciiDoc, RST etc. Probabaly there's solution in those too. These are 2 formats that are far more feature rich than Markdown.
Building on Gaurav's answer and this GH issue here's a way to use advanced formatting inside the <details> tag on GitHub:
Note: original answer from 2016 required <p>, since 2017 that requirement is an empty line after </summary> (i.e. before expanded contents). Somewhere along the line leading up to 2019, markdown in <summary> is not working any more either. You can see it's quite flaky as it's a hack/workaround, not a supported feature/use case. Also note that issue/PR comments support different formatting than Wikis (e.g. 2020 April underline in summary only works on Wiki, not on issues).
<details>
<summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code><summary></code> (<i>click to expand</i>)</summary>
<!-- have to be followed by an empty line! -->
## *formatted* **heading** with [a](link)
```java
code block
```
<details>
<summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
<!-- have to be followed by an empty line! -->
A bit more than normal indentation is necessary to get the nesting correct,
1. list
1. with
1. nested
1. items
```java
// including code
```
1. blocks
1. and continued non-nested
</details>
</details>
Currently it renders as the following with the expected parts expandable and collapsible:
Initial state
Click on summary
Click on nested summary
Literal spoiler text as shown in the question is not supported in GitHub Flavored Markdown or the original Markdown implementation.
However Markdown supports inline HTML, and GitHub allows a subset of HTML tags to remain in the rendered output. As described in other answers, <details> works on GitHub.
If that's "spoilery" enough for you, feel free to use it.
The html element <details> and <summary> can do it, have a look:
http://caniuse.com/#search=details
Support is poor for Firefox & Edge, but there may be some pollyfills...
If editing the CSS is an option for you, you can simply use
[](#spoiler "Spoiler Filled Text")
and then use (pure) CSS to give the correct appearance.
a[href="#spoiler"] {
text-decoration: none !important;
cursor: default;
margin-bottom: 10px;
padding: 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
display: inline-block;
}
a[href="#spoiler"]::after {
content: attr(title);
color: #FFF8DC;
padding: 0 0.5em;
}
a[href="#spoiler"]:hover::after,
a[href="#spoiler"]:active::after {
cursor: auto;
color: black;
transition: color .5s ease-in-out;
}
<p>
</p>
(Vaguely inspired from this code)
A different solution from the details / summary tags, but also using native html is to use a span with a title. I was doing something like this recently in org mode.
Here is a nonstandard HTML element that I defined (AngularJS makes this easy):
<exercise id="Sample Exercise" language="Scala" lectureId="5437">
This is the text of the lecture
</exercise>
If I use this element in an HTML document, each time I switch from CKEditor's rendered mode to source mode a new empty paragraph is added between each of the block elements in the document:
<p> </p>
The 2nd time I switch, I get two insertions:
<p> </p>
<p> </p>
The 3rd time I switch, I get three insertions between each block-level element, etc:
<p> </p>
<p> </p>
<p> </p>
Can anyone suggest a workaround?
It seemed easier to avoid custom elements and so I used HTML5 data attributes.
<div class="exercise" data-id="Challenge #42" data-language="Scala" data-lectureid="5437">
<p>Create a program that outputs the meaning of life, the universe, and everything.</p></div>
This worked out. Maybe greater integration between CKEditor and AngularJS will evolve over time.
Pekka's question is very good - why do you need to load a custom element into CKEditor? Neither browsers (which do one part of WYSIWYG editing) not CKEditor (which does another part) know how to handle this element, what it means, how to render it and how editing features should work around it. For example, if I understood your question, you wrote about <exercise> that it is a block element. How do CKEditor and browsers know that it is a block element? :|
Second thing you should understand is that CKEditor is not a WYSIWYG website builder, but a "documents" editor. Its content has to have a meaning for it and that tag won't have it.
Anyway, if you must go this way, there are some things you can do.
Here are two answers that can give you an idea what you can do: CKEditor strips <i> Tag.
If you'll decide not to protect source of your <exercise> tags, but to render them, then you should also know about the CKEDITOR.dtd object, which I described briefly here: ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>").
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
I have a situation as follows
<body>
Test<br />
test<br />
test1<br />
</body>
I need to add a tab after the 2nd test and 3rd test
so that it looks similar to this.
Test
test
test1
Is there a special HTML entity or special character for TAB. eg. Non-breaking space == & nbsp ;
thanks
The simplest way I can think of would be to place the text in nested divs. Then add margin to the left of div. It will cascade down, giving you indentation.
<div id='testing'>
Test1
<div>
Test2
<div>
Test3
</div>
</div>
</div>
With the CSS:
#testing div {
margin-left: 10px;/*or whatever indentation size you want*/
}
With those, you'll get a nice tree, no matter how many levels deep you want to go.
EDIT: You can also use padding-left if you want.
If you really want to use tabs (== tabulator characters), you have to go with the following solution, which I don't recommend:
<pre>
test
test
test
</pre>
or replace the <pre/> with <div style="white-space: pre" /> to achieve the same effect as with the pre element. You can even enter a literal tab character instead of the escaped .
I don't recommend it for most usages, because it is not really semantic, that is, from viewing the HTML source a program cannot deduce any useful information (like, e.g., "this is a heading" or such). You'd be better off using one of the nice margin-left examples of the other answers. However, if you'd like to display some stuff like source code or the such, the above solution would do it.
Cheers,
Ye gods, tables?
Looks like an obvious use-case for lists, with variable margin and list-style-type: none; seasoned to taste.
See Making a 'Tab' in HTML by Neha Sinha:
Preformatted
You can put tab characters in your HTML directly if
you use what’s called “preformatted”
text.In HTML, surround text that you
want “preformatted” in a pair of
“<pre>” and “</pre>” start and end
tags.
Tables
You can use a html table so that everything you put within the set of rows(<tr>) and
columns(<td>) shows up the same way. You can very well hide the table borders to show the text alone.
Using the <dd> Tag
The <dd> tag is for formatting definitions. But it
also will create a line break and make
a tab!
, The Non-Breaking Space
One bit of HTML code I used in the table example is the “non-breaking space,” encoded as in HTML. This just gives you some space. Combined with a line break, <br>, you can create some tab-like effects.
Example
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>
this should render as:
Test
test
test1
There have been a variety of good and bad answers so far but it seems no-one has addressed the way that you can choose between the solutions.
The first question to ask is "What is the relationship between the data being displayed?". Once this has been answered it the HTML structure you use should be obvious.
Please update the question explaining more about the structure of the content you need to display and you should find that you get better answers. At the moment everything from using <pre> to tables might be the best solution.
I think that easiest thing to do is to use UL/LI html tags and then to manipulate (and remove if needed) symbols in front of list with CSS.
Then you get something like:
Test
Test2
Test 3
More info + working example you can try out.
If you need to display tabs (tabulator characters), use a PRE element (or any element with the white-space: pre; CSS applied to it).
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
pre { white-space: pre; }
</style>
</head>
<body>
<p>This is a normal paragraph, blah blah blah.</p>
<pre>This is preformatted text contained within a <code>PRE</code> element. Oh, and here are some tab characters, each of which are displayed between two arrows: ← → ← → ← → ← →</pre>
</body>
</html>
You can also use the HTML entity instead of the actual tab character.
I am not a fan of using CSS to simulate a Tab Character.
For Indenting, yes, by all means use CSS - but not for Tab Characters.
For a single Tab, I would replace with " " (4 Spaces).
This is similar to what was used to format your Question for display.
The added benefit to this is (if someone copies your text)
it will preserve the spacing when pasted into Word or Notepad.
Example:
Test<br />
test<br />
test1
Note: If your text is in a <pre> tag, then #Boldewyn's answer is the better option.
Keep in mind, the text in the <pre> tag may render differently than expected.
I realize this is an old post, however someone may want to use the following list in order to create an indented list (by using a description list)
In my opinion, this is a much cleaner way than many of the other answers here and may be the best way to go:
It does not use a bunch of whitespace characters (which gives little control in terms of formatting for styles)
It does not use the <pre> tag, which should only be used for formatting (in my opinion, this should pretty much be a last resort or a special-case use in HTML); <pre> tag is also whitespace-dependent and not CSS dependent when used the way it is intended to be used
w3schools says to use the <pre> element when displaying text with unusual formatting, or some sort of computer code.
description lists allow for more control in terms of formatting and hierarchy
The answer by #geowa4, I would say, is another great way to accomplish this. <div>s allow for style control and, depending on use/objective, his answer may be the best way to go.
<dl>
<dt>Test</dt>
<dd>
<dl>
<dt>test</dt>
<dd>test1</dd>
</dl>
</dd>
</dl>