HTML elements are a set of instructions that describe the structure and content of a Web page. These instructions are applied to the content of a Web page through the use of tags. HTML elements can be either container or empty elements. A container element contains the data that is intended to be affected by that element. It consists of opening and closing “tags.” You will examine empty elements in a later topic.
HTML container elements consist of two tags. The opening tag marks the beginning of the element and the closing tag marks the end of the element. Anything between these tags is affected by the element.
The following table includes a description of HTML global structure elements and their proper tags:
Identifies the file as an HTML file. This is the highest-level set of tags and, therefore, it contains all the other HTML tags of a Web page.
Opening Tag <html> </html> Closing Tag
Identifies the portion of the file that contains the head elements of the Web page. Most of the content contained in the head section simply describes various aspects of the page and isn’t actual text or graphics that are displayed on the Web page.
Opening Tag <head> </head> Closing Tag
Identifies the portion of the file that is the body of the Web page. This is where you enter the text and graphics that are displayed when your page is viewed in a browser.
Opening Tag <body> </body> Closing Tag
Container Element Syntax Rules
The syntax for HTML container tags is wonderfully simple. The following list
describes the rules for HTML container elements:
– Consist of both an opening and closing tag.
– An opening tag consists of the tag name enclosed within less-than (<) and greater-than (>) brackets (for example: <body>).
– A closing tag also consists of the tag name enclosed in less-than and greater-than brackets, but the less-than bracket of a closing tag is always succeeded with a forward-slash (/) (for example: </body>).
– The content that is intended to be affected is contained within these tags (for example: <body>Text content.</body>). The opening tag alerts the
browser to treat the content that follows according to the rules of the tag name, and then the closing tag tells the browser that the application of those rules is finished.
HTML tags are case-independent, meaning that they may be entered in either upper- or lower case (for example: <body></body> is just as valid as <BODY></BODY>).
Some HTML coders prefer to enter all of their tags in upper case so that they stand out a bit more from the rest of the page content. Other developers feel that it is simpler to enter HTML code in lower case; saving them from repeatedly pressing [Shift].
The HTML tags in this course are presented in lower case, although you have the option to enter them in caps.
Create a Global Structure
To enter the global structure of an HTML document:
1. In a blank document open in your text editor, enter the <html></html> container tags.
2. Place the insertion point between the opening and closing tags and press [Enter] until there are one or two empty lines between the tags.
3. On the empty line below the opening <html> tag, type <head>, press [Enter] a few times and then type </head>. You should have a couple of empty lines between the <head></head> tags. You will enter elements in this section later in the course.
4. Place the insertion point on the line below the </head> tag.
5. Type <body>, press [Enter] a few times, and type </body>. Again, you will be entering elements on these blank lines later in the course.
6. Save the file using either the .htm or .html file extension.
HTML File Names
In order for your files to be recognized as Web pages, you need to use your text editor to save them with either the .htm or .html file extensions. Once you have saved the files with one of these extensions, you can open them and view them in any browser.
If you intend for a file that you are creating to be the home page (main page) of the site, then there are also considerations to be made. Most Web servers are set up to automatically accept either index.html (or index.htm) or default.html (or default.htm) as the file that will be used as the site’s home page. That means that this will be the first file that a user sees when they go to your main Web address. Some companies that host Web sites will require you to name your site’s home page using one of these two file names, while others will let you create your own home page file name.
- HTML basics (santhoshkumar533.wordpress.com)
- Using HTML5 semantic elements today (nczonline.net)
- History of XHTML (brighthub.com)
- Meta Tag Demystified (socialmediaobserver.wordpress.com)
- A Minimal HTML Document (blogs.sitepoint.com)
- Guide to HTML: Editing HTML, Tags and XHTML (linearfix.wordpress.com)
- Is Using Lots of div Tags Really That Bad? (blogs.sitepoint.com)
- The Next War: XHTML 2.0 vs HTML 5 (xemion.com)
- object tag: embed content in valid strict HTML (joliclic.free.fr)
- HTML5 Elements For SEO Benefit (dailyseotip.com)