HTML5 for Everyone — A Comprehensive Guide for Beginners | Web Development Series
👋Hi, I hope you are doing well. Today we will learn everything that we need to know about HTML5. Basically, in my point of view, the basics of web development are important for everyone because, in today’s modern world, we use websites, web apps, mobile apps, etc daily. So whether you are a student of CS, Engineering, Medical, or any other field you should at least know about the Web, Websites, Web Apps, etc. The first thing we need to know while learning web development is HTML, which stands for HyperText Markup Language. HTML5 is the modern version of simple HTML.
So let’s get started.
Understanding the HTML5:
HTML5 (Hypertext Markup Language 5) is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is currently a World Wide Web Consortium (W3C) recommendation.
In HTML5, we use semantic tags which makes our code more easier for us and others to read and understand it better. It is also better for a browser to understand these tags and make our website faster which is another topic called Search Engine Optimization (SEO). Before the semantic tags, the HTML code was not properly in a well-structured manner. The HTML5 comes with semantic tags like header, main, section, div, footer, etc. that make the HTML code easier and in a properly structured way. This solved the problem of unstructured HTML coding.
Understanding the Semantic Tags/Elements:
Semantic HTML elements are those that clearly describe their meaning in a human-readable way. They provide both structure and context to the content, making it more accessible to both users and search engines.
Some of the semantic tags include:
header, nav, main, section, article, aside, footer
Now, let’s see how to use these tags/elements in our HTML5.
- <header>
Defines a header for a document or a section.
2. <nav>
Represents a section of navigation links.
3. <main>
Defines the main content of a document.
4. <section>
Represents a generic section of a document.
5. <article>
Represents an independent piece of content.
6. <aside>
Defines content aside from the content it is placed in.
7. <footer>
Defines a footer for a document or a section.
8. <figure> and <figcaption>
Represents self-contained content, like images or diagrams, with an optional caption.
9. <time>
Represents a specific period in time.
10. <details> and <summary>
Represents additional details that the user can view or hide.
These all are most widely used semantic tags/elements of HTML5. These semantic elements not only improve the structure and accessibility of our HTML document but also make it easier for search engines to understand and index the content accurately.
Thank you for reading our article, if you find it interesting share it with others. If you find any mistake do let me know in the comments of this article
If you have any questions feel free to reach out to me at:
LinkedIn: https://www.linkedin.com/in/abdulrehman0
Twitter: https://twitter.com/intent/follow?screen_name=devabdulrehman
YouTube: https://www.youtube.com/channel/UC0U-CjmrinC6I3Gb1dOk0WA?sub_confirmation=1
