•  15-06-2023
  •  | 
  •  

Pregunta

Basically I want to name a custom tag that is basically a div, but has a different name so that you can see what it is when looking at the HTML code. JavaScript under-the-hood will do stuff with the circular-view and circular-objects making it work. So far I have this but all that shows up on the page is ]>. By the way, the JavaScript code doesn't really do anything yet.

<!DOCTYPE html
[
    <!ELEMENT circular-view (circular-object*)>
    <!ELEMENT circular-object EMPTY>
    <!ATTLIST circular-object icon CDATA #REQUIRED>
    <!ATTLIST circular-object title CDATA #REQUIRED>
]>

<!--

    The custom element circular-view is to be used as a container
    for the circular-objects inside

    You must set the icon="link to image file"
    and title="text" attributes of each circular-object

    You can also set the id="" attribute of a circular-view
    to give it a custom size, layout, etc

-->

<html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="stylesheet" type="text/css" href="Framework/FrameworkStyles.css"/>

        <script src="Framework/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="Framework/Animation.js"></script>
        <script type="text/javascript" src="Framework/CircularSelection.js"></script>
        <script type="text/javascript" src="Framework/CircularObject.js"></script>
        <script type="text/javascript" src="indexScript.js"></script>
        <!-- The page-specific JavaScript file should come last in the 
            list of scripts to avoid any declaration problems -->
    </head>

    <body onload="pageLoad()">


        <!---->


        <circular-view id="featuredView"><!--The container-->
            <circular-object title="1" icon="Example Pizza.png"/><!--JS will add img and div tags as children to display the stuff-->
            <circular-object title="2" icon="Example Pizza.png"/>
            <circular-object title="3" icon="Example Pizza.png"/>
            <circular-object title="4" icon="Example Pizza.png"/>
            <circular-object title="5" icon="Example Pizza.png"/>
            <circular-object title="6" icon="Example Pizza.png"/>
            <circular-object title="7" icon="Example Pizza.png"/>
            <circular-object title="8" icon="Example Pizza.png"/>
            <circular-object title="9" icon="Example Pizza.png"/>
            <circular-object title="10" icon="Example Pizza.png"/>
            <circular-object title="11" icon="Example Pizza.png"/>
        </circular-view>


        <!---->


    </body>
</html>

I'm new to DTD, a couple hours ago actually, so I'm not sure exactly what I'm doing.

¿Fue útil?

Solución

To use a custom element, you don’t need any DTD things. Browsers are DTD-ignorant (well, mostly). Just use the element. And use whatever doctype string you would use otherwise, such as the simple <!doctype html>.

But if you have any CSS styling for a custom element, then you need to introduce it with JavaScript, if you wish the styling to work in old versions of IE, too (IE 8 and older). In this case, you would put the following before the first reference to any stylesheet:

<script>
document.createElement('circular-view');
document.createElement('circular-object');
</script>

In this case, you probably don’t want to style these elements, so the script code isn’t needed.

Whether you should use custom tags is a different issue, and there are many questions on this at SO, see e.g. Using custom HTML Tags

The reason why you see “]>” is that when using HTML parsers, browsers do not process internal subsets of document type declarations, i.e. the [...] part. Instead they stop parsing when they see [ and thus take [> as character data.

The declaration is malformed even in principle, since it has only the internal subset, so it would make all other elements invalid.

When using XML (XHTML) parsers, modern browsers properly parse the internal subset, but they ignore element declarations. They are not validating processors, so they would have no use for element declarations.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top