and should always contain and enclose a

heading, something like the following:

A heading, any level from h1 to h6

some content

A heading, any level from h1 to h6

some content

HTML5 Doctor gives the following helpful rules for using

:

•

Don’t use

as a target for styling or scripting; use a

for that.

•

Don’t use

, or

is more appropriate.

•

Don’t use

unless there is naturally a heading at the start of the section.

Check your page in http://gsnedders.html5.org/outliner/. If you see an “untitled section” notice

referring to a

, it means you omitted a heading for that

.

The

Element

An

is a stand-alone item, such as a self-contained piece of information that could be lifted

from the page and published in a forum, magazine, RSS feed, or newspaper. It should contain and

enclose a heading (h1 to h6) and it can contain two or more sections. The key words are STAND ALONE.

This is the essential characteristic of the

element. The www.whatwg.org specification states:

“Authors are encouraged to use the

element instead of the

element when it would

make sense to syndicate the contents of the element.”

A blog containing ongoing and interesting discussions on this topic is at

http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/

The controversy still simmers. Blogger/web developer Estelle Weyl of Standardista also speaks on

the subject at http://www.standardista.com/html5-section-v-article

Estelle uses the analogy of a newspaper containing sections such as sport, fashion, food, and so

forth. Each section contains articles that contain sections. The sections in a newspaper are “main

topics,” the articles are sub-topics. Each sub-topic is complete in itself which matches the W3C

definition of

. However, the analogy falls down if one web page deals with only one topic

(which is best practice). One topic (article) per web page makes a better user experience and it helps

search engines to index a page. To add to the confusion, it could be said that a section (such as sport) in

a newspaper is complete in itself and is, therefore, a large article which could be syndicated.

Although a page seems to work whether you have an article inside an article, a section inside an

article, or an article inside a section, Bruce Lawson’s model provides a useful guideline.

My own solution is to forget

and use

; after all, the two new tags

and

are for the benefit of browser vendors, blogs, and web sites that provide RSS feeds; they are

not particularly helpful for traditional web sites. Because

is unambiguous and clearly defined,

I sometimes use it in HTML5 pages together with the JavaScript hack for IE 7 and IE 8.

20

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

■ Note The

element is treated as display:inline;. In current browsers, this may change

eventually, but meanwhile set the

element to display:block;.

The

Tag

The

tag separates a piece of text from the main content. It can have a border and/or a

background color to make it stand out from the surrounding text. This means the

can contain an

interesting extract to tempt a user to read the main body of text. An

with a border is shown in

Figure 1-8.

Figure 1-8. The aside element can create a pull quote (shown inset with border).

Listing 1-8 provides the pull quote separated from the main body of text.

Listing 1-8. Demonstrating the Semantic

Tag (aside.html)

(The text has been abbreviated and an internal style is used to save space)

HTML5 exercise, an aside

Which browser should you design for?

The answer is all of them. If you survey a group of computer

aficionados you will get very different answers…Internet Explorer.

None had ever heard of Mozilla Firefox…a strong swing towards IE 9 from 2011.

The Tag

Highlighting certain words or phrases can be achieved either by formatting them or giving them a

colored background. In HTML5 you can use the tag; the effect is similar to using a highlighter pen

on printed text, as shown in Figure 1-9.

22

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

Figure 1-9. The mark tag can be used to highlight text.

■ Tip The tag could be used in conjunction with a search, perhaps by employing Stuart Langridge’s

searchhi script, which can be downloaded from http://www.kryogenix.org/code/browser/searchhi/

In Listing 1-9 for the tag, the markup uses the full word . Some manuals offer the

abbreviation , but because the abbreviated version does not behave itself in all browsers, it is better

to use the full word.

Listing 1-9. Creates Text With Certain Words Highlighed as Shown in Figure 1-9 (mark.html)

(The text in the listing has been abbreviated to save space and an internal style sheet is used.)

HTML5 exercise, mark

A demonstration of <mark>

Which browser should we design for?

The answer is all of them. If you survey a group of computer

aficionados you will get very different answers compared with the general public’s

answers. I worked as a freelance computer technician for over eleven years,

During that period I never came across a single person who was using a browser other

than Internet Explorer.

None had ever heard of Mozilla Firefox, although I did meet one person whose son had

put Firefox on his computer,

he wanted me to remove it because he did not know what it was.

The great majority of ordinary folk are using IE because it came

pre-installed with their computers. When reading magazine surveys, it would be

safer to increase their survey figures for Internet Explorer. The

results show that you should ensure that your web sites work in IE7

and IE8 because these are the most used (by default). It would be

safe to predict that there will be a strong swing towards IE 9 from

2011.

The

The river Coly — tag, this is the companion tag to the
tag. To save space an internal style sheet is

used in Listing 1-10.

Listing 1-10. The HTML Markup Using the
Tag That Links a Caption to an Element (figure.html)

Using the figure and caption tags

Fig 10 Using the HTML5 figure tag

25

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

The Tag

The tag is a container for two or more headings (h1, h2, h3 ,h4, h5, and h6). It

indicates that the headings are closely related, so it will be used to group together headings with

subheadings, titles, and subtitles. Prior to the release of the tag, grouping headings resulted in

problems with the outline of a document; this problem was called phantom nodes. Using

avoids this problem because it combines the two headings into one node. The tags can only

contain headings. The following is an example:

I put our holiday dates and address on a social network

An idiot’s tale

We returned to a ransacked house, even the furniture was taken.
Your friend,

Loopy Lou

This tag would most probably be used within the header, but it can also be used within any of one or

more

tags on the same page.

The New HTML5 Form Controls

The HTML5 recommendation for forms is almost complete. HTML5 forms are not straightforward

because other factors affect them. A hack-proof form needs a handler in PHP, ASP.NET, or Perl. The

handler must match the new HTML5 form tags. Accessibility will be compromised unless great care is

taken to integrate the new HTML5 form elements with the requirements of screen readers. For some

time, IE conditionals and alternative style sheets will have to be used so that surfers using IE 7 or IE 8 can

see and use HTML5 forms. At the time of writing, IE 9 does not support HTML5 forms. IE 10 will most

likely support the current forms as well as HTML5 forms.

Only Opera 9.5+ supports all the new form elements at the time of writing.

Mozilla Firefox 5+ supports most of the HTML5 form elements. Safari supports most of the form

elements except for autocomplete. Chrome supports all elements except autocomplete and list.

To see which browsers currently support forms, visit:http://www.w3schools.com/html5/html5_form_input_types.asp.

The new form input controls are backwardly compatible so that you can use the new input for fields

such as e-mail addresses. Browsers that don’t yet support will read it as if it was

.

■ Note Even though formatting checks are built into HTML5, robots and criminals can still enter dodgy URLs.

Therefore, you still need the protection of an anti-hack form handler for some fields.

26

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

The list of new HTML5 input controls includes the following:

date (such as date of birth)

email (e-mail address)

number (a number)

tel (a telephone number)

datetime

datetime-local

color

range

search

time

url

week

month

The first four input controls in the left-hand column will probably be the most useful. The url input

control in the right-hand column is positively dangerous because it will allow users to insert an address

linked to a nasty web site. I never include a field for URL. If the user wants me to access a URL because no

URL field is provided, they email me to request permission to send a URL; a robot can’t do that.

The HTML5 form controls also have the following new attributes:

autofocus

autofocus="autofocus"

required

required="required"

maxlength

maxlength="25"

Opera has a demo page that gives an indication of how the new inputs might eventually work. Open

the demo in Opera 9.5 or later and try it out at:http://devfiles.myopera.com/articles/4582/html5-forms-example.html.

The forms have a different appearance in different browsers, but they all function in the same way.

The appearance in Opera is shown in Figures 1-11, 1-12, and 1-13.

Figure 1-11. The Opera HTML5 form demo shows what happens after you click the submit button.

27

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

In this case, I did not fill out an essential field. As a result, that field is surrounded with a double red

border and a drop-down warning appears.

In Opera, required fields have a red border, as shown in Figure 1-12.

If the field is filled in correctly, a green border appears.

Figure 1-12. In this case, the e-mail address contained an illegal space.

Although not displayed in this Opera demo, other Opera demos show that in some fields a dropdown choice is presented when the field is clicked. Other fields have a color picker or a slider for a range

of values. Clicking a date field brings up a calendar to choose a date, as shown in Figure 1-13.

Figure 1-13. When the date-of-birth field is clicked, a calendar pops up, permitting the user to select the

date of birth.

As I stated at the start of this section, Opera has produced a demo page and some guidelines that

describe how the Opera browser applies the HTML5 form elements.

Listing 1-13 was taken from the Opera guide. It creates the interface shown in Figure 1-11 and will

produce the error messages and the drop down list shown in Figures 1-11 through 1-13.

Listing 1-13. Taken from the Opera Demo Page and Guide. In this case, only the main elements are listed

(new_form_features_in-html5.html).

HTML5 forms example

This is an example for the article

28

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

Title

Name

Phone number

(optional)

Email address

Your web site

(optional)

Nr. of items to order

required> (1-10)

Length

step="0.1">

1m

(in 10cm increments)

Delivery date

(minimum 16 December 2010)

Time of delivery

(in 30 min increments)

29

www.it-ebooks.info

CHAPTER 1 ■ MOVING TO HTML5

Color of the item

(default red)

Progress

25%

Disk usage

50.3 GB used out of 232.57 GB

193.44 GB used out of 232.57 GB

232.57 GB used out of 232.57 GB

(3 `meter` values)

Mobile Devices

The HTML5 form controls will improve the inputs for touchscreen mobile devices that have no proper

keypad. For instance, the date input control would pop up a calendar so that the user can select a date to

avoid the tedium of typing it in from the touchscreen. When the e-mail field is focused, an @ symbol will

be included in the touchscreen keyboard.

SVG Images

So many HTML5 manuals refer to SVG (scalable vector graphic) images that you could be forgiven for

thinking they are a new feature. They are not new, SVG images have been around since 1999, and they

are currently experiencing a revival in association with new browser releases. Also an

included in the list of new HTML5 elements. You can use it inline; previously, it was always a tricky addon—usually requiring a plug-in to display properly. Now it’s a native part of HTML5, therefore, I have

included SVG in this chapter to match other HTML5 resources. All the latest browsers support SVG

except IE 7 and IE 8.

SVG images can be compressed, and as their name suggests they can be scaled; they look equally

clear and sharp on a hand held device or when expanded to any size on a desktop screen. The images are

just drawings. They are constructed by drawing from point to point and no pixels are involved.

SVG files are entirely text. The following is the code for a colored square (mysvg.svg), as shown in

Figure 1-14.

xmlns=http://www.w3.org/2000/svg width="100px" height="100px">

30

www.it-ebooks.info

Tài liệu liên quan

843 practical HTML5 projects

Validating Accessible Data Tables: HTML4 and XHTML 1.0 Validation Errors and Solutions

 
Tài liệu mới
   

5 Đánh giá một số đặc điểm sinh trưởng lâm phần

   

Chương 5 KẾT LUẬN - TỒN TẠI – KIẾN NGHỊ

   

Chương 4 KẾT QUẢ NGHIÊN CỨU VÀ THẢO LUẬN

   

Chương 3 ĐIỀU KIỆN TỰ NHIÊN, KINH TẾ, XÃ HỘI KHU VỰC NGHIÊN CỨU

   

Chương 2 MỤC TIÊU, NỘI DUNG, PHƯƠNG PHÁP NGHIÊN CỨU

   

Chương 1 TỔNG QUAN VỀ VẤN ĐỀ NGHIÊN CỨU

   

8 LOẠI SƠN VÀ SỐ LƯỢNG LỚP SƠN

   

2 TIÊU CHUẨN VÀ QUY TẮC THI CÔNG

   

2 TIÊU CHUẨN VÀ QUY TẮC THI CÔNG

   

2 TIÊU CHUẨN VÀ QUY TẮC THI CÔNG

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

The <section> vs. <article> Controversy

843 practical HTML5 projects -0 (trang)

Tải bản đầy đủ ngay(0 tr)

9houz

The <section> vs. <article> Controversy

A heading, any level from h1 to h6

A heading, any level from h1 to h6

A heading, any level from h1 to h6

I put our holiday dates and address on a social network

An idiot’s tale

HTML5 forms example

Tài liệu bạn tìm kiếm đã sẵn sàng tải về