HTML5 Basics, Part 1: Getting Started

HTML5 is a language designed to organize web content. Its purpose is to make web design and development easier by creating a standard and intuitive UI markup language. HTML5 provides various means of cutting and dividing pages, which allows you to create cutting components that can not only be used to logically organize the site, but also give the site the ability to aggregate. HTML5 can be described as "a mapping method from information to website design" because it embodies the essence of information mapping, divides information, and tags information to make it easy to use and understand. This is the basis for the expressive semantics and practical aesthetics of HTML5, which gives designers and developers the ability to publish a variety of content at all levels, from simple text content to rich, interactive All multimedia is included.

HTML5 provides efficient data management, drawing, video and audio tools, which facilitates the development of cross-browser applications on the web and portable devices. HTML5 is one of the technologies driving the development of mobile cloud computing services because it allows greater flexibility and supports the development of very exciting interactive websites. It also introduces new tags and enhanced features, including an elegant structure, form controls, APIs, multimedia, database support and significantly improved processing speeds.

The new tags in HTML5 are highly evocative, and the tags encapsulate their functions and usage. Past versions of HTML used more non-descriptive tags. However, HTML5 has highly descriptive and intuitive tags, which provide a rich set of content tags that can instantly identify the content. For example, the frequently used tag has been supplemented by two additional tags: and . The addition of

tags also provide more precise descriptions of specific types of content.

HTML5 provides:

1. Tags that describe exactly what they are intended to contain
2. Enhanced network communication
3. Vastly improved common storage
4. Web Workers that run background processes
5 . WebSocket interface to establish a persistent connection between local applications and servers
6. Better way to retrieve stored data
7. Speedy page saving and loading
8. Support for using CSS3 to manage GUI, which means HTML5 can be content-oriented
9. Improved browser form handling
10. SQL-based database API which allows local storage on the client side
11. Canvas and Video to add graphics without installing third-party plugins and video
12. Geolocation API specification, which uses smartphone location capabilities to incorporate mobile cloud services and applications
13. Enhanced forms that reduce the need to download javaScript code, allowing for mobile devices and cloud services more efficient communication.

HTML5 creates a more engaging experience for users: Pages designed using HTML5 can provide an experience similar to desktop applications. HTML5 also provides enhanced multi-platform development by integrating API functionality with ubiquitous browsers. By using HTML5, developers can deliver a modern application experience that flows smoothly across platforms.

When you say the word HTML5, you use a short word to express a continuous innovation. New markup, a new set of methodologies, and a common development framework based on the interplay between HTML5 and its two complementary colleagues: CSS3 and Javascript, a client-centric approach to the phenomenon The core of the application. In addition to the many desktop deployments of HTML5 technology techniques and methods, HTML5 can also be implemented in feature-rich web mobile phone browsers - a growing market for Apple iPhones, Google Android and Android devices running Palm webOS The ubiquity of mobile phones is a testament to this.

A very important aspect of the powerful features of HTML5 is information mapping - or content blocking. If you will - this approach results in a much easier to understand process. You can see how efficient this tool has become in terms of design and development by increasing control over this area of ​​web processing.

HTML5 heralds the emergence of more efficient semantic processing at the text level and more powerful control over form construction and usage. All of these features and many other subtleties of HTML5 innovation are the foundation of this increasingly dominant paradigm. Many institutional entities, commercial and other - even many organizations that do not regard the processing and communication of information as their main institutional activities at all - are affected to varying degrees by the development of this growing phenomenon.

HTML5 is not a magic lamp and no genie will appear. However, its technical and methodological assets make it the next best thing to polishing a magic lamp.

Planning Page

You are going to create a simple web page. Along the way, I'll discuss several of the new tags introduced in HTML5. In order to create an efficient and effective web page, you must make a plan and consider all the components you want to build. The web page you create will have a high-level design as shown in Figure 1. The page design includes a Header area, a Navigation area, an Article area including three Section areas and an Aside area, and finally a Footer area. The page is designed to work in Google's Chrome browser, which eliminates some of the visual clutter that creates browser compatibility issues while also hindering understanding of the underlying structure. Our goal was to create a page that clearly describes the usage of the new HTML5 tags, showing how to use them to create well-formatted code and elegant page design.

Figure 1. Acme United’s web page plan

In the process of creating this page, I will involve CSS3, which I need to use to correctly render the HTML5 web page. CSS3 is essential to the style, navigation, and general look and feel of HTML5 pages, and its set of properties, which you can find on WsSchool's CSS3 reference site (see Resources section), include some Very useful elements, such as background, font, marquee, animation, etc.

However, before you start constructing pages, you need to learn some new HTML5 tags.

Header area

The example of the Header area contains the page title and subtitle. The

tag is used to create the content of the Header area of ​​the page. In addition to the page itself, the tag can contain public information about and . The web page created here has a Header area for the page, which is given in the high-level design, and a Header area located inside the Article and Section areas. Listing 1 provides an example of a

tag tag.

List 1. Example of tag

Title text
Text or image can be placed here
< ; p> Logo is also usually placed here

tag can also contain an tag, as shown in Listing 2. The tag groups headings together, using heading hierarchies through to display main headings and subheadings here.

Listing 2. Example of tag

main header
subheader

Text or images can be placed here

Navigation area

You can use the

tag to create the Navigation area of ​​the page. The

element defines an area specifically for navigation. The

tag should be used for navigation of the main site, not for placing links contained in other areas of the page. The Navigation area can contain code such as the one shown in Listing 3.

List 3. Example of tag

Home
About Us
Our PRoducts
Contact Us

Article and Section area

The page you designed contains an Article area, which stores the actual content of the page. You create this area using the

tag, which defines content that can be used independently of other content on the page. For example, if you want to create an RSS feed, you can use

to uniquely identify the content. The

tag identifies content that can be removed, placed in another context, and fully understood.

The Article area in Acme United's planning contains three Section areas. You can use the tag to create these areas. The contains the relevant component area of ​​​​the web content. The tag - and the tag - can contain headers, footers, or other components needed to complete the content of this section. The tag is used to group content. The tag and tag usually start with a and end with a , and the content of the tag is placed between the two. between.

tags can also contain

tags, just like

tags can contain

tags. The tag should be used to group similar information, while the tag should be used to place information such as an article or blog that can be used without affecting the meaning of the content. Removed or placed in a new context. The

tag, as its name implies, provides a complete package of information. In contrast, the tag contains related information, but the information itself cannot be placed in a different context because the meaning would be lost.

See Listing 4 for usage examples of

and

tags.

Listing 4. Examples of

tags and

tags

Content

Content




Content


Content
and tags, as well as the and tags, can contain the tag, which you use to include images, charts, and photos.

tag can contain , which accordingly contains the title of the figure contained in the tag, which allows you to enter a description to more closely associate the figure with the content. Listing 5 provides an example of the

and

tag structure.

Listing 5. Examples of

and

tags

Caption for the figure

Media elements

and

tags can also contain various Media elements, HTML5 provides tags that instantly convey the meaning of their content. Media elements, such as music and videos, which previously could only be embedded, can now be more accurately identified.