Second part: Code.
HTML is simple but kinda tricky when learning, you have a lot of things that do a lot of different stuff but at the same time are the same… Confusing right?. But I will try to tear it down so you can understand more of what the common HTML tags mean:
1. <div></div>: This is what you will use almost in every line… A div is nothing more than a container, something you can put things in and structure them later with CSS.
2. <ul></ul>: Ul means “unordered list” and that means you create, for example, a shopping list and instead of saying “1- Milk, 2- Bread…” by default puts bullet points, but this is just the container of the “<li></li>” tags.
3. <ol></ol>: I almost never use “ordered list” but it’s good to know all the basic tags. This tag creates an ordered list, basically put numbers instead of bullet points.
4. <li></li>: Here is where you see the use of the ordered and unordered list. Each part of the list you create should belong here, in a “list item”, which will change depending on if it’s on a “ul” or “ol”.
5. <h1></h1>: For the sake of the example I will only use this but understand that you have “h1”, “h2”, “h3”, “h4”, and “h5”. This tag means “heading” and is used for creating a heading as you should imagine, but each number on the right will make the heading bigger, like “h1”, or smaller, like “h5”.
6. <p></p>: The p tag means “paragraph” and is used for creating the main content of the website, basically this tag is where all your long text describing your pet’s love life should go.
7. <span></span>: The “span” tag is commonly used for icons, you can use them “ <i></i> “ tag for that!.
8. <section><nav><footer>: Those are HTML5 tags, they need a closing tag! And works like a div tag but the main focus here is for developers don’t get lost on a sea full of divs, more SEO friendly and just help you organize and keep your code clean.