Basically, any html file consists of elements, that marks or tell the browser what to render.
The majority of these elements have an opening tag, the content itself, and a closing tag. Although there are a few exceptions that we see in a moment.
Most of the time, we’ll be using some tag
attribute. That can have several utilities.
The next important tag, is the heading element,
that have six levels.
Please don't get confused thinking that we use the levels to style our headings. The purpose of the levels, is to tell the browser the hierarchy of importance in our titles, that's it.
The <p> tag will include a section of text. And it stands for:
Yes, you guess it... a paragraph! Let’s make one with some "lorem" inside.
Oh, right...On web development, and graphic design, we use this gibberish text, as a demonstration, to fill spaces where it suppose to have content, without actually have to type real content.
So far, all is working, but there are some important tags that we are missing, and they give the structure in html. Let me introduce to you, the
tag. All that's inside this element will be rendered. Is like telling the browser, hey this is the content of our page.
Now let's talk about formatting in html. There´s a convention that when we nest elements inside others, we must use indentation. In that manner, we talk about child elements, like <h1>, <p>, etc, that are also siblings; and parent elements, like the <body>tag.
And if we keep nesting elements deeper in the family tree structure, now we're talking about grandparents, grandchildren, more siblings, and yes, it can become the Addams family 😅. So it's better not to take this to far.
To end this part, let's introduce two more useful tags, the <em> and the <strong> elements. This are what we call inline elements, and normallly you will find theme inside a <p> tag.
Just remember that 99% of the times, our style is given through a CSS document, but is nice to know that this tag exists. And sometimes it's just faster to format directly in html.
Don't miss part two! ✌
If you have questions or you find it useful, please let me know in the comments!
Find me on:
🔗 Instagram | 🔗 Twitter | 🔗Github | 🔗linkedIn
Top comments (0)