Html features and uses

HTML: HyperText Markup Language

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page’s appearance/presentation (CSS) or functionality/behavior (JavaScript).

«Hypertext» refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses «markup» to annotate text, images, and other content for display in a Web browser. HTML markup includes special «elements» such as , , , , , , , , , , , , , , , , , , , , , , , , and many others.

An HTML element is set off from other text in a document by «tags», which consist of the element name surrounded by » < " and " >«. The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the tag can be written as , , or in any other way. However, the convention and recommended practice is to write tags in lowercase.

The articles below can help you learn more about HTML.

Key resources

If you’re new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.

For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area.

In our extensive HTML reference section, you’ll find the details about every element and attribute in HTML.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Beginner’s tutorials

Our HTML Learning Area features multiple modules that teach HTML from the ground up — no previous knowledge required.

This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.

Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

Advanced topics

Reference

HTML consists of elements, each of which may be modified by some number of attributes. HTML documents are connected to each other with links.

Elements in HTML have attributes. These are additional values that configure the elements or adjust their behavior in various ways.

Global attributes may be specified on all HTML elements, even those not specified in the standard. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.

HTML elements are usually «inline-level» or «block-level» elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a «block box».

HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can’t be used in them. This is a guide to these categories.

Historical information on quirks mode and standards mode.

Related topics

This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

What are the Features of HTML?

HTML contains so many features that it took multiple RFCs (Request for Comments) to describe each one. We will go over some most common features of HTML that are useful in a `developer’s life.

1. Simple and user-friendly

• Tags are annotations that can be used to write HTML . Tags structure HTML and make it easier for people and browsers to read the content efficiently. They also allow a browser to add CSS (Cascading StyleSheets) to the digital document, resulting in a stunning visual combination.
• While HTML includes hundreds of tags, just a few of them are necessary for regular use by a developer. Of course, all tags are important; nevertheless, most are rarely used in normal development.

2. Semantic Structure

• This is one of the most awaited features of HTML. HTML5 includes several tags for annotating certain elements for their specialized uses. For example, the tag is used to annotate page content. The tag represents content that is indirectly related to the major content of the document.
• Other notable components are the , , , the paragraph tag

  , and the tag, which is most commonly used for page navigation.

3. SEO — Search Engine Optimisation

• SEO is by far the most important USP (Unique Selling Point) of HTML5. With the introduction of search engines such as Google, Yahoo!, DuckDuckGo, and others, you literally have a wealth of knowledge at your fingertips.
• These search engines collect information from the World Wide Web by crawling the internet with computer programs (also known as web crawlers ) and mapping keywords with respective documents in which they find it. These web crawlers can assimilate this data only because HTML is highly structured, and you can optimize your web pages for searchability.
• You may also employ the semantic structure of HTML for Search Engines by using tags such as , with description, , etc., to inform the web crawler about the relevant keywords in the article.

4. Local Storage & IndexedDB — Client-Side Data Storage

• HTML5 brings significant improvements in client-side storage capabilities. LocalStorage and sessionStorage are important technologies in allowing developers to save data on the client side. These are critical developments in browser storage capabilities because cookies limit data storage size on the client side.
• Cookies can be used to store small pieces of information, such as authentication tokens or usernames of the client. Still, when consumers return to the web application, the localStorage API comes into use. Avoid loading some basic information on the client, saving both client and server resources. A developer can use the sessionStorage API to persist information only for that session. This means that the data is erased as soon as the user closes the tab. This functionality is useful for browser-based games or high-security applications with limited session times.
• IndexedDB extends localStorage’s client-side storage capabilities. IndexedDB can store more complex and significant data in the key-value form, while localStorage might potentially store a large amount of data in a key-value form where both are strings.

5. Offline Capabilities (PWA) with Cache API & Service Workers

• Consider creating a web application that operates even when the user’s internet connection is down. You don’t have to imagine it because, with the introduction of Service Workers, IndexedDB, and Cache API, you might make it a reality. Your web application could provide your users with a native-like experience. Many applications, such as Flipkart, already do this, and it’s known as a PWA (Progressive Web Application).
• Service Workers serve as a way between the user’s computer and the internet. They can store files locally, retrieve them when needed using the Cache API, and bring information from the IndexedDB to offer data to the application on demand. When a user’s device is not connected to the internet, the Service Worker intercepts these requests and serves them from locally stored data. You can set up your service worker to update these files on a regular or ad-hoc basis.

6. Canvas for Game Development

One of the most significant features of HTML is that you can use HTML5 to create small games, but if you want to create a good video game, you can use the element along with CSS and JavaScript. Canvas allows you to create 2D and 3D games. You can make these games as interactive as you’d like.

7. Platform Independent

• HTML runs via a browser, which may be found on almost every device with a basic operating system. If you used mobile phones before smartphones, you’d know that even outdated Nokia phones running Symbian OS that could open HTML pages.
• The tag is particularly worth mentioning because it has revolutionized browser picture rendering. Captions can also be represented using the tag along with the tag.

8. Media Support

HTML can display images, videos, and audio. Hence it has good media-playback capabilities. HTML5 introduced and tags, making this much easier than before. Of course, HTML5 allows you to do more than just play media; you can provide controls, graphics for buttons, and even control playback programmatically.

What is HTML Used For?

HTML stands for HyperText Markup Language, and it is used to create web pages and web applications. Let’s define Hypertext Markup Language (HTML) and a Web page.

• HyperText: HyperText is an abbreviation for «Text inside Text.» A hypertext is text that contains a hyperlink. You have utilized hypertext when you click on a link that leads you to a new webpage. HyperText is a technique for linking two or more web pages (HTML documents) together.
• Markup language: A markup language is a computer language used to apply style and formatting principles to text documents. Markup language enhances the interactive and dynamic nature of the text. It can convert text into graphics , tables, links, etc.
• Web Page: A web page is a document that is typically written in HTML and translated by a web browser. An URL is used to locate a web page. A web page can be of two types, i.e., static or dynamic . Static web pages can be created entirely using HTML.

As a result, HTML is a markup language that is used to generate attractive web pages with the help of styling that appears in a nice format on a web browser. An HTML document is made up of several HTML tags, each with its own set of content.

Syntax of the HTML tag:

A simple example of HTML

Example: In this example, we will create a web page that will be based entirely on HTML and CSS. The page structure is provided by HTML, while the visual and aural layout is provided by CSS for a variety of devices. HTML and CSS are the building blocks for creating Web pages and Web Applications.

Output of the above code:

Learn more

Conclusion

• HTML is a markup language that simply communicates the structure of a digital document to the browser, which may then visually portray that structure. New features of HTML have entirely transformed the gadget industry, particularly smart devices such as phones and televisions.
• HTML is useful for more than just making web pages and blogs and accessing the internet. HTML can be used to create large enterprises and highly interactive websites. There are some well-known games that solely use HTML Canvas !
• HTML is a fairly straightforward language to learn. Learning HTML has a good return on investment. It is appropriate for creating websites , sharing digital documents, and doing a variety of other activities on the Internet.
• By introducing features of HTML, we can not only construct better static websites, but we can also create dynamic websites by integrating them with JavaScript.

Источник