HTML (Hypertext Markup Language) is a markup language used to create web pages. It provides a structure and formatting for the content of web pages.
HTML uses tags to define different elements of a web page such as headings, paragraphs, images, links, etc. To create a web page using HTML, you need to know the basic tags and their attributes.
In this HTML cheat sheet, we will discuss the most common HTML tags and their attributes.
Basic Structure
Every HTML document must start with a DOCTYPE declaration, which tells the web browser what type of HTML is being used.
The following is an example of a DOCTYPE declaration for HTML5:
<!DOCTYPE html>
After the DOCTYPE declaration, the HTML document should include an HTML tag that encloses the entire document.
The HTML tag should also include a lang attribute that specifies the language of the document:
<html lang="en">
<!-- document content goes here -->
</html>
Head Section
The head section of an HTML document contains information about the document, such as the title of the page, keywords, and metadata.
The head section should be enclosed in the head tags:
<head>
<title>Page Title</title>
<meta name="description" content="Page description">
<meta name="keywords" content="keyword1, keyword2, keyword3">
</head>
The title tag specifies the title of the web page, which appears in the browser’s title bar.
The meta tags specify information about the web page that is not displayed on the page itself, such as the description and keywords.
Body Section
The body section of an HTML document contains the content of the web page.
The body section should be enclosed in the body tags:
<body>
<!-- content goes here -->
</body>
Headings
Headings are used to provide a hierarchical structure to the content of a web page. HTML provides six levels of headings, from h1 (the most important heading) to h6 (the least important heading).
Headings should be used in descending order of importance, with h1 used for the main heading of the page and subsequent headings used for subheadings.
The following is an example of a heading:
<h1>Main Heading</h1>
Paragraphs
Paragraphs are used to group related text together.
To create a paragraph, use the p tags:
<p>This is a paragraph.</p>
Links
Links are used to allow users to navigate between different web pages.
To create a link, use the a tag and include the URL of the destination page in the href attribute:
<a href="http://www.example.com">Link Text</a>
Images
Images are used to add visual content to a web page.
To add an image, use the img tag and include the URL of the image in the src attribute:
<img src="image.jpg" alt="Description of image">
The alt attribute should be used to provide a text description of the image, which is displayed if the image cannot be loaded.
Lists
HTML provides two types of lists: ordered lists (ol) and unordered lists (ul).
Ordered lists are used to create lists that have a specific order, such as numbered lists, while unordered lists are used to create lists that do not have a specific order, such as bullet points.
To create a list, use the li tags within the ol or ul tags:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Forms
Forms are used to allow users to input data, such as their name or email address, and submit it to the server.
To create a form, use the form tag:
<form action="/submit-form" method="post">
<!-- form elements go here -->
</form>
The action attribute specifies the URL to which the form data will be submitted, and the method attribute specifies the HTTP method to use (post or get).
Text Input
Text input fields are used to allow users to enter text, such as their name or email address.
To create a text input field, use the input tag with the type attribute set to “text”:
<input type="text" name="name" placeholder="Enter your name">
The name attribute specifies the name of the input field, which is used to identify the input data on the server, and the placeholder attribute specifies the text to display in the input field before the user enters any text.
Radio Buttons
Radio buttons are used to allow users to select one option from a set of options.
To create a set of radio buttons, use the input tag with the type attribute set to “radio” and the same name attribute for each button in the set:
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<label>
<input type="radio" name="gender" value="female">
Female
</label>
The value attribute specifies the value that will be sent to the server when the form is submitted, and the label element provides a label for the radio button.
Checkboxes
Checkboxes are used to allow users to select one or more options from a set of options.
To create a set of checkboxes, use the input tag with the type attribute set to “checkbox” and a unique name attribute for each checkbox:
<label>
<input type="checkbox" name="option1" value="option1">
Option 1
</label>
<label>
<input type="checkbox" name="option2" value="option2">
Option 2
</label>
The value attribute specifies the value that will be sent to the server when the form is submitted.
Select Dropdowns
Select dropdowns are used to allow users to select one option from a list of options.
To create a select dropdown, use the select tag and the option tags within the select tag:
<select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
The name attribute specifies the name of the input field, and the value attribute specifies the value that will be sent to the server when the form is submitted.
Buttons
Buttons are used to allow users to submit a form or perform some other action, such as refreshing the page.
To create a button, use the button tag:
<button type="submit">Submit</button>
The type attribute specifies the type of button (submit, reset, or button), and the text within the button tag specifies the text to display on the button.
Conclusion
HTML provides the basic structure and formatting for web pages. By using the tags and attributes discussed in this HTML cheat sheet, you can create web pages that are well-structured and easy to read.
