| HTML Element |
Study required elements and the classification of elements in an HTML document.
Required Elements for Every HTML Document
Please study the required elements in an HTML document, which are explained below.
Please make sure that you actually go through the whole process yourself, starting from inputting the text into the HTML file and saving it, followed by displaying it on the Web Browser and checking the format displayed on the screen. If it is difficult for you to understand the behavior, try to add two or more elements or increase the amount of content, then display the file again on the Web Browser until you have a complete understanding of it.
The following are the processes you are actually required to go through:
- Open "week06\ex1.html" on the Hidemaru editor.
- Taking the following sample as a reference, add/input the sample of the element being introduced to the document.
(Note) Please do not delete the sample element whose behavior you have checked; instead, leave it there. When you want to try a new element, additionally input it in the document. As a matter of course, if you made an input mistake or other mistakes, correct them and save the final corrected version.
- When you have finished adding the element, save the file and check the display on the Web Browser.
In the previous chapter we discussed some basic elements which constitute an HTML document. However, in fact there are a few more required minimum elements and attributes.
So, please take a look at the image below to see the required minimum constitution of HTML.
Please read through the explanation below regarding such items that have not been introduced so far.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- This is called a "Document Type Declaration" and is used to "declare" that "This document is written in accordance with HTML standards". You are required to write this at the very beginning of an HTML document. The content of the declaration varies from version to version of the HTML standards. However, in this course we use the declaration shown above.
- <html lang="ja">
- Usually a lang attribute is attached to the html element to specify the language to be used. In this course, as we make the HTML file in Japanese, please input as above.
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- The meta element is used to add a range of functions or information to those defined by the HTML standards. In the instance above, a character code is specified for the HTML document. For explanation of character codes, please refer to the next section.
Character Code for Japanese
Normally the 4 kinds of character codes listed below are used to represent Japanese language. The manner the charset attribute should be specified in the above-mentioned <meta> tag is shown in the brackets.
- ■ SHIFT-JIS
- This is a Japanese code usually used on a PC. (charset="shift_jis")
- ■ JIS
- This is a Japanese character code used for general purposes, including the Internet. (charset="iso-2022-jp:")
- ■ EUC
- This is a Japanese code normally used for UNIX family systems, including Linux and Solaris. (charset="euc-jp")
- ■ UTF-8
- This is a part of the code invented in Europe and the US to represent all the languages of the world in a uniform manner. It has been used on many occasions on PCs recently. (charset="utf-8")
For those files that are created on Windows XP, SHIFT-JIS is basically used.
In this course, unless otherwise mentioned, UTF-8 is used as a Japanese code; therefore, please use the <meta> tag shown in the previous section. (Note) As the default configuration of the Hidemaru editor is to save all the documents in SHIFT-JIS, please change it to UTF-8. (See 4.1 Configuration of the Editor for HTML File Creation, Chapter 4.)
Composition of HTML Elements
Additional explanation of "tag" and "element" in an HTML document is given below, as the general explanation in and prior to the previous chapter is not sufficient.
Basic composition of the element
In an HTML document, one meaningful block is represented as an "element" which is enclosed by a "start tag" and an "end tag" (See the image below).
If we visualize the "required minimum composition of an HTML document" given at the beginning of this chapter from the element point of view, it would be like the image shown below. As shown here, an HTML document is composed of nothing but a series of element blocks.
Block-level elements and Inline elements
Elements which comprise the main body (body element) of the HTML document can be broadly divided into two categories, block-level elements and inline elements.
- ■ Block-level elements
- These are elements which are independent blocks on their own and function as a building block to compose the whole document structure. On most Web Browsers, appropriate vertical space is inserted before and after a block-level element to clearly show that that is an independent block.
Relevant elements include headings (h1-h6 element), paragraphs (p element), tables (table element), and lists (ul, ol, and dl element).
Most block-level elements can contain inline elements, and some of them can also contain other block-level elements. - ■ Inline elemtns
- Meaning "a part of the line," these elements show the intention of the author and other meanings and include such elements as links (a element), images (img element), and emphasis (strong element).
Inline elements must be input in such a manner that they are contained within a block-level element. Therefore, it is not correct to make an inline element a direct child element(*) of a body element.(*) When a certain element contains another element, the element containing is called a "parent element" and the element contained is called a "child" element. In the image below, for example, "a element is the child element of p element".
[Typical example of the main body of an HTML document]