How to convert from HTML4 to HTML5

In this lesson, we will learn how to convert an HTML4 website to HTML5 without changing any original content or structure.

You can use the same if you want to convert XHTML to HTML5.

How to convert from HTML4 to HTML5 Picture 1

Normal HTML4 page



HTML4



TipsMake.com





    1. Home page

    1. Technology Village

    1. Science

    1. Life





News



7 best tablets for reading digital books


Below is a list of some of the best tablet computers to read books, magazines and documents, arranged according to each individual criteria so you have a better overview of this technology product!



The iPhone of some Apple ID locked users is unclear


IPhone users who say they are using a normal iPhone will suddenly receive a "Locked ID" message even though they are not using the account for unusual purposes.




© TipsMake.com - Knowledge-Experience-FAQ.




With the interface obtained:

How to convert from HTML4 to HTML5 Picture 2

DocType document conversion of HTML5

First, change the old DocType style to the new DocType of HTML5.

From:

 

To:

 

We still get the same results.

Change the new encoding

Next, from the old Encoding style:

 

New style of HTML5:

 

Add Shiv element to HTML5

Semantic elements in HTML5 are supported in all modern browsers.

In addition, you can "teach" older browsers how to handle new HTML5 elements.

However, Internet Explorer8 browser and previous versions do not allow adding unknown elements. Therefore, HTML5Shiv is a JavaScript solution that programmers use to add HTML5 to IE versions before version9.

You can take a closer look at HTML5Shiv here.

Add elements with CSS semantics in HTML5

CSS contains ids and classes to style elements

 body { 
font-family: Verdana, sans-serif;
font-size: 0.9em;
}

div # header, div # footer {
padding: 10px;
color: white;
background-color: purple;
}

div # content {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}

div.article {
margin: 5px;
padding: 10px;
background-color: white;
}

div # menu ul {
padding: 0;
}

div # menu ul li {
display: inline;
margin: 5px;
}

To HTML5 we replace with semantic elements

 body { 
font-family: Verdana, sans-serif;
font-size: 0.9em;
}

header, footer {
padding: 10px;
color: white;
background-color: purple;
}

section {
margin: 5px;
padding: 10px;
background-color: lightgrey;
}

article {
margin: 5px;
padding: 10px;
background-color: white;
}

nav ul {
padding: 0;
}

nav ul li {
display: inline;
margin: 5px;
}

Next, change old elements to semantic elements:

  1. Convert elements with id = 'header' and id = 'footer' to semantic elements and .
  2. Move element with id = 'menu' to semantic element
  3. Move an element with id = 'content' to a semantic element .
  4. Turning elements has class = 'post' to semantic elements .



TipsMake.com






News



7 best tablets for reading digital books

 

Below is a list of some of the best tablet computers to read books, magazines and documents, arranged according to each individual criteria so you have a better overview of this technology product!




The iPhone of some Apple ID locked users is unclear

 

IPhone users who say they are using a normal iPhone will suddenly receive a "Locked ID" message even though they are not using the account for unusual purposes.






© TipsMake.com - Knowledge-Experience-FAQ.




Finally you can remove the tags . They are no longer needed in HTML5.

The difference between and

Elements and

It is easy to be confused with each other and you are easily confused if you only read the concept of each element.

In HTML5 standard, and

is defined as follows:

  1. is a block of content related to each other.
  2. is a block consisting of complete content, a closed block.
  3. is a block consisting of multiple child tags inside.

So how do we clearly distinguish these elements?

Quite simply, depending on the content you want to show, use these elements flexibly.

In the above example we have used it outside .

But we can also use it for the same purpose.

Here are a few examples that demonstrate how to use flexible tags in each case:

in :



HTML5



TipsMake.com






Technology Story




Admire the Galaxy F concept with a beautiful folding screen

 

Concept Creator team relied on previous leaks to create a concept video of a device called Galaxy F, Samsung's folding screen smartphone.





Bitcoin prices slumped on the floor, the lowest in the year

 

Bitcoin prices fell to just under $ 6,000 after a few relatively stable months.





PortSmash - New vulnerability on multi-threaded CPU

 

Researchers think this is a serious error, but Intel does not.






© TipsMake.com - Knowledge-Experience-FAQ.





Results:

How to convert from HTML4 to HTML5 Picture 3

in :


HTML5



HTML5 Skeleton







Technology Story




Admire the Galaxy F concept with a beautiful folding screen


Concept Creator team relied on previous leaks to create a concept video of a device called Galaxy F, Samsung's folding screen smartphone.




PortSmash - New vulnerability on the CPU has been threaded


Researchers think this is a serious error, but Intel does not.




Bitcoin prices slumped on the floor, the lowest in the year


Bitcoin prices fell to just under $ 6,000 after a few relatively stable months.






© TipsMake.com - Knowledge-Experience-FAQ.





Results:

How to convert from HTML4 to HTML5 Picture 4

in and in:


HTML5



TipsMake.com








Technology Story

 

Bitcoin prices slumped on the floor, the lowest in the year


Bitcoin prices fell to just under $ 6,000 after a few relatively stable months.




PortSmash - New vulnerability on multi-threaded CPU


Researchers think this is a serious error, but Intel does not.





Technology Village

 

Windows 10 adds Light Theme, parallel to the Dark Theme


Windows 10 already has a dark theme, but now they are about to launch a bright theme.




Firefox launched two new utilities, Price Wise and Email Tabs


Mozilla has just launched two tests for the Test Pilot program on its Firefox browser.







© TipsMake.com - Knowledge-Experience-FAQ.





Result:

How to convert from HTML4 to HTML5 Picture 5

Previous article: Semantic Element in HTML5

Next lesson: Standard format and code coding convention in HTML5

4.1 ★ | 16 Vote

May be interested

  • HTML5 and CSS3HTML5 and CSS3
    basically, html pages are like skeletons - the basic framework - of a web page - while css files will specify how the elements of a page should be displayed.
  • How to convert PNG images to JPG does not degrade qualityHow to convert PNG images to JPG does not degrade quality
    if you want to convert images from png to jpg without worrying about poor image quality, you can refer to the article of how to convert png images to jpg without reducing the quality below of network administrator.
  • how to convert a JPG file to PDF with just one operationhow to convert a JPG file to PDF with just one operation
    convert jpg files to pdf quickly, users always need to convert jpg files to pdf with the purpose of creating a variety of presentation content, easier to share, reduce image size and especially have higher security.
  • Learn about Appear.inLearn about Appear.in
    appear.in is a sophisticated, intuitive and beautiful application, based on the google hangouts model. only html5. no flash. no plugins. no registration. there are no bullshit.
  • How to convert AI files to PNG, JPG without softwareHow to convert AI files to PNG, JPG without software
    converting ai files to png, jpg will make it more convenient for you to store and process images without the need for specialized software. the implementation through websites that support online conversion is quite simple and easy to do.
  • How to convert JPG images to PNGHow to convert JPG images to PNG
    to convert jpg to png, we have a lot of different ways to do it.
  • Semantic Element in HTML5Semantic Element in HTML5
    in html, each semantic element describes the structural significance of that element to browsers and developers / developers.
  • How to watch videos on the web after removing FlashHow to watch videos on the web after removing Flash
    mobile websites now do not need flash, instead web developers will provide html5 video for these devices. however, web browsers on computers are not supported for watching html5 videos. so how do you view the video after uninstalling flash on your computer? please refer to our method below
  • Simple way to convert Excel files to PDFSimple way to convert Excel files to PDF
    converting excel files to pdf will help create more professional documents, preventing the spreadsheet from being modified during the exchange process. so how to convert excel to pdf?
  • How to convert WAV format to MP3 using LAME with AudacityHow to convert WAV format to MP3 using LAME with Audacity
    audacity is a free audio editing software that has some impressive features and is easy to use. audacity is compatible with some operating systems like windows, mac and linux.