My first attempt on learning HTML was by myself, through . 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. ! The Odin Project I couldn’t be more wrong To consolidate myself as a software developer, I applied to . 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. Microverse 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 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. 1. Know the correct naming of what you are writing: 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: 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. - Element: an 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 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. - Tags: opening tag closing tag 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. - Attributes: If you are fresh on HTML or are struggling with these concepts, I recommend . this Codecademy tutorial 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: <!DOCTYPE html>. 2. Don’t forget the <!DOCTYPE> declaration: Also, never forget to save your file with a .html extension so your OS would recognize it as an HTML document. 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 <html> element, which should be the second thing in your document. Every other elements from the web page should be between the opening (<html>) and closing (</html>) HTML tags. 3. The HTML tag: According to the W3C ( ), 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 <html> opening tag, like this: <html lang=“en”>. World Wide Web Consortium the <head> element is located right after the <html> 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: <title>, <style>, <meta>, <link>, <script>, and <base>. 4. Inside the <head>: 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. 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. Scroll for more information about metadata. this article 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! 5. Below the head comes the body: And finally… 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. 6. Use HTML semantics: 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: <header>, <article>, <table>. Here is a . And . list of HTML5 semantic elements another one Benefits of using semantic HTML are: using elements with a clear meaning makes the website’s source code easier to read for other web developers (or for the future you). - Easy to understand: 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. - Accessibility: - 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. It improves your website SEO: An example of a starter HTML template: 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!
