HTML Tags
I'm a software developer based in Nigeria. I specialise in building web applications. I find both front-end and back-end development interesting and fun. I enjoy building things that live on the internet, whether it's a website or an application. I'm passionate about creating innovative solutions and exploring new technologies. I always seek new challenges and opportunities to grow as a developer. I'm open to new opportunities and collaborations.
Hello, hope you coding journey is going fine. Yeah, they will hitches on the way but don't be worried, even the best too have those. What you need to do is focus and seek help when you're stuck, the tech world is ready to help. Coding is fun, so fun that I didn't keep my promise of not coding for the period of this streak. Enough about me, let's get down to business.
Prerequisite
This article is for complete beginners
What are HTML Tags
HTML Tags are keywords that defines how browsers format and display content. These are the most important part of HTML markup that is used to describe the structure of content and with the help of tags a web browser can distinguish between an HTML content and a simple content. Although with the Emmet extension on most text editors or IDE such as Atom or VSCode, you can set up an HTML boilerplate but it is advisable to know how to do it yourself.
Basic Tags
<!DOCTYPE html> - This isn't really a tag or an element, it is the document type declaration (or doctype) for the page. This doctype indicates that the page is HTML5. The doctype doesn't have a closing version: it's the first thing in an .html file and stands alone.
<html>…</html> - This element contains entire HTML page. It should be the first tag to start (after the doctype) and last to close.
<head>…</head> - This element contains information about the page (as opposed to content of the page). For now, it will hold only the and tags.
<title>…</title> - This element gives the main title for the page. It gives the main title for the document, which is used in the title bar and for bookmarks to the page.
<meta charset="UTF-8" /> - This tag tells the browser about the “character encoding” for this document. The details aren't important now, but it's a property of how the text file is encoded when it is saved. This tag should be in every HTML file like this. You may have also noticed that it has no closing tag, and that there's some extra stuff in the tag. We will get to that very soon…
<body>…</body> - Finally, this element contains the actual content of the page: the part that is displayed in the main browser window. Most of the new tags we learn will go somewhere in the .
These tags are always arranged this way in every HTML page.
Container and Non-container tags
The tags can be differentiated into container and non-container tags
- Container Tags : These tags are in which we define the text or other tag elements. These actually consist two tags, a start tag and an end tag, which enclose the text or another tag. E.g :
<body>
<p>This is a paragraph.</p>
</body>
In the example above we put a <p> tag inside the <body and put a sentence inside the <p> tag. If a tag an hold other tags then it is a container tag.
- Non-container Tags : Otherwise known as self-closing tags, these are standalone text do not contain text. Or any other tag element. Example of these tags are:
<meta>
<link>
<img/>
<br/>
<hr/>
Conclusion
I hope the process of demystifying html is going fine. My advise again is for you to read and more importantly, practice, you learn more by doing.
Please leave a comment, suggestion or question. Thanks for reading and goodbye.
