I am writing an e-mail HTML template, and some e-mail clients do not support <style> for specifying CSS. The only alternative for applying CSS is to use inline styles (style attribute). Is there a tool or library (Node.JS) for applying a stylesheet to some HTML and getting back the HTML with the styles applied?
The tool does not have to support many selectors; id, class, and element name selectors should be sufficient for my needs.
Example of what is needed:
// stylesheet.css
a { color: red; }
// email.html
<p>This is a test</p>
// Expected result
<p>This is a test</p>
I think juice is what you're looking for.
Simply require it, then pass it your html and css and let it do the heavy lifting for you like this:
var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');
It builds on a number of mature libraries including mootools' slick, and supports a broad range of selectors.
You may also be interested in node-email-templates, which is a nice wrapper for dynamic emails in node.
Here's the alive javascript projects that does what you want:
juice. 1.7Mb with dependencies.
juice2. 5.9Mb with dependencies. This is a fork of juice, seems to be containing more options than juice. This one doesn't drop media queries as juice does. Sorts inline css rules alphabetically.
styliner. 4.0Mb with dependencies. This one uses promises instead. Have a couple of different options than juice2. Has a compact option that other ones don't have that minifies the html. Doesn't read the html file itself as others do. Also extends margin and padding shorthands. And in case you somehow modify your native objects(like if you are using sugar) I don't suggest using this till this issue is resolved.
So which one to use? Well it depends on the way you write CSS. They each have different support for edge cases. Better check each and do some tests to understand perfectly.
You could use jsdom + jquery to apply $('a').css({color:'red'});
2020 solution
https://www.npmjs.com/package/inline-css
var inlineCss = require('inline-css');
var html = "<style>div{color:red;}</style><div/>";
inlineCss(html, options)
.then(function(html) { console.log(html); });
Another alternative is to go back to basics. If you want a link to be red, instead of
my link
do
<font color="red">my link</font>
Almost any browser, including the terrible BlackBerry browser can handle that.
Related
Problem
I have a collection of images with linked captions on a page. I want them each to have identical HTML.
Typically, i copy and paste the HTML over and over for each item. The problem is, if i want to tweak the HTML, i have to do it for all of them. It's time-consuming, and there's risk of mistakes.
Quick and Dirty Templating
I'd like to write just one copy of the HTML, list the content items as plain text, and on page-render the HTML would get automatically repeated for each content-item.
HTML
<p><img src=IMAGE-URL>
<br>
<a target='_blank' href=LINK-URL>CAPTION</a></p>
Content List
IMAGE-URL, LINK-URL, CAPTION
/data/khang.jpg, https://khangssite.com, Khang Le
/data/sam.jpg, https://samssite.com, Sam Smith
/data/joy.jpg, https://joyssite.com, Joy Jones
/data/sue.jpg, https://suessite.com, Sue Sneed
/data/dog.jpg, https://dogssite.com, Brown Dog
/data/cat.jpg, https://catssite.com, Black Cat
Single Item
Ideally, i could put the plain-text content for a single item anywhere on a page, with some kind of identifier to indicate which HTML template to use (similar to classes with CSS).
TEMPLATE=MyTemplate1, IMAGE-URL=khang.jpg, LINK-URL=https://khangssite.com, CAPTION=Khang Le
Implementation
Templating systems are widely used, like Django and Smarty on the server side, and Mustache on the client side. This question seeks a simple, single-file template solution, without using external libs.
I want to achieve this without a framework, library, etc. I'd like to put the HTML and content-list in the same .html file.
Definitely no database. It should be quick and simple to set it up within a page, without installing or configuring additional services.
Ideally, i'd like to do this without javascript, but that's not a strict requirement. If there's javascript, it should be ignorant of the fieldnames. Ideally, very short and simple. No jquery please.
you mean Template literals (Template strings) ?
const arrData =
[ { img: '/data/khang.jpg', link: 'https://khangssite.com', txt: 'Khang Le' }
, { img: '/data/sam.jpg', link: 'https://samssite.com', txt: 'Sam Smith' }
, { img: '/data/joy.jpg', link: 'https://joyssite.com', txt: 'Joy Jones' }
, { img: '/data/sue.jpg', link: 'https://suessite.com', txt: 'Sue Sneed' }
, { img: '/data/dog.jpg', link: 'https://dogssite.com', txt: 'Brown Dog' }
, { img: '/data/cat.jpg', link: 'https://catssite.com', txt: 'Black Cat' }
]
const myObj = document.querySelector('#my-div')
arrData.forEach(({ img, link, txt }) =>
{
myObj.innerHTML += `
<p>
<img src="${img}">
<br>
<a target='_blank' href="${link}">${txt}</a>
</p>`
});
<div id="my-div"></div>
This answer is a complete solution. It's exciting to edit the HTML template in codepen and watch the layout of each copy change in real time -- similar to the experience of editing a CSS class and watching the live changes.
Here's the code, followed by explanation.
HTML
<span id="template-container"></span>
<div hidden id="template-data">
IMG,, LINK,, CAPTION
https://www.referenseo.com/wp-content/uploads/2019/03/image-attractive.jpg,, khangssite.com,, Khang Le
https://i.redd.it/jeuusd992wd41.jpg,, suessite.com,, Sue Sneed
https://picsum.photos/536/354,, catssite.com,, Black Cat
</div>
<template id="art-template">
<span class="art-item">
<p>
<a href="${LINK}" target="_blank">
<img src="${IMG}" alt="" />
<br>
${CAPTION}
</a>
</p>
</span>
</template>
Javascript
window.onload = function LoadTemplate() {
// get template data.
let sRawData = document.querySelector("#template-data").innerHTML.trim();
// load header and data into arrays
const headersEnd = sRawData.indexOf("\n");
const headers = sRawData.slice(0, headersEnd).split(",,");
const aRows = sRawData.slice(headersEnd).trim().split("\n");
const data = aRows.map((element) => {
return element.split(",,");
});
// grab template and container
const templateHtml = document.querySelector("template").innerHTML;
const container = document.querySelector("#template-container");
// make html for each record
data.forEach((row) => {
let workingCopy = templateHtml;
// load current record into template
headers.forEach((header, column) => {
let value = row[column].trim();
let placeholder = `\$\{${header.trim()}\}`;
workingCopy = workingCopy.replaceAll(placeholder, value);
});
// append template to page, and loop to next record
container.innerHTML += workingCopy;
});
};
New version on github:
https://github.com/johnaweiss/HTML-Micro-Templating
Requirement
As specified in the question, this solution is intended to optimize the coding experience on the HTML side. That's the whole point of any web templating. Therefore, the JS has to work a little harder to make life easier for the HTML programmer.
The question seeks a reusable solution. Therefore, JS should be ignorant of the template, fields, and data-list. So unlike #MisterJojo's answer, the template and all data are in my HTML, not javascript. The JS code is generic.
Design
My solution is based on the <template> tag, which is intended for precisely this usage. It has various advantages, like the template isn't displayed, processed, or validated by the browser, so it has less impact on performance. Programmer doesn't have to write an explicit display:none style.
https://news.ycombinator.com/item?id=33089975
However, <template> tags are normally only intended for loading content into the layout. That's inadequate. This tool allows template variables anywhere in the HTML, including inside the tags (eg attributes like <img src).
HTML
My HTML has three blocks:
template: The HTML coder develops their desired display-structure of the output, in real HTML (not plain text). Uses <template>
data: The list of records each of which should be rendered using the same template. Uses <span> with a HIDDEN attribute.
container: The place to display all the output blocks. Uses <span>.
Template
My sample template includes 3 placeholders for data:
${LINK}
${IMG}
${CAPTION}
But of course you can use any placeholders, any number of them. I use string-literal delimiting-style (although i'm not actually using them as string-literals -- i just borrowed the delimiter style.)
Data Element
The question specifies data should be stored in HTML. It should require minimal keystrokes.
I didn't want to redundantly retype the fieldnames on every row. I didn't use slotting, JSO, Jason, or XML syntax, because those are all verbose.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
It's a simple delimited list. I eliminated all braces, brackets, equals, parens, colons etc.
I put the fieldname-headers only on the first row. The headers are a visual aid for the HTML developer, and a key for Javascript to know the fieldnames and order.
Record Delimiter: End-of-line
Field Delimiter: Double-commas. Seems safe, and they're easy to type. I don't expect to see double-commas in any actual data. Beware, the developer must enter a space for any empty cells, to prevent unintended double-commas. The programmer can easily use a different delimiter if they prefer, as long as they update the Javascript. You can use single-commas if you're sure there will be no embedded commas within a cell.
The data block is hidden using the hidden attribute. No CSS needed.
It's a span to ensure it takes up no room on the page.
JAVASCRIPT
Data
The data is processed by Javascript with two split statements, first on newline delimiter, then on the double-comma delimiter. That puts the whole thing into a 2D array. My JS uses trims to get rid of extra whitespace as needed.
Place-holder Substitution
Handling multiple entries requires plugging each entry into the template.
i went with simple string-replacement instead of string literals.
Multiple Templates
New version which supports multiple templates, and ability to use same template in multiple locations on same page.
https://github.com/johnaweiss/HTML-Micro-Templating
Future
Inspired by #MisterJojo, an earlier version of my solution used template literals to do the substitution. However, that was a bit more complicated and verbose, and seemed to require use of eval. So i switched to .replaceAll. Yet template-literals seems like a more appropriate method for templates, so maybe i'll revisit that.
A future version may adapt to whatever custom field-delimiter the HTML developer uses for the data block.
The dollar-curly delimiter for placeholders is a bit awkward to type. So i'm interested in finding a less awkward non-alpha delimiter that won't conflict with HTML. Considering double-brackets or braces [[NAME]]
Maybe there are simpler ways to pull the data-table into JS.
I've read components work well with <template>, but i didn't go there.
Imo, the JS committee should develop a variable-placeholder feature for <template> tags, and natively accommodate storing the data in HTML. It would be great if something like this solution was part of the rendering engine.
I don't like div soups. You don't easily see which end tag belongs to which start tag (correct indentation helps, I know), yadda yadda. HTML5 introduced custom elements. Is there any drawback using them instead of classes except for browser support, since older Edge and IE don't support them?
I think this this HTML code:
<blog-posts>
<blog-post>
<blog-title>Do HTML5 custom elements have any drawbacks compared to classes?</blog-title>
<blog-content>I don't like div soups</blog-content>
</blog-post>
</blog-posts>
is much nicer to read than
<div class="blog-posts">
<div class="blog-posts">
<div class="blog-title">Do HTML5 custom elements have any drawbacks compared to classes?</div>
<div>I don't like div soups</div>
</div>
</div>
If I understood correctly, even if I don't call document.registerElement for my custom elements, this will work just fine, since the elements will by default inherit from HTMLElement, which gives my more or less the same behavior as the HTMLDivElement.
Always distrust developers who tell you what you should or shouldn't do.
It is your code, if it works for you, it works.
You are using W3C standard technologies so it will work for as long Browsers run JavaScript.
Yes, Web Components V0 (Google threw something against the wall) got a bad reputation;
but we are on V1 now, since 2018, and Google, Apple, Mozilla, Microsoft are now more closely working together.
(WTF.. Where is Facebook?)
Personally, I prefer:
<blog-posts-listing>
<blog-post title="Do HTML5 custom elements have any drawbacks compared to classes?">
I don't like DIV soups
</blog-post>
<blog-post title="What is the future for React?" tags="React">
I don't like **JSX** soup either
</blog-post>
</blog-posts-listing>
Because <blog-post> would be the work-horse that creates content in shadowDOM from this lightDOM.
Good use of attributes allow for great CSS
blog-post:not([title*="React"]){
background-color:lightgreen;
}
blog-post[title*="React"]{
background-color:lightcoral;
}
You can even add search with minimal JS, create styles dynamically
Adding functionality like a MarkDown parser is a breeze then
Do not create HTML tags just because you can create HTML tags...
But remember what I said about Developer advice.
I managed to add HTML (text only) to a Word-document following this post Add HTML String to OpenXML, using an already existing Word-file.
Unfortunately, I can't find any solution to use style from this Word-template for my newly added text. It is always "Times New Roman" size 12px although the standard style of the used template is "Arial" size 9px.
So fare I tried:
Using the ParagraphProperties as I would do for not HTML texts.
Paragraph para = body.AppendChild(new Paragraph());
Run run = para.AppendChild(new Run());
run.AppendChild(altChunk);
para.ParagraphProperties = new ParagraphProperties(new ParagraphStyleId() { Val = "berschrift2" });
Turnig MatchSource off
AltChunkProperties altChunkProperties = new AltChunkProperties();
altChunkProperties.MatchSource = new MatchSource() { Val = new OnOffValue(false) };
altChunk.AppendChild<AltChunkProperties>(altChunkProperties);
Any suggestions?
EDIT:
I found a workaround, which isn´t really a solution for my question, but works for me. I'm no longer trying to use the style from word, but adding the styles to my html before using altchunk.
Some explanation: if you look at the definition of altChunk in ISO 29500-1 17.17.2.1 and specifically in the A.1 section, the schema shows that altChunk is a EG_BlockLevelElts element and this is a peer with paragraphs (i.e. ). It is technically not correct to add as a child to run elements or even paragraph. It should be added at the body level. The fact that Word doesn't complain when adding as a run or paragraph child is unintentional and shouldn't be relied on.
As a result, what Word is doing is using the default style property for fonts to format this new content. You can try this by changing the document defaults in the styles.xml part. With match source property set to false, there isn't a way to specify the font besides document defaults.
Having said that, I think that Thomas' alternative is a better way to go.
The real solution for your question is to transform HTML into Open XML markup "yourself" rather than relying on the alternative format import parts in conjunction with w:altChunk elements. This creates a dependency on how Microsoft Word handles the import, often with little control on your side.
How do you transform HTML (or XML in general) to Open XML markup? The best way is to write so-called recursive pure functional transformations, which translate HTML elements and attributes to Open XML elements and attributes. If you have really simple HTML documents, that is not a big task. However, doing this for "arbitrary" HTML and CSS is quite a feat.
The good news is that the Open-XML-PowerTools, an Open Source library, contain functionality to transform HTML to Open XML and vice versa. Thus, I'd recommend you have a look at that library.
What worked for me and for my situation (if you don't want to go down the rather complex openxml powertools html converter root) is to add a HTML style attribute to the body section of your HTML fragment as follows:
Encoding.UTF8.GetBytes(
#$"<html><head><title></title></head><body style=""font-family: Calibri"">{ConvertUnconventionalUnicodeCharsToAscii(htmlAsString)}</body></html>");
It might be possible to dynamically derive the font family of the "normal" style embedded into the document you are updating and insert that name into the style attribute if deemed compatible.
That way, if you decide to change the base/ normal font the style of the HTML import will attempt to utilise the same font family.
Sorry if a bit off topic, I also could not get alternativeFormatImportPart.FeedData() to process "’" (code 8217) UTF-16 characters and so had to specifically replace them with "'" (code 39) in order to avoid them from being rendered as the following sequence ’
When we change an icon foundry, it causes a minor snafu in that a lot of code needs to be revisited because icon names change. Some automated translation might be possible using text utils, but not when icon names are generated in a structured way (e.g., i-star-filled v/s i-star-empty based on a boolean).
What I want instead is to use functional names for my icons (such as xyz-search, xyz-cancel, xyz-filterable, etc.) and then map them to the actual icon name provided by the foundry. For example, glyphicon names might be different from those used by font awesome. How can I provide some kind of indirection (the same kind of liberation that HTML tags strong and em provide)?
Our first thought was to use a lookup table in javascript to translate from one namespace into another. But that works only when the HTML is being generated (we use angularjs); not helpful for static code, nor in those few cases where the icon name is generated computationally, as in the example in the first para.
So now we are toying with SASS (I have googled a fair bit but all in vain, nor is my CSS very shiny). Is there a SASS idiom that fits here, to translate something like
<i class="xyz-filterable ...">
to
<i class="i-funnel ...">
for the same visual and interaction outcome. (I understand the actual CSS will look quite different)
I do not want to use any foo.addClass().
Thanks
Use #extend:
Sass:
.xyz-filterable {
background-image: url(foo.png);
}
.i-funnel {
#extend .xyz-filterable;
}
Compiled CSS:
.xyz-filterable, .i-funnel {
background-image: url(foo.png);
}
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