Like the other standard documents HTML5 also has a certain structure. Broadly speaking, the only HTML5 document structure of two parts, the head and body. But of course there are some other details that need attention as well.
Section begins with the day <head> head and closed with your partner, the </ head>. The body is flanked by <body> and </ body>. The head and back of the body has html tag and </ html> will be included. And do not forget, in the beginning there must be an HTML document declaration shall be as follows:
<! DOCTYPE html>
So complete HTML5 document structure look like Listing 1 Listing 1 is not intended to be run in a browser, it just shows HTML5 document structure alone.
Head of Section
HTML5 header is used to store a variety of information about the content of the document. At least the head should contain the title of the document. The title of this document is flanked by <title> and </ title> and will be displayed in the title bar of the browser.
Besides the title of the document can contain the following header:
• Metadata: contains a variety of additional data on HTML5 documents such as the author's name / author, date of publication, descriptions of document content, keywords, etc.. This information is expressed by tag <meta> alone, without closing </ meta>.
• Base URL: Specify the base location for the links that exist in the document. This information is <base> of day expressed alone, without closing </ base>.
• Link: you give a link to another Dokuman closely with HTML5 documents, such as CSS scripts used in web page design. This information is expressed by tag <link> alone, without closing tag </ link>.
• Object: contains information about objects that can exist in HTML5 document. Objects that can be contained in the document, including HTML5 video, audio and Flash animations. This information is expressed by <object> flanked by tag and </ object>.
• Script: contains information about the programming scripts, which may exist in HTML5 document. This script programming usually like client-side JavaScript. This information is expressed flanked by <script> by tag and </ script>.
• Style: contains information about the web page design in CSS written directly to the head, not in a separate document. If you want to be written on a separate document, use the link below. This information is expressed flanked by <style> by tag and </ style>.
The information presented in this top section are discussed along with the deepening of the discussion on this HTML5. Although this is more common only <title> alone.
Body parts
HTML5 body part is a part, will be decoded and displayed by the browser. In this section, a variety of day, that design HTML document. So you can imagine, there must be a lot of HTML tags that can be used in this section. Therefore PCplus gradually discuss the simplest first.
The first is a paragraph. A well-structured document must consist of a few paragraphs. <p> Separate from one paragraph to another paragraph tag used. This tag must end with a partner who </ p> is closed.
To simply the line without changing the paragraph, use <br> day. Since that day does not have a partner then written with <br />. Replace the line on HTML5 documents need to be marked, because even if the HTML code but do not replace the line of the browser is displayed on a separate line.
Provided some tags to give a certain display format of the text below: • <b> and </ b> to make the text appear in bold font. • <i> and </ i> to display text in italics. • <u> and </ u> to text displayed on the bottom line. • <font> and </ font>, the type of writing itself to determine. • <img /> to display the image. • <hr /> horizontal lines are displayed.
Well, it was enough for this issue. Now it is time to science, which was given to the form of the HTML5 document practice. Make HTML5 document shown in Listing 2 and save it with the name of the structure. html. When the browser is opened, the result is as shown in Figure 1.
t6-431-html-gb-01
HTML5 document in writing what the position of the variables is very remarkable not to overlap opening and closing tags. Here is a real example:
<b> <i> text </ i> </ b>
This is an example:
<b> <i> text </ b> </ i>
If you want to create an HTML document with structure, which is divided into chapter headings, section, subsection, and so on up to a depth of six levels, you can use the day to use <h6> <h1> (and their respective connected tags) to write the chapter headings. The letter h in the day stands for header.
An example is given in Listing 3 named header. html and the results are shown in Figure 2. Note that each level has a different header font size.
t6-431-html-gb-02
Listing 1 <! DOCTYPE html> <html> <head> The contents of the head ...... </ Head> <body> Content of the body ...... </ Body> </ Html>
Listing 2 <! DOCTYPE html> <html> <head> <title> HTML5 Document Structure </ title> </ Head> <body> I was <h1> HTML5 document </ h1> <p> This is the first paragraph in this document. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> <hr /> <p> This is the second paragraph. <br /> <b> It seems thick. </ B> <br /> <i> It seems wrong. </ I> <br /> <u> It underlined. </ U> <br /> It's the end of the second paragraph. </ P> </ Body>
Listing 3 <! DOCTYPE html> <html> <head> <title> HTML5 Document Structure </ title> </ Head> <body> <h1> Chapter Title </ h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> <br /> <h2> section title </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> <br /> <h3> Sub-Section Title </ h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> </ Body> </ Html>
Section begins with the day <head> head and closed with your partner, the </ head>. The body is flanked by <body> and </ body>. The head and back of the body has html tag and </ html> will be included. And do not forget, in the beginning there must be an HTML document declaration shall be as follows:
<! DOCTYPE html>
So complete HTML5 document structure look like Listing 1 Listing 1 is not intended to be run in a browser, it just shows HTML5 document structure alone.
Head of Section
HTML5 header is used to store a variety of information about the content of the document. At least the head should contain the title of the document. The title of this document is flanked by <title> and </ title> and will be displayed in the title bar of the browser.
Besides the title of the document can contain the following header:
• Metadata: contains a variety of additional data on HTML5 documents such as the author's name / author, date of publication, descriptions of document content, keywords, etc.. This information is expressed by tag <meta> alone, without closing </ meta>.
• Base URL: Specify the base location for the links that exist in the document. This information is <base> of day expressed alone, without closing </ base>.
• Link: you give a link to another Dokuman closely with HTML5 documents, such as CSS scripts used in web page design. This information is expressed by tag <link> alone, without closing tag </ link>.
• Object: contains information about objects that can exist in HTML5 document. Objects that can be contained in the document, including HTML5 video, audio and Flash animations. This information is expressed by <object> flanked by tag and </ object>.
• Script: contains information about the programming scripts, which may exist in HTML5 document. This script programming usually like client-side JavaScript. This information is expressed flanked by <script> by tag and </ script>.
• Style: contains information about the web page design in CSS written directly to the head, not in a separate document. If you want to be written on a separate document, use the link below. This information is expressed flanked by <style> by tag and </ style>.
The information presented in this top section are discussed along with the deepening of the discussion on this HTML5. Although this is more common only <title> alone.
Body parts
HTML5 body part is a part, will be decoded and displayed by the browser. In this section, a variety of day, that design HTML document. So you can imagine, there must be a lot of HTML tags that can be used in this section. Therefore PCplus gradually discuss the simplest first.
The first is a paragraph. A well-structured document must consist of a few paragraphs. <p> Separate from one paragraph to another paragraph tag used. This tag must end with a partner who </ p> is closed.
To simply the line without changing the paragraph, use <br> day. Since that day does not have a partner then written with <br />. Replace the line on HTML5 documents need to be marked, because even if the HTML code but do not replace the line of the browser is displayed on a separate line.
Provided some tags to give a certain display format of the text below: • <b> and </ b> to make the text appear in bold font. • <i> and </ i> to display text in italics. • <u> and </ u> to text displayed on the bottom line. • <font> and </ font>, the type of writing itself to determine. • <img /> to display the image. • <hr /> horizontal lines are displayed.
Well, it was enough for this issue. Now it is time to science, which was given to the form of the HTML5 document practice. Make HTML5 document shown in Listing 2 and save it with the name of the structure. html. When the browser is opened, the result is as shown in Figure 1.
t6-431-html-gb-01
HTML5 document in writing what the position of the variables is very remarkable not to overlap opening and closing tags. Here is a real example:
<b> <i> text </ i> </ b>
This is an example:
<b> <i> text </ b> </ i>
If you want to create an HTML document with structure, which is divided into chapter headings, section, subsection, and so on up to a depth of six levels, you can use the day to use <h6> <h1> (and their respective connected tags) to write the chapter headings. The letter h in the day stands for header.
An example is given in Listing 3 named header. html and the results are shown in Figure 2. Note that each level has a different header font size.
t6-431-html-gb-02
Listing 1 <! DOCTYPE html> <html> <head> The contents of the head ...... </ Head> <body> Content of the body ...... </ Body> </ Html>
Listing 2 <! DOCTYPE html> <html> <head> <title> HTML5 Document Structure </ title> </ Head> <body> I was <h1> HTML5 document </ h1> <p> This is the first paragraph in this document. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> <hr /> <p> This is the second paragraph. <br /> <b> It seems thick. </ B> <br /> <i> It seems wrong. </ I> <br /> <u> It underlined. </ U> <br /> It's the end of the second paragraph. </ P> </ Body>
Listing 3 <! DOCTYPE html> <html> <head> <title> HTML5 Document Structure </ title> </ Head> <body> <h1> Chapter Title </ h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> <br /> <h2> section title </ h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> <br /> <h3> Sub-Section Title </ h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla adipiscing, lectus a vulputate ultricies, nisl aliquam nisi Mauris et convallis id libero ligula mi. </ P> </ Body> </ Html>
