登录查看更多内容

全部
HTML

How can you transition from HTML to HTML5?

由人工智能和领英社区提供技术支持

HTML is the language of the web, but it has evolved over time to meet the needs and expectations of users, developers, and browsers. HTML5 is the latest version of HTML, and it introduces new features, elements, and standards that make web development easier, more accessible, and more interactive. If you are familiar with HTML, you might wonder how you can transition from HTML to HTML5 and take advantage of its benefits. In this article, we will cover some of the main differences between HTML and HTML5, and how you can update your code and skills accordingly.

此文章中的业界达人

由社区从 14 条内容中精选。了解更多

MUHAMMAD SHAHAB MALIK

Software Engineer | xFrontend Intern @MRS Technologies | xWeb Dev Lead @GDSC-UETT | Frontend Web Developer | xSenior…
Ali Samir

Frontend Engineer @Taager | Software Engineer | Full Stack Developer | React Native Developer

1 Doctype and syntax

One of the first things you will notice when you switch from HTML to HTML5 is the simplified doctype declaration. Instead of using a long and complex string that specifies the document type definition (DTD), you can simply use <!DOCTYPE html> at the beginning of your document. This tells the browser that your document is written in HTML5 and that it should follow the HTML5 rules and standards. Another syntax change is that you can omit the closing slash for self-closing elements, such as <img> , <br> , and <input> . This makes your code cleaner and more consistent.

添加您的观点

Ali Samir

Frontend Engineer @Taager | Software Engineer | Full Stack Developer | React Native Developer
举报内容
Transitioning from HTML to HTML5 Making the leap from HTML to HTML5? Here's a streamlined guide: - Doctype: Start with <!DOCTYPE HTML>. - Encoding: Use <meta charset="UTF-8">. - Semantics: Replace <div> tags with new elements like <header>, <footer>, and <section>. - Media: Embed with <audio> and <video> tags. - Graphics: Use <canvas> for dynamic visuals and SVG for vectors. - Forms: Leverage enhanced controls: email, date, and placeholder. - Remove Old: Drop deprecated tags like <center> and <font>. - CSS3: Combine with HTML5 for gradients and animations. - Test: Check compatibility across browsers and use HTML5 validators. Embrace HTML5 for a future-proof and richer web presence.

已翻译

赞
Yogesh C.
举报内容
The simplified doctype is part of HTML5’s efforts to be more forgiving of syntax errors, which helps ensure that web pages still work even if they have minor coding mistakes. While the closing slash is optional in HTML5, it is required in XHTML. Therefore, if you’re writing XHTML or want your code to be compatible with it, you should include the closing slash.

已翻译

赞
MUHAMMAD SHAHAB MALIK

Software Engineer | xFrontend Intern @MRS Technologies | xWeb Dev Lead @GDSC-UETT | Frontend Web Developer | xSenior Executive Member @ Softdesk UET Taxila
举报内容
The <!DOCTYPE> declaration and syntax are fundamental aspects of HTML, and they play a crucial role in defining the document type and structure of a web page. The <!DOCTYPE> declaration, also known as a document type declaration, specifies the version of HTML that a web page follows. It informs the web browser how to interpret and render the content of the page. In the context of transitioning from HTML to HTML5, it's essential to update your <!DOCTYPE> declaration to the HTML5 standard.

已翻译

赞
Jak Clark

Designer, Developer, Disruptor | ?? Elevating global eCommerce brands ??
举报内容
Who writes these questions? It's just a new specification. Little has changed and it was released over 15 years ago... really?

已翻译

赞

加载更多内容

2 Semantic elements

HTML5 introduces a number of new elements that have semantic meaning, which means that they describe the content and structure of your document more clearly and logically. For example, instead of using generic <div> and <span> elements for every section and element of your page, you can use elements like <header> , <footer> , <nav> , <article> , <section> , <aside> , and <figure> . These elements not only make your code more readable and maintainable, but also improve the accessibility and SEO of your page, as they help screen readers and search engines understand the purpose and hierarchy of your content.

添加您的观点

MUHAMMAD SHAHAB MALIK

Software Engineer | xFrontend Intern @MRS Technologies | xWeb Dev Lead @GDSC-UETT | Frontend Web Developer | xSenior Executive Member @ Softdesk UET Taxila
举报内容
Semantic elements in HTML play a crucial role in structuring a web page by providing meaning and context to the content. These elements help both developers and browsers understand the purpose and significance of the content within a page. <header>: The <header> element typically contains introductory content for a section or a page. <nav>: The <nav> element is used to define a navigation menu, such as a site's main menu, links to other pages, or other navigation elements. <main>: The <main> element represents the primary content of a document. There should be only one <main> element per page, and it excludes content like headers and footers.

已翻译

赞

3 Media and graphics

HTML5 also offers new ways to embed and manipulate media and graphics on your web pages, without relying on external plugins or libraries. For example, you can use the <video> and <audio> elements to add video and audio content to your page, and control their playback, volume, subtitles, and other attributes with HTML5 attributes and JavaScript APIs. You can also use the <canvas> element to draw and animate graphics on your page, using JavaScript to create shapes, colors, gradients, transformations, and other effects. Additionally, you can use the <svg> element to display scalable vector graphics (SVG) on your page, which are resolution-independent and can be styled and animated with CSS and JavaScript.

添加您的观点

MUHAMMAD SHAHAB MALIK

Software Engineer | xFrontend Intern @MRS Technologies | xWeb Dev Lead @GDSC-UETT | Frontend Web Developer | xSenior Executive Member @ Softdesk UET Taxila
举报内容
Media and graphics are essential components of web design and content, and HTML5 provides various elements and attributes to effectively integrate and display them on web pages. 1. Images: HTML5 offers the <img> element for embedding images. You can specify the image source using the src attribute and provide alternative text with the alt attribute for accessibility. 2. Audio: HTML5 provides the <audio> element for embedding audio content. You can include various audio formats (e.g., MP3, Ogg, WAV) within the <audio> element 3. Video: HTML5 introduces the <video> element for embedding video content. Like <audio>, you can include multiple video formats using the <source> element to ensure compatibility with various browsers.

已翻译

赞
Yogesh C.
举报内容
The use of <video>, <audio>, <canvas> and <svg> elements allows for more interactive and dynamic web pages. They also reduce the reliance on third-party plugins which can improve page load speed and overall performance. These features of HTML5 have been widely adopted due to their ease of use, flexibility, and the enhanced user experience they provide.

已翻译

赞

4 Forms and inputs

HTML5 also enhances the functionality and usability of forms and inputs on your web pages, by adding new input types, attributes, and elements that make data validation, submission, and feedback easier and more user-friendly. For example, you can use input types like email , url , number , date , range , and color to specify the expected format and value of your input fields, and let the browser handle the validation and error messages. You can also use attributes like placeholder , required , pattern , min , max , and step to provide additional guidance and constraints for your input fields. Moreover, you can use elements like <datalist> , <output> , and <progress> to create dynamic and interactive forms that display suggestions, results, and progress indicators for your input fields.

添加您的观点

MUHAMMAD SHAHAB MALIK

Software Engineer | xFrontend Intern @MRS Technologies | xWeb Dev Lead @GDSC-UETT | Frontend Web Developer | xSenior Executive Member @ Softdesk UET Taxila
举报内容
HTML5 introduced several enhancements and new elements for creating forms and collecting user input. 1. Form Element (<form>): The <form> element is used to create a container for input fields and form controls. It provides a structure for gathering and submitting user data. 2. New Input Types: HTML5 introduced various new input types to make it easier for users to provide specific types of data and for browsers to handle input validation. 3. Placeholder Attribute: The placeholder attribute allows you to provide a hint or example value for an input field. 4. Required Attribute: The required attribute specifies that a form field must be filled in before the form can be submitted.

已翻译

赞
Seth B
举报内容
Is this question a joke? "html5" is a decades-old word at this point, and we stopped having numbered-versions of it because that was a silly idea in the first place. Modern html changes constantly; you don't transition _from_ html, you transition _to_ it (unless you're building email content, in which case you get to continue to enjoy html4 forever, but you use end-to-end testing to make sure goofy old email clients show it properly).

已翻译

赞
Sambhu Dayal Bahuleyan

Fullstack Engineer / Stamp 4 Visa holder / PHP fullstack / TypeScript / React / Angular / Vue / Laravel / Inertia.js / MySQL / PostgreSQL / Docker / Linux / Git / Wix / Shopify / Webflow / Artist / Limerick / Ireland
举报内容
HTML5 geolocation detects latitude and longitude coordinates by using the device's GPS (if available on the device) or the device's mobile/WIFI signal (if GPS?is not available. The mobile/WIFI signals are triangulated to work out the latitude and longitude.

已翻译

赞
Rodrigo Cantero

Fullstack Developer | Microservices | Serverless | NodeJS
举报内容
The biggest improvement is the `pattern` attribute. If a field needs extra validation, you can leverage or layer it straight in the browser. Because pattern accepts a regex, you can validate anything and everything which is also dangerous so test extensively.

已翻译

赞

5 Offline and storage

HTML5 also enables you to create web applications that can work offline and store data locally on the user's device, using various APIs and technologies that enhance the performance and reliability of your web applications. For example, you can use the Application Cache API to specify which files and resources your web application needs to cache and load offline, and how to handle updates and errors. You can also use the Web Storage API to store key-value pairs of data on the user's browser, using either sessionStorage or localStorage, depending on whether you want the data to persist across sessions or not. Furthermore, you can use the IndexedDB API to create and query a database of structured data on the user's browser, using transactions, indexes, cursors, and events.

添加您的观点

6 Geolocation and communication

HTML5 also allows you to access the user's location and communicate with other web pages and servers in real time, using various APIs and technologies that enhance the interactivity and functionality of your web applications. For example, you can use the Geolocation API to get the user's latitude and longitude, and display them on a map or use them for other purposes, such as finding nearby places or directions. You can also use the Web Sockets API to create a bidirectional and persistent connection between your web page and a server, and exchange data in real time, without the overhead of HTTP requests and responses. Additionally, you can use the Web Workers API to create and run background tasks on your web page, without blocking the main thread or the user interface.

添加您的观点

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Rohit Sahu

Sr. Full stack Engineer @ Browserstack
举报内容
In addition, using the right semantic elements means your page is search engine friendly, and who doesn't want good SEO rankings.

已翻译

赞

加载更多内容

HTML

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you transition from HTML to HTML5?

1

2

3

4

5

6

7

1 Doctype and syntax

2 Semantic elements

3 Media and graphics

4 Forms and inputs

5 Offline and storage

6 Geolocation and communication

7 Here’s what else to consider

HTML

给文章评分

感谢您的反馈

更多HTML相关文章

更多相关阅读内容