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 :
- There are elements that must carry attributes, a prime example would be the
<img>tag, this is self closing but must have attributes in order to be valid.
<img src="">
- They must always start at the initial tag.
Only the string attributes value should be enclosed in quotation marks.
Valid example:
<img width=100 height=100 src="...">
- Invalid example:
<img width=100px height=100px src="...">
- 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 than strong tag because strong is just more somatic than b. <strong> is more used to have something of "strong importance", than having something with "bold style".
<I> VS <EM>:
The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the <i> element is more appropriate.
** Example of use **
<i><abbr title="Generic Universal Role Playing System">GURPS</abbr></i>, <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>
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 🥳.
Top comments (11)
Hey, few corrections (mostly minor):
This is not correct I am afraid.
A prime example would be the
<img>tag, this is self closing (empty) but must have attributes in order to be valid. Same for<input>etc.Only strings must be enclosed in quotation marks.
For example
<img width=100 height=100 src="...">is perfectly valid HTML.However
<img width=100px height=100px src="...">would not be valid HTML.Other than those minor points a great article, I just thought they were important bits of info given this is marked as #beginners! ❤
Thanks you for your minor apportions, we have just updated our post. As you said it's for #beginners, then we should have taken into account that.
No problem, always great to see a responsive author who corrects their articles quickly instead of ignoring feedback! ❤
Great article!
It's really important for us, we learn a lot from comments and contributions. Welcome to my blog and thank you for reading it :)
It goes beyond just that.
<em>doesn't even have to be italic at all, and nested<em>elements represent increasing levels of importance and can therefore be styled with increasingly noticeable visuals.To quote the spec:
So no, you actually should be using
<i>if you really want italic content for the sake of being italic, and<em>only if you want to add emphasis without caring much about how that emphasis is visually achieved.Yes, it's exactly another point of view focusing in nested
<em>tag, we have just adopted your recommendation to even clarify more the difference between these two tags. We really appreciate your interesting and the effort you have put writing this comment 😄Thanks you for reading our post 😇
I think you could have better explained the difference between B, I, EM, and STRONG, and maybe mention CITE?
Remember, ALL HTML tags have meanings separate from their default appearance, and it is for those meanings we should be choosing/using them.
The "italic" tag doesn't mean "show this text in italic", it means "this text would be italic for grammatical or structural reasons" such as a book title that's not being cited and wouldn't be "emphasized". In the same way "bold" doesn't mean "show this text as bold" it means would be bold such as the name of a entity or party in a legal document, since those would not be receiving "more emphasis" -- what STRONG actually MEANS.
Both EM and STRONG being for emphasis, not "show this text as bold or italic". Just as P is for a grammatical paragraph not "I want space around this", and HR is for a thematic break or change in topic not "I want a line drawn across the screen"... or how H1..H6 create your logical document structure, and are NOT just to say "fonts in different weights and sizes".
I've said it for nearly two decades, if you choose ANY of your HTML tags, attributes, or classes based on what you want things to look like, you've failed to divine HTML's purpose.
I agree with you, you have take another point of view, but the meaning is the same that I have wanted to explain. Sincerely, you explication is more somatic that mine, I only want to explain basic concepts of HTML for teach other the basic structure, in the following post we are going to get into more details of each tag. I really appreciate your collaboration and your opinion, I will take into account for the following posts. I love your method to explain this difference, then I will copy your text for basing on it in the future :)
I have an example I've used for over a decade you're welcome to share in your article. It does an amazing job of showing all four in action.
<i><abbr title="Generic Universal Role Playing System">GURPS</abbr></i>, <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>Just because the defaults for screen are the same, doesn't mean it's what they're for.
Yes I understand you, I really appreciate your collaboration :)
Thanks you for your details, it has been a mismatched. We have already updated our post. :)