homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Understanding Fundamental HTML References
Elements, Attributes, Values, and other goodies...
JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 11535 posted 9:22 pm on Dec 24, 2005 (gmt 0)

I was playing with some JavaScript and I hit a barrier...now this post isn't in regards to JavaScript but more so inspired by my trying to learn it further.

A lot of times we refer to something such as <span as a span tag but this is an incorrect reference. The <span "span tag" is correctly referenced as the span element.

HTML
<span class="bob">

Reference
<element attribute="value">

Now there are some other references that I am vaguely aware of and probably a few that I am blatantly unaware of.

One for example is how to reference data between the opening and closing elements.

A list of things I am aware and understand to one extent or another...

Declaration
Doctype
Element
Attribute
Value

What is the reference I am trying to find the word for and what are other types of references? This would help me greatly in manipulating JavaScript and other languages.

John

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 11535 posted 11:14 pm on Dec 24, 2005 (gmt 0)

I think its a very good thing to be vigorous in using precise technical vocabulary -- it makes all our discussions here so much clearer, although I know certain "shortcut conventions" will always creep into our language. For example, we often talk about "code" when the more precise word is "markup". In the interests of promoting clarity, lets first take a short walk through some relatively recent history.

The origins of the word "markup" are in typesetting. The word denotes instructions added to the source document that instruct the typesetter about fonts, point sizes, special ornamentation and the like. This original kind of markup had nothing to do with the content of the document and only addressed its presentation. It is literally extra instructions that are added by hand (marked up) on a document. This kind of markup is called PROCEDURAL markup

Library science in particular felt a strong need for a CONTENT markup system for documents -- one that could be descriptive of a document's content in various ways, rather than being simply procedural for the document's presentation. Several different types of markup were developed in the middle of the twentieth century -- and as tends to happen in areas without without standardization, the field was becoming a kind of "Babel".

And so, by 1970, GML (General Markup Language) had arrived, and this gradually evolved into SGML (Standardized General Markup Language). SGML was adopted as an international standard by the ISO in 1986, and it has been used since then in academic and business applications.

SGML is not really a stand-alone language. It's better understood as a meta-language, or more precisely a standardized set of rules that can be used to describe many kinds of markup languages.

And so in 1990 along came HTML (Hypertext Markup Langauge) -- a mark-up language for the Internet that was created so that hypertext documents could be systematically marked up in a language that follows SGML guidelines.

---------------

And now on to those specific terminology questions. As I understand it:

<span> is an HTML tag -- an opening tag, specifically
</span> is also an HTML tag -- a closing tag, specifically.

An HTML ELEMENT can be more than an HTML TAG, and it comes in two varieties:

1. a container element -- an element that includes
CONTENT between the opening and closing tags:

"element" = "opening tag" + "content" + "closing tag"
In this case, the element is MORE THAN the tag.

2. an empty element, such as <br />
In this case, the element is the SAME as the tag.

In other words, in #2, the element is not identical (==) to the tag, but it is equal to (=) to the tag

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 11535 posted 12:08 am on Dec 25, 2005 (gmt 0)

Thanks for the reply Ted...so in reply to your reply let me rephrase my more specific question...

What is the content correctly referenced as between the opening and closing tags of a container element?

I think when things are more relaxed for me in the semi-near future I'll have to read up about SGML and GML.

PS - Thanks for the F7 on the thread title. ;)

John

anax

5+ Year Member



 
Msg#: 11535 posted 12:11 am on Dec 25, 2005 (gmt 0)

tedster's got it right.

The best way to start to understand HTML conceptually is to turn off the computer and look at a book: any solid academic book, not a cheap paperback. The book is a document, and for centuries books have been organized into sub-parts (elements): chapters, paragraphs, sentences, sections, words, headings, quotations, block quotations, lists, emphasized bits, etc. If you look on the copyright page, usually the back of the title page, you'll see "metadata" -- that is, material that isn't really part of the book's content, but is instead material about the book: the copyright statement, the Library of Congress catalog number, the ISBN, the LC subject headings, etc.

We humans can look at a book and, because we know the conventions of typography, we can recognize the paragraphs (they are indented on the first line), the headings (they're bigger), the block quotations (they have white space above and below and are either in small type or are set in from the margin), the emphasized bits (they're in italic type), etc.

Computers are a lot stupider than humans, so when computers came to be used to process documents it became necessary to mark up documents so the dumb computer could tell which element was which. As tedster said, there were many ways this was initially done. A widely adopted approach was SGML (Standard Generalized Markup Language) which specified not a particular kind of markup, but rather a way to consistently create a markup system.

HTML is an example of a markup system created within SGML. XML is another, more complex markup system developed within SGML; it's a superset of (X)HTML.

SGML and its dialects mark up documents (i.e., tell the computer which parts of a document are which) with tags that delimit the element: a start tag and the beginning and an end tag at the end.

This is a simple document. It has a number of inherent elements, such as words and sentences. This simple document is just a single paragraph.

We can mark up the document with a start tag and and end tag to indicate that this group of sentences constitutes one paragraph.

<p lang="en">This is a simple document. It has a number of inherent elements, such as words and sentences. This simple document is just a single paragraph.</p>

The tags are shown here in bold; what's in between the start and end tags would best be called the content of the element; the content plus the tags is the entirety of the of element. One of the attributes of this element is that it's in English, so we have indicated this attribute with the attribute/value pair lang="en".

Enough for now. This is what you should study to get the big picture:

[w3.org...]

Robert Charlton

WebmasterWorld Administrator robert_charlton us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 11535 posted 12:45 am on Dec 25, 2005 (gmt 0)

...with tags that delimit the element: a start tag and the beginning and an end tag at the end.

To toss a little extra bit of ignorance into this discussion and ask a follow up question, perhaps more about common usage...

We have, in the head section of an html document, what most people call the title tag, but which pageoneresults rightfully pointed out should be called the title element.

But we also have the meta tags, and I've not seen these ever, at least in ongoing discussion, referred to as the meta elements.

Should these more correctly be called the meta elements?

anax

5+ Year Member



 
Msg#: 11535 posted 1:27 am on Dec 25, 2005 (gmt 0)

Ha, people who really know HTML *do* call them meta elements. ;-) Calling them "meta tags" is like having a page that doesn't validate - a sign of an amateur. (I say this light heartedly.) But yes, they are meta elements. <meta> elements, like <br> elements, are odd because they are empty, but they are elements none the less. Actually, the fact that meta elements are empty is an oddity of history, and a mark of confusion in the original construction of HTML. They should have been designed with standard start <meta> and end </meta> tags, with the content in between, but for some reason that didn't happen. (Style elements were done correctly: <style></style>, and you can of course write a break as <br></br>)

Somewhere I came across a humor page that had a table like this:

Correct name  What people call usually it 
element tag
attribute tag
meta element tag
selector tag
style rule tag
span tag
anchor tag
tag element

Alas, I didn't bookmark that page. If anyone knows the URL, I'd be pleased to have it.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 11535 posted 2:23 am on Dec 25, 2005 (gmt 0)

What is the content correctly referenced as between the opening and closing tags of a container element?

Now this is interesting, and a potential point of confusion for finely drawn semantics. JAB opened the thread by making a reference to javascript. It appears that all types of EMCAScript (javascript, jscript, actionscript and so on) use getElementById() -- and yet that method only returns the content of the element, and not the entire element as we've been discussing above.

JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 11535 posted 3:41 am on Dec 25, 2005 (gmt 0)

Yes Ted...the original intent was my pondering of how to write the content between the opening and closing tags of a container element. Here is how the element, it's attributes, and associated values are written when the page is served as application/xhtml+xml...

if (document.getElementById) {
var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
l.setAttribute("href", "../themes/theme-city.css");
l.setAttribute("media", "screen");
l.setAttribute("rel", "stylesheet");
l.setAttribute("title", "city");
l.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(l);
}

Besides the fact that I am not sure how to inject content via this manner I am also not aware of how to properly place the element on the page. This example works fine (for the new version of my stylesheet-switcher) but I have failed using this script with other elements in other parts of the page
(while aware and trying to change the "head" aspect of the script).

By being able to correctly reference aspects of the markup I can more clearly express my question in the JavaScript forum for example.

John

encyclo

WebmasterWorld Senior Member encyclo us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 11535 posted 3:55 am on Dec 25, 2005 (gmt 0)

Calling them "meta tags" is like having a page that doesn't validate - a sign of an amateur.

I will assume my amateur status then, as I'm pretty sloppy when it comes to certain descriptions. ;) If you look at the basics:

  • The global structure of an HTML document [w3.org]

    You will see that it is referred to as a meta element, however as that element has a "Start tag: required, End tag: forbidden", the entire element is comprised of one (opening) tag, so saying "meta tag" is strictly correct too!

    On the whole, I find that being rigorous is fine as long as you don't wander into pedanticism - as Ted mentioned, by convention we talk about source code even though this is a misnomer.

    So what is between the opening and closing tags of a document? If the tags are <body> and </body> then you will find the page content. I had a look at the XHTML Basic table module [w3.org] spec to provide some examples, and you will notice:

    <![%table.element;[
    <[b]!ENTITY % table.content
    "( %caption.qname;?, %tr.qname;+ )"[/b]
    >

    So the "content" of a table tag can be comprised of a caption or one/several tr elements. For a td you have:

    <![%td.element;[
    <[b]!ENTITY % td.content
    "( #PCDATA %FlowNoTable.mix; )*"[/b]
    >

    Note the [b]#PCDATA[/b]: so should we use that as an indicator that the more generic description of the content held between two tags would be data - which could comprise of other elements, tags, attributes, white space or content? Some elements (such as table) can only contain other elements (not raw data), some block-level elements (such as body) can contain other elements as well as raw data, inline elements (such as span) can only contain data or other inline elements and the meta element can contain nothing at all.

  • bedlam

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11535 posted 6:57 am on Dec 25, 2005 (gmt 0)

    This caught my eye:

    It appears that all types of EMCAScript (javascript, jscript, actionscript and so on) use getElementById() -- and yet that method only returns the content of the element, and not the entire element as we've been discussing above.

    ...but it seems not to be right. Anywhere I can recall using getElementById(), it returns the entire object referenced by the id. E.g. if you put this into an empty html document:

    <p id="foo">Foobar</p>
    <script type="text/javascript">
    alert(document.getElementById('foo'));
    </script>

    ...the result, on loading the page, is an alert box with the following content:

    (in Firefox) [object HTMLParagraphElement]
    (in Safari and IE Mac) [object P]

    ...and if you assign the 'getElementById' to a variable, you can use appendChild() and removeChild() to move the whole element into a new spot in the document.

    Did I misunderstand what you meant?

    -B

    tedster

    WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 1:46 pm on Dec 25, 2005 (gmt 0)

    I could have been a bit clearer. I meant that getElementBy Id() does not return the opening and closing tags but only the content between them. And being very pedantic, we are saying that "element" = "opening tag" + "content" + "closing tag". So we have two subtly different meanings for the term "element".

    aleksl



     
    Msg#: 11535 posted 5:38 pm on Dec 25, 2005 (gmt 0)

    tedster: to be vigorous in using precise technical vocabulary -- it makes all our discussions here so much clearer

    Jargon, or "tech speak" is something that I personally - being a non-native english speaker - hate the most about IT industry. To counter tedster here, such a thing as "precise technical vocabulary" does not exist. stuff gets invented by tech wizes who have their own vocabulary, then gets reinvented by marketing, by support, and many other folks who get involved, and in the end we have a giant mess of techno-speak, abbreviation that "almost" noone remembers, techno-sales pitches, and more.

    If we as an industry is to mature, there should not be a techno-speak. It is not IMHO a sign of strength, but of a weakness - "look we are so cool we have our own language only us can understand". And if, for instance, the word "tag" describes something that can be easily explained to a grandmother and joe sixpack, then lets keep it for clarity and sanity sake, and for the benefit of our clients as well.

    aleksl



     
    Msg#: 11535 posted 5:42 pm on Dec 25, 2005 (gmt 0)

    Sorry this may have been off topic a bit, but I don't see a Usability forum here, where issues like jargon should be discussed

    bedlam

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11535 posted 5:53 pm on Dec 25, 2005 (gmt 0)

    I could have been a bit clearer. I meant that getElementBy Id() does not return the opening and closing tags but only the content between them.

    I still must not understand what you mean; if you assign the result of a getElementById() statement to a variable, you can then use removeChild() to remove the original element--tags and all--and then use appendChild() to add it back to the document--tags and all.

    As far as I can tell getElementById() returns the element where element == (opening tag + content + closing tag)

    Maybe I should lay off the eggnog?

    -b

    tedster

    WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 6:40 pm on Dec 25, 2005 (gmt 0)

    No, bedlam, it is apparently me who should be backing off the eggnog. I was relying on some non-standard Opera behavior for my comments.

    ogletree

    WebmasterWorld Senior Member ogletree us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 9:49 pm on Dec 25, 2005 (gmt 0)

    GEEKS! :)

    anax

    5+ Year Member



     
    Msg#: 11535 posted 11:50 pm on Dec 25, 2005 (gmt 0)

    Oh no! "The Rich Jerk" strikes again! Merry Christmas, professor.

    john_k

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11535 posted 3:51 pm on Dec 26, 2005 (gmt 0)

    Javascript is not HTML. Your browser utilizes javascript to manipulate HTML. The HTML element and the object returned by javascript's getElementById are two representations of the same thing.

    As was pointed out, an HTML element has an opening and closing tag (or it has a self-closing tag). The tags are the markup. The text (or other elements) between the tags is the content.

    When you use javascript's getElementById function, it returns the element as an object. The attributes of the tags and the content of the element is usually available through the object.

    But all of this is fairly off topic as the thread should be kept to a discussion of HTML. I guess my main point is that javascript is not HTML, and so points made here about HTML may not make sense when applied to the same terms in javascript.

    pageoneresults

    WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 11:25 pm on Dec 26, 2005 (gmt 0)

    Should these more correctly be called the meta elements?

    The correct way to refer to these are...

    Metadata Elements

    DrDoc

    WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 2:03 am on Dec 27, 2005 (gmt 0)

    Now this is interesting, and a potential point of confusion for finely drawn semantics. JAB opened the thread by making a reference to javascript. It appears that all types of EMCAScript (javascript, jscript, actionscript and so on) use getElementById() -- and yet that method only returns the content of the element, and not the entire element as we've been discussing above.

    Let's look at some code:

    <p id="a"><b>foo</b></p>
    <p id="b"><b>foo</b></p>
    <p id="c"><b>foo</b></p>

    Now, imagine some javascript code:
    blah = document.getElementById('b')

    blah will, as have been metioned, hold a pointer to an object. That object can be further queried thus:
    blah = document.getElementById('b').tagName
    blah now returns P

    blah = document.getElementById('b').innerText
    blah now returns foo

    blah = document.getElementById('b').innerHTML
    blah now returns <b>foo</b>

    So, javascript code (when you really think about it) is actually correct, with regards to naming conventions.

    get[b]Element[/b]ById correctly returns a pointer to an element -- the entire paragraph with the ID of "b"
    [b]tagName[/b] correctly returns the tag name for the element -- in this case "P"

    There are other functions available as well, to query attributes, siblings, etc. But let's not go there (yet).

    the_nerd

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11535 posted 10:08 am on Dec 27, 2005 (gmt 0)

    Most people reading this thread probably are webmasters looking for the correct way to name things. We can sort it out.

    But did what happens if you talk to customers? Will you try an teach them a lesson - or will you mimick their way?

    One example: for whatever reason, Germans call their website "homepage". Now you can either stick to "website", creating a communication problem or use the wrong phrase.

    What would you guys do?

    pageoneresults

    WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 2:10 pm on Dec 27, 2005 (gmt 0)

    Will you try an teach them a lesson - or will you mimick their way?

    I always make it a point to use correct terminology when communicating with clients whether it be in person, via telcon, or via email. If via email and I'm using acronyms, initialisms, etc. I will spell things out for them. If they are going to be involved with the day to day operation of their website(s), they need to know the lingo too.

    tedster

    WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 5:07 pm on Dec 27, 2005 (gmt 0)

    I agree with p1r, unless a client proves to be impenetrable, I use correct terminology. But sometimes even the most basic things can seem hard to grasp for some people.

    I have one client who consistently asks about "linking to" other sites when they mean "getting links from" other sites. Now that's not even web terminology,. it's just ordinary language. But it is evidence or a rather fundamental "I don't get it" about the web altogether.

    However, many times I am a consultant to a business that has their own development team. That team MUST learn correct terminolgy if we're going to get the job done, so I cut those folks no slack whatsoever. I just will not abide "alt tag" and the like. But for their boss? I might bend just a bit if I need to.

    g1smd

    WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 11:08 pm on Dec 27, 2005 (gmt 0)

    Yes, I am also a stickler for correcting people that say "alt tag" when they meant "alt attribute", simply because when the conversation moves on to title tags or title elements versus title attributes they are otherwise going to be completely confused.

    JAB Creations

    WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



     
    Msg#: 11535 posted 8:50 am on Jan 2, 2006 (gmt 0)

    How about entities; amperstamps and such?

    RonPK

    WebmasterWorld Senior Member 10+ Year Member



     
    Msg#: 11535 posted 10:03 pm on Jan 2, 2006 (gmt 0)

    Entities are entities; not much mystery about them.

    The real fun starts when ignorant webmasters (like me) try to explain the difference between doctypes, declarations, definitions and DTDs.
    Document Type Declaration!= DTD, and such.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / HTML
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved