This content originally appeared on DEV Community and was authored by Manu Martinez
Hi! so far we've been taking small bites of HTML cake but it's time to go further! ready?
*Let's go! 😁 *
First of all let's go in depth with elements, their attributes, and ways to format them. Not forgetting that elements are constructed by an initial tag, the content and the closing tag, so we must always remember to close them. However, sometimes, you should not have to close every tag which are called empty elements.
Another point to remember is that tags can be nested this means that they are inside each other, for example :
<p>lorem <b>ipsum</b> </p>
It can be said that an HTML document is composed by nested tags
ATTRIBUTES
In our previous posts we have talked about attributes, but what are these attributes like? To start you should know that :
- Almost HTML elements can carry attributes, except for empty elements.
- They must always start at the initial tag.
- The values of the attributes must be enclosed in quotation marks.
- It is recommended to use "lowercase" attributes.
An example of attributes can be :
<a href="put here your link">Oh yeah 😊</a>
FORMATTING THE CONTENT
How my code should look like? How do we do it? Well, HTML allows you to create a real visual format which is easy to understand by anyone. The first step to make your HTML look's perfectly is to highlight the words, with bold, italics, etc... And how does html play with this? Well, through tags! Why else would it be?
HERE YOU HAVE A FEW TAGS:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<sub> - Subscript text
<sup> - Superscript text
<STRONG> VS <B> :
The b and strong tags have the same visual meaning, nevertheless google gives always more importance to strong tag because it's above in the HTML hierarchy.
<I> VS <EM>:
The i and em tag also has the same visual meaning, but is usually used to describe technical words, and for emphasis some text.
COMMENTS
Finally, I always like to close talking about comments and documentation, YES 😆 do not kill me 🤓, I know every developer hate when they must document their code, but try to figure out what will happen if you want to check your code in the future, I am sure you will no be able to understand anything, comments are really important in a daily routine, you do not only know how to write it, you should know how to understand comments from other developers and how to adapt your code to the team software requirements, look's at this example:
<!--------------- comment --------------------->
Oh 😞, this is the end of today's post, but don't worry, I have a little present for you! a cheatsheet with all the tags you need to become a master of HTML, in the following post I will allow to download this cheatsheet. Please do not forget:
You must be your own best version 🥳.
This content originally appeared on DEV Community and was authored by Manu Martinez
Manu Martinez | Sciencx (2021-11-24T07:21:58+00:00) HTML 5 and The Legends of the Elements. Retrieved from https://www.scien.cx/2021/11/24/html-5-and-the-legends-of-the-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.