In the previous post, we learned about using header.php and footer.php file to fetch and display header and footer on all site pages.
We basically achieved the following structure:

This can be made better by moving our HTML code from index.php to header and footer files, such that index.php only loads the content.
Here’s what needs to be done:

We move our HTML code till the beginning of the <body> tag to header.php and everything else from </body> to footer.php. We continue to fetch header and footer files to index (or any other page) via the getter functions like get_header and get_footer.
Now we don’t need to duplicate that piece of HTML on every page. Instead, we can focus on writing code that is specific to the page we’re working on (e.g. index.php, single.php, page.php, etc).