Six tips to set up a better HTML document

My first attempt on learning HTML was by myself, through The Odin Project. It was really nice! Great readings, helpful tutorials, and fun projects. My first website was a clone from Google’s homepage, and I got very excited. After about two months of learning front-end languages, I rebuilt this first project and thought that I was already an HTML expert. I couldn’t be more wrong!
To consolidate myself as a software developer, I applied to Microverse. One day on the full-time program was enough to realize that what I knew was only the tip of the iceberg. Turns out that using a lot of div’s, paragraphs and h1’s isn’t enough to build a good web page. This wasn’t clear to me before.

Therefore, I decided to create this list to help HTML beginners like I was a few months ago to learn the basic steps for setting up a good HTML document.

1. Know the correct naming of what you are writing: in HTML, there is a specific term for each component. It might not seem so important when you are writing alone, but knowing the correct name for each thing will help you. Some of the benefits are better Google searches, improved communication with other developers, and a much more professional appearance.

Many times I had difficulty communicating with my coding partner on Microverse because I did not remember the right naming of things. Shame on me!

Here are some basic HTML terms:

– Element: an HTML element is formed by the opening tag, the content, and the closing tag. There are several types of elements, such as paragraphs, div’s, and headings. I will explain more about them later.

– Tags: an opening tag marks the beginning of the element, and consists of a less than sign (<), followed by the element’s name, and a greater than sign (>). The closing tag indicates the end of the HTML element. It has the same formation as the opening tag but has a forward slash (/) before the element’s name.

– Attributes: an attribute is a content added to the opening tag of an element and it has many uses, from providing information to changing styles. It is formed by the attribute’s name and its value. Commonly used attributes are id’s and classes.

2. Don’t forget the declaration: it should always be the first line on every HTML document. This isn’t a tag, but an instruction to the web browser about what type of document to expect, and the version of HTML the page is written in. Forgetting it may cause weird rendering of your page. The simplest and most reliable doctype declaration to use is the one defined in HTML5: .

Also, never forget to save your file with a .html extension so your OS would recognize it as an HTML document.

3. The HTML tag: although the doctype declaration informs the web browser what language your document is written in, it does not actually add any HTML structure or content. This is done by the element, which should be the second thing in your document. Every other elements from the web page should be between the opening () and closing () HTML tags.

According to the W3C (World Wide Web Consortium), you should declare the primary language for each web page. It assists search engines and browser, and it is done by using the lang attribute inside the opening tag, like this: .

4. Inside the : the element is located right after the opening tag. It contains information that is not displayed directly on the web page, the metadata. It is information about the page itself, such as the document title (displayed on the title bar in the browser window), and links to external files, such as the CSS style sheet. The following tags describe metadata: , </p> <style>, <meta>, <link>, <script>, and <base>.</p> <p>One important <meta> tag is the charset: <meta charset= “UTF-8”>. It is used to inform the web browser what character set is used on the document. UTF-8 (Unicode) covers almost all of the characters and symbols in the world.</p> <p>Another important <meta> tag that was introduced in HTML5 is the viewport: <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>. The viewport is the user’s visible area of a web page, and it varies with the device. The <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling. It sure will help you to make your web page responsive.</p> <p><strong>5. Below the head comes the body:</strong> one more thing you should never forget. As the name said, it defines the document’s body. All the content that will appear on your web page should be inside the <body> element. Simple as that!</p> <p>And finally…</p> <p><strong>6. Use HTML semantics:</strong> so this was one of the things that I took some time to learn. Not because is hard (it’s really basic!), but because I simply didn’t really know that it existed until my first Microverse project.</p> <p>This is basically using the many existing HTML elements in a meaningful way. As I said before, in my first projects I used mostly the same elements, such as div’s, which is a non-semantic element, because it doesn’t say anything about its content. A semantic element clearly describes its meaning to both the browser and the developer: </p> <header>, </p> <article>, </p> <table>.</p> <p>Benefits of using semantic HTML are:</p> <p><strong>- Easy to understand:</strong> using elements with a clear meaning makes the website’s source code easier to read for other web developers (or for the future you).</p> <p><strong>- Accessibility:</strong> semantic elements makes the web pages accessible for mobile devices, as well as for people with disabilities. This is because screen readers and browsers are better able to understand the code when it is written with semantic HTML.</p> <p>- <strong>It improves your website SEO:</strong> Search Engine Optimization (SEO) is a methodology of strategies, techniques, and tactics used to increase the number of visitors to a website. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.</p> <p>An example of a starter HTML template:</p> <div class="image-container"></div> <p>That’s it! Understand these basic concepts helped me to have a fast start setting up my HTML documents, and most importantly, to not forget any of the important elements. I hope that these tips help you as well!</p> <p><a href="" rel="nofollow">read original article here</a></p> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="tags-links">Tagged <a href="" rel="tag">attempt</a> <a href="" rel="tag">first</a> <a href="" rel="tag">HTML</a> <a href="" rel="tag">Learning</a> <a href="" rel="tag">myself</a> <a href="" rel="tag">nice</a> <a href="" rel="tag">Odin</a> <a href="" rel="tag">project</a> <a href="" rel="tag">really</a> <a href="" rel="tag">through</a></span> </footer><!-- .entry-footer --> <!-- Related Posts --> <div class="related-posts row"><h3 class="related-title">Related Articles</h3> <article class="relatedpost col-lg-3 col-6"> <a title="Stashing in Git" href=""> <img width="218" height="163" src="" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /> <h4 class="relatedpost-title">Stashing in Git</h4> </a> </article> <article class="relatedpost col-lg-3 col-6"> <a title="Google’s Best Semi-Secret Experiment: Chrome Flags" href=""> <img width="218" height="163" src="" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /> <h4 class="relatedpost-title">Google’s Best Semi-Secret Experiment: Chrome Flags</h4> </a> </article> <article class="relatedpost col-lg-3 col-6"> <a title="How to Create an Effective Incident Response Plan" href=""> <h4 class="relatedpost-title">How to Create an Effective Incident Response Plan</h4> </a> </article> <article class="relatedpost col-lg-3 col-6"> <a title="How One Hacker Made $360k in a Day via a Flash Loan and Market Manipulation" href=""> <img width="218" height="163" src="" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset=" 218w, 600w" sizes="(max-width: 218px) 100vw, 218px" /> <h4 class="relatedpost-title">How One Hacker Made $360k in a Day via a Flash Loan and Market Manipulation</h4> </a> </article> </div> </div><!--/ .entry-summary--> </article><!-- #post-77108 --> </main><!-- #main --> </div><!-- #primary --> <aside id="secondary" class="widget-area col-lg-4 col-md-4 col-sm-12 col-12"> <section id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action=""> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Search" /> </form></section><section id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="raido-widget"></div> <script> (function(){ var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = ""; po.onload = () => { window.raidof({ language: "en", backgroundColor: "rgba(255,255,255,1)", theme: "light", size: 300, affiliateId: 10016 }); }; document.body.appendChild(po); })(); </script></div></section> <section id="recent-posts-2" class="widget widget_recent_entries"> <h2 class="widget-title"><i class="fab fa-ethereum"></i>Recent Posts</h2> <ul> <li> <a href="">Bitcoin Addresses With Non-Zero Balances Hit All-Time High</a> </li> <li> <a href="">Ripple Launches New XRP Fraud Reporting Procedure –</a> </li> <li> <a href="">Stashing in Git</a> </li> <li> <a href="">Google’s Best Semi-Secret Experiment: Chrome Flags</a> </li> <li> <a href="">How to Create an Effective Incident Response Plan</a> </li> </ul> </section><section id="categories-2" class="widget widget_categories"><h2 class="widget-title"><i class="fab fa-ethereum"></i>Categories</h2> <ul> <li class="cat-item cat-item-808"><a href="" title="Auto Added by WPeMatico">Altcoin</a> </li> <li class="cat-item cat-item-25976"><a href="">Altcoin News</a> </li> <li class="cat-item cat-item-25197"><a href="">Altcoins</a> </li> <li class="cat-item cat-item-28535"><a href="">atlcoin</a> </li> <li class="cat-item cat-item-59"><a href="" title="Auto Added by WPeMatico">Bitcoin</a> </li> <li class="cat-item cat-item-26914"><a href="">Bitcoin News</a> </li> <li class="cat-item cat-item-2"><a href="" title="Auto Added by WPeMatico">Blockchain</a> </li> <li class="cat-item cat-item-30097"><a href="">Blockchain News</a> </li> <li class="cat-item cat-item-25766"><a href="">breakingnews</a> </li> <li class="cat-item cat-item-17065"><a href="" title="Coin Central">Coin Central</a> </li> <li class="cat-item cat-item-28534"><a href="">Cryponews</a> </li> <li class="cat-item cat-item-25764"><a href="">Crypto</a> </li> <li class="cat-item cat-item-26915"><a href="">Crypto News</a> </li> <li class="cat-item cat-item-24353"><a href="">Cryptocurrency</a> </li> <li class="cat-item cat-item-27470"><a href="">Cryptocurrency exchanges</a> </li> <li class="cat-item cat-item-27359"><a href="">Cryptonews</a> </li> <li class="cat-item cat-item-25977"><a href="">crytocurrency</a> </li> <li class="cat-item cat-item-27471"><a href="">ERC20 tokens</a> </li> <li class="cat-item cat-item-26916"><a href="">ICO News</a> </li> <li class="cat-item cat-item-1662"><a href="" title="Market Price">Market Price</a> </li> <li class="cat-item cat-item-25765"><a href="">News</a> </li> </ul> </section><section id="archives-2" class="widget widget_archive"><h2 class="widget-title"><i class="fab fa-ethereum"></i>Archives</h2> <ul> <li><a href=''>February 2020</a></li> <li><a href=''>January 2020</a></li> <li><a href=''>December 2019</a></li> <li><a href=''>November 2019</a></li> <li><a href=''>October 2019</a></li> <li><a href=''>September 2019</a></li> <li><a href=''>August 2019</a></li> <li><a href=''>July 2019</a></li> <li><a href=''>June 2019</a></li> <li><a href=''>May 2019</a></li> <li><a href=''>April 2019</a></li> <li><a href=''>March 2019</a></li> <li><a href=''>February 2019</a></li> <li><a href=''>January 2019</a></li> <li><a href=''>December 2018</a></li> <li><a href=''>November 2018</a></li> <li><a href=''>October 2018</a></li> <li><a href=''>September 2018</a></li> <li><a href=''>August 2018</a></li> <li><a href=''>July 2018</a></li> <li><a href=''>June 2018</a></li> <li><a href=''>May 2018</a></li> <li><a href=''>April 2018</a></li> <li><a href=''>March 2018</a></li> <li><a href=''>February 2018</a></li> <li><a href=''>January 2018</a></li> <li><a href=''>December 2017</a></li> <li><a href=''>November 2017</a></li> <li><a href=''>October 2017</a></li> <li><a href=''>September 2017</a></li> </ul> </section></aside><!-- #secondary --> </div> </div><!-- #content --> <div class="footerwrap container-fluid"> <footer id="colophon" class="site-footer container"> <aside id="footer-widgets" class="row footer-widget-area"> </aside><!-- #footer-widgets --> <div class="site-info"> <a href="">Proudly powered by WordPress</a> <span class="sep"> | </span> bitcoinee by <a target="_blank" href=""><p class="site-info--credit"></p></a>. </div><!-- .site-info --> </footer><!-- #colophon --> </div> </div><!-- #page --> <a href="#" id="gotop" title="Back to top"><i class="fas fa-angle-double-up"></i></a> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script type='text/javascript' src=''></script> <script> /* Imager Watermark */ jQuery(function($){ $(document).ready(function() { var config = { "opacity": , "className": "watermark", "position": "", "path": "" }; $(document).watermark(config); }); }); </script> </body> </html>