HTML and HTML5 Tags Cheat Sheet

Author:

Introduction

HTML (Hypertext Markup Language) is the standard language for creating web pages. HTML5 is the latest version that introduces new elements and attributes to provide better structure and functionality. Understanding the basic and new HTML5 elements and their attributes is essential for building and designing web pages.

HTML & HTML5 Tags Cheat Sheet

Here's a handy cheat sheet of the most commonly used HTML and HTML5 tags and their descriptions:

Tag Description
<!DOCTYPE html> Defines the document type and version of HTML.
<html> Root element of an HTML page.
<head> Contains metadata and links to scripts and stylesheets.
<title> Sets the title of the document.
<body> Contains the content of the HTML document.
<h1> to <h6> Defines HTML headings from level 1 to 6.
<p> Defines a paragraph.
<b> Defines bold text.
<i> Defines italic text.
<u> Defines underlined text.
<br> Inserts a line break.
<hr> Inserts a horizontal rule.
<a> Defines a hyperlink.
<img> Embeds an image.
<div> Defines a division or section.
<span> Defines a section in a document.
<ul> Defines an unordered list.
<ol> Defines an ordered list.
<li> Defines a list item.
<table> Defines a table.
<tr> Defines a row in a table.
<td> Defines a cell in a table.
<th> Defines a header cell in a table.
<form> Defines an HTML form for user input.
<input> Defines an input control.
<textarea> Defines a multi-line text input control.
<button> Defines a clickable button.
<select> Defines a drop-down list.
<option> Defines an option in a drop-down list.
<link> Defines the relationship between a document and an external resource (most commonly used to link to stylesheets).
<meta> Defines metadata about an HTML document.
<style> Defines style information for a document.
<script> Defines a client-side script.

HTML5 Specific Tags

Tag Description
<header> Defines a header for a document or section.
<footer> Defines a footer for a document or section.
<nav> Defines navigation links.
<article> Defines an independent, self-contained content.
<section> Defines a section in a document.
<aside> Defines content aside from the page content.
<main> Defines the main content of a document.
<figure> Specifies self-contained content, like illustrations, diagrams, photos, etc.
<figcaption> Defines a caption for a <figure> element.
<mark> Defines marked/highlighted text.
<time> Defines a specific time (or datetime).
<progress> Represents the progress of a task.
<meter> Defines a scalar measurement within a known range (a gauge).
<audio> Defines sound content.
<video> Defines video content.
<source> Specifies multiple media resources for media elements (<audio>, <video>).
<canvas> Used to draw graphics via scripting (usually JavaScript).
<svg> Defines a container for SVG graphics.
<datalist> Specifies a list of pre-defined options for input controls.
<output> Represents the result of a calculation (like a total).
<details> Defines additional details that the user can view or hide.
<summary> Defines a visible heading for a <details> element.
<template> Defines a template for client-side content that is not displayed when the page loads but can be instantiated later.
<section> Defines a section in a document.
<abbr> Defines an abbreviation or acronym.
<code> Defines a piece of computer code.
<kbd> Defines keyboard input.
<samp> Defines sample output from a computer program.
<var> Defines a variable.

Conclusion

Mastering HTML tags is essential for creating well-structured and functional web pages. This cheat sheet provides a quick reference to the most commonly used HTML and HTML5 tags, helping you build and design web pages more efficiently. By understanding and using these tags, you can create web pages that are both visually appealing and semantically correct. Keep this guide handy to make the most of HTML. Happy coding!

Comments

Post a Comment

Leave Comment