Learn The Basic Of Html Elements

This article is about the HTML elements in general.

  • An HTML element is an individual component of an HTML document or “web page”, once this has been parsed into the Document Object Model.

HTML5-1590116104

  • HTML is composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have HTML attributes specified. Elements can also have content, including other elements and text.
  • HTML elements represent semantics, or meaning. For example, the title element represents the title of the document.

HTML SYNTAX

  • In the HTML syntax, most elements are written with a start tag and an end tag, with the content in between.
  • An HTML tag is composed of the name of the element, surrounded by angle brackets.
  • An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag.
  • For example, a paragraph, which is represented by the <p>element, would be written as
<p>In the HTML syntax, most elements are written ...</p>

However, not all of these elements require the end tag, or even the start tag, to be present.

Some elements, the so-called void elements, do not have an end tag.

A typical example is the <br> element, which represents a significant line break, such as in a poem or an address.

A void element’s behaviour is predefined, and it can not contain any content or other elements. For example, the address of the dentist in Finding Nemo would be written as

<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>

When using an XHTML DTD, you are required to open and close the element with a single tag.

You indicate that it is a void element by including a “/” at the end of the tag (not to be confused with the “/” at the beginning of a closing tag).

<p>P. Sherman<br/>42 Wallaby Way<br/>Sydney</p>

Concepts

Document vs. DOM

  • HTML documents are delivered as “documents”.These are then parsed, which turns them into the Document Object Model (DOM) internal representation, within the web browser.
  • Presentation by the web browser, such as screen rendering or access by JavaScript, is then performed on this internal model, not the original document.
  • Early HTML documents, and to a lesser extent today, were largely invalid HTML and riddled with syntax errors. The parsing process was also required to “fix-up” these errors, as best it could. The resultant model was often not correct

(i.e. it did not represent what a careless coder had originally intended),

but it would at least be valid, according to the HTML standard. A valid model was produced, no matter how bad the “tag soup” supplied had been. Only in the rarest cases would the parser abandon parsing altogether.

Elements vs. tags

“Elements” and “tags” are terms that are widely confused. HTML documents contain tags, but do not contain the elements.

  • The elements are only generated after the parsing step, from these tags.

As is generally understood, the position of an element is indicated as spanning from a start tag, possibly including some child content, and is terminated by an end tag.This is the case for many, but not all, elements within an HTML document.

As HTML is based on SGML,its parsing also depends on the use of a DTD, specifically an HTML DTD such as that for HTML 4.01.

The DTD specifies which element types are possible

(i.e. it defines the set of element types that go to make up HTML)

and it also specifies the valid combinations in which they may appear in a document.

It is part of general SGML behaviour that where only one valid structure is possible (per the DTD), it is not generally a requirement that the document explicitly states that structure.

  • As a simple example, the <p> start tag indicating the start of a paragraph element should be closed by a </p> end tag, indicating the end of the element. Also the DTD states that paragraph elements cannot be nested. The HTML document fragment:
<p>Para 1 <p>Para 2 <p>Para 3
  • can thus be inferred to be equivalent to:
<p>Para 1 </p><p>Para 2 </p><p>Para 3

(If one paragraph element cannot contain another, any currently open paragraph must be closed before starting another.)

Because of this implied behaviour, based on the combination of the DTD and the individual document, it is not possible to infer elements from the document tags alone, but only by also using an SGML or HTML aware parser, with knowledge of the DTD.

Element standards

  • HTML elements are defined in a series of freely available open standards issued since 1995, initially by the IETF and subsequently by the W3C.

Since the early 1990s, developers of user agents (e.g. web browsers) have often developed their own elements, some of which have been adopted in later standards. Other user agents may not recognize non-standard elements, and they may be ignored or displayed improperly.

In 1998, XML (a simplified form of SGML) introduced mechanisms to allow anyone to develop their own elements and incorporate them in XHTML documents, for use with XML-aware user agents.

Subsequently, HTML 4.01 was rewritten in an XML-compatible form, XHTML 1.0 (eXtensible HTML). The elements in each are identical, and in most cases valid XHTML 1.0 documents will be valid or nearly valid HTML 4.01 documents. This article mainly focuses on real HTML, unless noted otherwise; however, it remains applicable to XHTML.

Element status

Since the first version of HTML, several elements have become outmoded, and are deprecated in later standards, or do not appear at all, in which case they are invalid (and will be found invalid, and perhaps not displayed, by validating user agents).

At present, the status of elements is complicated by the existence of three types of HTML 4.01 / XHTML 1.0 DTD:

  • Transitional, which contain deprecated elements, but which were intended to provide a transitional period during which authors could update their practices;
  • Frameset, which are versions of the Transitional DTDs which also allow authors to write frameset documents;
  • Strict, which is the up-to date (as at 1999) form of HTML.

The first Standard (HTML 2.0) contained four deprecated elements, one of which was invalid in HTML 3.2.

All four are invalid in HTML 4.01 Transitional, which also deprecated a further ten elements. All of these, plus two others, are invalid in HTML 4.01 Strict.

While the frame elements are still current in the sense of being present in the Transitional and Frameset DTDs, there are no plans to preserve them in future standards, as their function has been largely replaced, and they are highly problematic for user accessibility.

(Strictly speaking, the most recent XHTML standard, XHTML 1.1 (2001), does not include frames at all; it is approximately equivalent to XHTML 1.0 Strict, but also includes the Ruby markup module.)

A common source of confusion is the loose use of deprecated to refer to both deprecated and invalid status, and to elements which are expected to be formally deprecated in future.

List of all HTML elements

Tag Description

<!–…–> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
Not supported in HTML5. Defines an acronym
<address> Defines contact information for the author/owner of a document
Not supported in HTML5. Deprecated in HTML 4.01. Defines an embedded applet
<area> Defines an area inside an image-map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Deprecated in HTML 4.01. Specifies a default colour, size, and font for all text in a document
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
Not supported in HTML5. Defines big text
<blockquote> Defines a section that is quoted from another source
<body> Defines the document’s body
<br> Defines a single line break
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption

Not supported in HTML5. Deprecated in HTML 4.01. Defines centred text

<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
<command> Defines a command button that a user can invoke
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description of an item in a definition list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Defines a definition term
<dialog> Defines a dialog box or window

Not supported in HTML5. Deprecated in HTML 4.01. Defines a directory list

<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a term (an item) in a definition list
<em> Defines emphasized text
Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
Not supported in HTML5. Deprecated in HTML 4.01. Defines font, colour, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
Not supported in HTML5. Defines a window (a frame) in a frameset
Not supported in HTML5. Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header> Defines a header for a document or section
<hgroup> Groups heading (<h1> to <h6>) elements
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<keygen> Defines a key-pair generator field (for forms)
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset>, < figure>, or <details> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<map> Defines a client-side image-map
<mark> Defines marked/highlighted text
<menu> Defines a list/menu of commands
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links

Not supported in HTML5. Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that do not support client-side scripts
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines pre-formatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
<source> Defines multiple media resources for media elements (<video> and <audio>)
<span> Defines a section in a document
Not supported in HTML5. Deprecated in HTML 4.01. Defines strike-through text
<strong> Defines important text
<style> Defines style information for a document
Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multi-line input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
Not supported in HTML5. Defines Teletype text
<u> Defines text that should be stylistically different from normal text
    Defines an unordered list
<var> Defines a variable
<video> Defines a video or movie
<wbr> Defines a possible line-break
Complete lists of Elements▶

Related articles

 

Advertisements

About Aoqy

Hye guys,i would like to share about me and hired me if you would to do project with me.Overall,i like everything about design.anything as long i could create for you very soon.I just hope that i could help many people about development about thier company.So on my site is all about guide and how to develop more easier way to let your project much easier.so find out more .Many thanks
This entry was posted in Freelancer Course and tagged , , , , , , , , . Bookmark the permalink.

24 Responses to Learn The Basic Of Html Elements

  1. Marcel says:

    I almost never create comments, but i did some searching and wound up here
    Learn The Basic Of Html Elements | 1stFreelancing.

    And I actually do have a few questions for you
    if you don’t mind. Is it simply me or does it appear like a few of the remarks look as if they are coming from brain dead visitors? 😛 And, if you are writing at additional sites, I would like to keep up with anything new you have to post. Would you list of all of your community pages like your linkedin profile, Facebook page or twitter feed?

    • Aoqy says:

      hye buddy,
      lol you,i’ve no idea about the brain spot.:)

      We suggest you “Liked” our new page on facebook at the sidebar,

      and do follow us subsribe your email and get our new post on your email.Everytime we post new article,all the post auto send to all social media.

      So,do keep in touch with us.

      Many Thanks

  2. Pingback: How You Work As A Freelance Web Designer | 1stFreelancing

  3. Your means of explaining the whole thing in this post is in fact nice,
    every one can effortlessly be aware of it, Thanks
    a lot.

  4. I was suggested this blog by means of my cousin. I’m no longer sure whether or not this publish is written through him as no one else understand such distinctive approximately my problem. You are amazing! Thanks!

  5. Tony says:

    This was very informative and insightful especially if one is new to coding with HTML5. Thank you for the post.

    • Aoqy says:

      howdy,sowry for the late reply,
      we were working on css e-books.

      i hope you enjoyed with the e-books

      keep in touch

      • Tony says:

        Totally understandable and no need for an apology. I will certainly keep in touch. Thank you for adding useful posts to your blog.

      • Aoqy says:

        Howdy,
        thanks for free your time here and give a supportive cooment.

        I’m very happy you liked.
        keep in touch ,i’ll post new article how to get started build your first small project for clients:)

        Many thanks

  6. Pingback: Learn The Basic Of Cascading Style Sheet (css) | 1stFreelancing

  7. Paragraph writing is also a fun, if you know after that you can write or else
    it is difficult to write.

  8. Hello all, here every person is sharing these knowledge,
    therefore it’s good to read this web site, and I used to pay a visit this website every day.

    • Aoqy says:

      hey buddy,
      thanks for free your time here.
      I hope you’ll learn more about news development.

      keep in touch with us.
      Tonight we’ll post our new article about how you will run small project with web design and activity teamwork for client’s

      Many Thanks

  9. Pingback: URL

  10. That is a great tip particularly to those fresh to
    the blogosphere. Simple but very accurate info… Thank you for sharing this
    one. A must read post!

    • Aoqy says:

      howdy,
      yes it’s.I was trying to give a simple information and easier to understand for all our recent reader and follower.

      keep in touch with us.

      Many Thanks

  11. Pingback: get backlinks

  12. Pingback: loose vagina

  13. Pingback: σπουδές κομμωτικής

  14. Pingback: how to bet on horse racing

  15. Pingback: precious metals ira

  16. Pingback: SEO Services London

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s