HTML Tags and CSS Properties Explained with Examples for Beginners
Introduction
HTML and CSS are the building blocks of the web. HTML provides the structure, while CSS adds styling and design. In this guide, we’ll go over some commonly used HTML tags and CSS properties with beginner-friendly explanations and examples.
Some Essential HTML Tags
- <!DOCTYPE html> – Declares the document type (HTML5).
- <html></html> – Parent tag that contains all HTML elements of a webpage.
- <head></head> – Holds meta information, title, styles, and external links.
- <title></title> – Defines the name of the webpage (appears on the browser tab and is used by search engines).
- <meta> – Adds metadata such as description, keywords, and viewport settings. Important for SEO and redirection.
- <link> – Used to connect an external stylesheet.
- <style></style> – Defines CSS rules inside the head section.
- <body></body> – Contains the main content that displays in the browser.
- <div></div> – A block-level container for grouping content or layout sections.
- <a href=""></a> – Anchor tag for creating hyperlinks.
- <img> – Displays an image on the webpage.
- <h1>–<h6> – Heading tags (h1 is largest, h6 is smallest).
- <p></p> – Creates a paragraph.
- <ol></ol> – Ordered (numbered) list.
- <ul></ul> – Unordered (bulleted) list.
- <li></li> – List item inside <ul> or <ol>.
- <em></em> – Emphasizes text (usually italicized).
- <strong></strong> – Highlights text (usually bold).
- <script></script> – Adds JavaScript code or external scripts.
- <footer></footer> – Semantic HTML5 tag for page footer (copyright, contact, etc.).
- <br> – Inserts a line break.
- <hr> – Inserts a horizontal line.
- <aside></aside> – Semantic HTML5 tag for sidebar content.
- <header></header> – Semantic HTML5 tag, often contains logo, navigation, or intro content.
- <article></article> – Defines an independent block of content (e.g., a blog post).
- <nav></nav> – Semantic HTML5 tag for navigation menus.
- <section></section> – Groups related content in a page.
- <table></table> – Creates a table layout.
- <tr></tr> – Defines a row in a table.
- <td></td> – Defines table data (cell content).
- <th></th> – Defines table headers.
For a complete list of HTML tags, check the W3Schools HTML reference
Some Useful CSS Properties
- background-color – Sets background color.
- font-family – Changes font style.
- margin / margin-top / margin-bottom / margin-left / margin-right – Adds space outside an element’s border.
- padding / padding-top / padding-bottom / padding-left / padding-right – Adds space inside an element’s border.
- color – Sets text color.
- font-size – Controls text size.
- font-style – Sets italic, normal, or oblique styles.
- font-weight – Defines boldness.
- line-height – Sets spacing between lines of text.
- text-transform – Converts text (uppercase, lowercase, capitalize).
- text-decoration – Adds or removes underlines and other decorations.
- text-align – Aligns text (left, right, center, justify).
- letter-spacing – Controls space between letters.
- border / border-top / border-bottom / border-left / border-right – Adds borders.
- border-radius – Creates rounded corners.
- width – Sets element width.
- height – Sets element height.
- background-image – Sets a background image.
- background-position – Positions a background image.
For a full CSS property list, visit the W3Schools CSS reference
Read Also
Conclusion
HTML tags and CSS properties form the foundation of web development. With just these basics, you can create structured, styled, and functional websites. Mastering them step by step ensures a solid foundation before moving to advanced concepts.
Do you have other favorite HTML tags or CSS properties you often use? Drop your comments or contributions below - let’s learn together!
Post a Comment