CODEWITHSUNDEEP
javascripthtmlcssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152657

Syntax vs Element vs Tag vs attributes vs property vs selector?

Can anyone give me details on each?

for example?

Is #ID an attribute or property or selector or anchor?

Is default property and default attributes are different thing?

Are all these Tags or elements?

What we will say to this

<img src="angry.gif" alt="Angry face" title="Angry face" />

This 

<div>.....</div>

and these

<br /> , <hr />

Syntax , Tag or elements?

Thanks in advance.

Upvotes: 3

Views: 4728

Answers (3)

CuongHuyTo
CuongHuyTo

Reputation: 1333

In Web Programming (JavaScript, PHP, HTML, CSS...), then properties and attributes are all name-value pairs, with the difference in context/usage:

  • Properties: a set of name-value pairs which defines an OOP object (JavaScript, PHP, ..). E.g.: PERSON object is defined by {name=John, age=25, sex=Male, address=TwinTower - Room 911, SSN=123456789}
  • Attributes: a set of name-value pairs which define a Data object (e.g. DOM element in HTML, XML, ...). E.g.: < table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#D5DCE5" frame="border" rules="groups" class="box">< / table > is a DOM element consisted of a set of 8 attributes: {width, border, cellpadding, cellspacing, bordercolor, frame, rules, class}
  • Element: a branch or leaf of a DOM tree.
  • Tag: the name of an element. A DOM tag comes with a pair: an opening tag and a closing tag.

In the example below:

  • a tag-pair is anything of < TagName >< / TagName >, for example < Company > is an opening tag.
  • an element is anything between (including) the tag-pair, for example < Company >...< / Company >, or < TwoWheel >...< / TwoWheel > are the elements.
  • an attribute is a pair of name=value, for example logo="GreatCar".
  • a property does not make sense in this Data object, but if you model that in an OOP Object, then you can have a property of boss="JohnSmith" inside the object Company.

Example:

<Company name="GreatCompany" boss="JohnSmith">
    <Address>
    </Address>
    <Products>
        <Automobile>
            <FourWheel mark="car" logo="GreatCar">
            </FourWheel>
            <TwoWheel>
                <CityRunner></CityRunner>
                <JungleRunner></JungleRunner>
            </TwoWheel>
        </Automobile>
        <Airplane>
        </Airplane>
    <Products>
</Company>

Hope that helps

Cuong Huy To

Upvotes: 2

cletus
cletus

Reputation: 625057

In:

#menu ul li {
  display: inline;
}

we have:

  • Selector: #menu ul li;
  • Property: display;
  • Property value: inline.

In:

<ul id="menu">...</ul>

we have:

  • Element or Tag: <ul>;
  • Attribute: id;
  • Attribute value: menu.

Edit: Ok, to address this issue of tags vs elements.

Both the XML and HTML 4.01 specifications use the terms:

  • Start Tag: <ul>;
  • End Tag: </ul>; and
  • Element <ul>...</ul>.

However, in colloquial usage, such distinctions are so rare that there are arguments about it. In normal use the terms are interchangeable even though that it not their precise definition.

Upvotes: 8

Anthony
Anthony

Reputation: 37065

You are basically asking about context.

Attribute

An id, in the context of an element, is an attribute. This is true both for XML and DOM context. So when I say "What is that element's ID?" I'm referring to the element's id attribute.

Selector

If I am using an attribute to add style to the document, I'm using a selector. A selector is the way in which I select the thing (whether it is an element or an attribute) that I want to apply the style rule to.

Tag,

and I'm still fuzzy on this, refers either to the actual type of element, or the literal bit of code itself. So I can say "You forgot to close that div element" or I can say "you need a closer tag on that div". So a tag is what designates what the element in question is.

The element

itself is, most loosely, the opening tag, the closing tag (in any) and the text in between (if any). But more strictly, it is also any attributes of that element. The attributes may change (perhaps you use a script to swap out where an img element's src points) and that doesn't make it a different element, but the element still has that attribute and thus it is part of the element, even if only for a short time.

Properties

are an aspect of Object-Oriented programming. In the context of Javascript, a property could be part of an object that never gets output at all to the user or inserted into the HTML. You may have a special class in your script for converting data that the user enters. Once you get the property of the object, you then might run it through some other function before finally outputting back to the user. The reason you may hear of properties in terms of HTML is because of how Javascript interacts with the document as a "Document Object Model" (DOM). If you define a variable as "document.getElementById("blah"), that variable is now holding an object, and various properties in that object will coorespond to various aspects of that element, some of which may be pre-defined attributes, such as the border color or value, and other things not defined at the HTML level, such as it's position on the screen or rendered font height.

Upvotes: 3

Related Questions