Are you eager to demystify HTML and enhance your website skills? You’re in luck! At this year’s IMPACT Live conference in Hartford, CT, from October 14-16, you’ll have the chance to dive into “They Ask, You Answer,” a powerful philosophy for learning. Register now to ensure you don’t miss out on the insightful sessions designed for non-developers. Plus, gain valuable knowledge of 21 basic HTML codes that can elevate your online presence without needing to be a coding expert.
## 1. Understanding Basic HTML Tags
HTML tags are the **building blocks of HTML**. They define the structure and content of a web page. Tags are enclosed in angle brackets, for example, `
`, and the corresponding closing tag looks like `
`, where the forward slash indicates the end of the element.
There are also self-closing tags that don’t need a closing counterpart. An example of a self-closing tag is the line break tag `
`. Tags can have attributes that provide additional information about the element. Attributes are included in the opening tag, like this: ``. These attributes often define properties such as links, styles, or identifiers.
HTML tags are case-insensitive, meaning `
` is the same as `
`, but it’s recommended to use lowercase for consistency and readability. Tags can be nested but must be **properly closed to ensure** the HTML document is well-formed. For example, `
Text
` is correct, whereas `
Text
` is not.
Here’s a quick reference for basic HTML tags and their attributes:
– `
` to `
`: Headings
– `
`: Paragraph
– ``: Image
– `
- ` and `
- `: Unordered list and list item
By understanding and using these basic HTML tags, you can create and structure web content effectively.
– HTML tags are the building blocks of HTML.
– Tags are enclosed in angle brackets, e.g.,.
– Most tags come in pairs with an opening and a closing tag, e.g.,.
– Closing tags include a forward slash, e.g.,.
– Some tags are self-closing, e.g.,
.
– Tags can have attributes to provide additional information.
– Attributes are included in the opening tag, e.g., .
– HTML tags are case-insensitive, but lowercase is recommended.
– Tags can be nested, but must be properly closed.
– HTML tags define the structure and content of a web page.## 2. The Structure of an HTML Document
An HTML document starts with a `` declaration, which tells the browser that this is an **HTML5 document**. The entire content of the document is wrapped within the root element ``.
Within the `` tag, there are two main sections: `
` and ``. The `` section contains meta-information about the document, such as the character set, viewport settings, and links to external resources like CSS files. It also includes the `` tag, which defines the title that appears in the browser tab.</p> <p>Here’s a basic structure of an HTML document:</p> <p>“`html<br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>Document Title
“`The `
` tag contains all the content that will be displayed on the web page, such as text, images, and links. Comments can be added within the document using ``, which helps in organizing the code and making it easier to understand.Proper indentation and structure are crucial for improving readability and maintenance of the HTML document. This makes it easier for others (and yourself) to read and update the code in the future.
## 3. How to Use the Declaration
The `` declaration is the essential **first line in any** HTML document. It tells the browser which version of HTML is being used, ensuring that your webpage is rendered correctly. For **modern webpages using HTML5**, the declaration is straightforward: ``. This declaration is case-insensitive, meaning you can write it in any combination of uppercase and lowercase letters.
It’s important to note that the `` declaration doesn’t have a closing tag and **must be placed before** the `` tag at the very beginning of your document. Here’s an example for clarity:
“`html
My Webpage
Welcome to my website!
“`Using the correct `` declaration helps browsers render your webpage in standards mode, which is crucial for consistent display across different browsers and devices. Older versions of HTML, such as HTML 4.01 or XHTML, had different `` declarations. Using an outdated or incorrect declaration can lead to rendering issues, causing your webpage to display improperly.
In summary, always ensure your HTML document starts with the correct `` declaration to guarantee your webpage is parsed and displayed appropriately.
## 4. Creating Headings with
to
HTML headings range from `
` to `
`, with `
` being the **largest and typically used** for main titles, and `
` being the smallest. Headings play a crucial role in structuring your content, making it more readable and organized.
Search engines utilize headings to comprehend the hierarchy and context of your content, which can impact your SEO. It’s important to use headings in a hierarchical order and avoid skipping levels for **better accessibility**.
While you can use multiple `
` tags, it’s generally not recommended. Instead, ensure each heading is descriptive and concise to convey the section’s content effectively. Use headings to break up long text, enhancing the reader’s experience.
Headings can be **styled using CSS** to match your website’s design. Additionally, headings can include other inline elements like `` or `` for added emphasis or styling.
## 5. Making Text Bold with and
The `` tag **indicates strong importance**, making it semantically meaningful. It is used to emphasize text that requires additional attention. For example, in a warning message, you might use `` to highlight the crucial part.
On the other hand, the `` tag makes text bold **without implying any added importance**. It is often **used for stylistic purposes**, such as making certain words stand out visually. However, it doesn’t carry any semantic weight.
Both `` and `` tags render text in bold by default. However, browsers may handle them differently, especially with screen readers. Screen readers might read text within `` with more emphasis compared to text within ``.
Here are examples of both tags:
– For ``: `This is important text.`
– For ``: `This is bold text.`
It is advisable to use `` for important text that needs emphasis, while `` should be used for stylistic purposes. Remember, avoid using `` for headings; instead, use heading tags like `
` to `
`.
Both tags can be styled using CSS and can be nested within other HTML elements for more complex structures.
## 6. Italicizing Text with and
In HTML, italicizing text can be done using the `` and `` tags. While both display text in italics by default, they serve different purposes. The `` tag is semantically meaningful and indicates that the enclosed text should be emphasized. For example, if you want to emphasize a word in a sentence, you would use ``.
“`html
This is important information.
“`
On the other hand, the `` tag is **used purely for stylistic purposes** and does not imply any emphasis. It’s commonly used for foreign words, technical terms, or other text that should be italicized without additional importance. For instance:
“`html
My favorite Italian word is gelato.
“`
It’s important to note that screen readers may interpret `` differently, often reading it with added stress to convey the emphasis. This makes `` **more suitable for accessibility**.
While both tags can be styled further using CSS, it’s advisable to use `` for text that needs emphasis and `` for purely stylistic italicization. Avoid using `` for titles or headings as it doesn’t convey any semantic meaning.
Both `` and `` can be nested within other HTML elements, offering flexibility in how you present your content.
## 7. Adding Links with the Tag
To make a link open in a new tab, you can use the `target=’_blank’` attribute. This can be helpful for keeping users on your site while they check out additional information.
The text that appears between the `` and `` tags is the clickable part of the link. For example, `Visit Example` will display as ‘Visit Example’ on the webpage.
It’s good practice to use **descriptive text for your links** instead of just placing URLs directly in the text. This improves both usability and accessibility. For instance, instead of `https://www.example.com`, use `Visit Example`.
Links can also contain images or other elements, making them more interactive. For example, `
` will turn the image into a clickable link.The `title` attribute can provide additional information about the link, which appears as a tooltip when the user hovers over the link. For example, `Visit Example`.
**Styling links using CSS** can make them stand out or blend in with the rest of your content. You can change the color, remove the underline, and more. For example, `a { color: blue; text-decoration: none; }`.
Finally, ensure that your links are accessible and keyboard-friendly. This means making sure they can be easily navigated using a keyboard and that screen readers can interpret them correctly.
## 8. Displaying Images Using the
Tag
The `
` tag is used to **embed images** into your HTML document. The `src` attribute specifies the URL of the image you want to display. For instance, `
` will display the image located at `image.jpg`.To ensure accessibility, always include the `alt` attribute, which provides **alternative text** if the image cannot be displayed. This is especially helpful for screen readers. For example, `
`.You can control the size of the image using the `width` and `height` attributes. For example, `
` will display the image with a width of 300 pixels and a height of 200 pixels.The `
` tag is self-closing, meaning you do not need a closing tag. Simply write it as `
`.To make images responsive, use the `srcset` attribute, which allows you to specify different images for different screen sizes. This helps improve the user experience on various devices.
Optimizing images for the web is crucial to improve load times. Use tools to compress images without losing quality before uploading them.
Always use descriptive filenames for your images. Instead of `img123.jpg`, use something like `sunset-beach.jpg`. This improves SEO and makes the files easier to manage.
Images can be styled using CSS. For instance, you can add a border, adjust opacity, or apply filters to enhance the visual appeal.
Avoid using images for text. Instead, use actual text in your HTML. This ensures that your content is accessible and searchable.
## 9. Creating Lists with
- and
- ` tag. You can **nest lists** within other lists to create sublists, which helps in organizing content hierarchically.
Here is an example of an unordered list:
“`html
- Item 1
- Item 2
- Item 3
“`
And an example of an ordered list:
“`html
- First item
- Second item
- Third item
“`
You can use CSS to style the list markers, such as changing the bullet type or numbering style. However, it’s important to avoid using lists purely for layout purposes.
When creating lists, ensure each `
- ` contains a single block of content. This can include text, links, images, or other elements.
Proper nesting of lists is crucial for accessibility, as it helps screen readers and other assistive technologies to interpret the structure correctly.
## 10. Using
- for List Items
- tags are used to define individual **list items**. They can be placed within
- (unordered list) or
- represents a single item within the list.
The content inside
- tags is flexible; it can include text, links, images, or other HTML elements. This makes it easy to create detailed and informative lists that enhance the readability of your content.
Nesting
- tags is possible and allows for creating hierarchical lists. For example, you can have a main list item that contains a nested list:
“`html
- Main Item
- Sub Item 1
- Sub Item 2
“`
Using CSS, you can style
- Main Item
- elements to improve their appearance. You can adjust padding, margin, and other styles to ensure consistent formatting across your lists.
It’s important to use
- tags only within
- or
- tags effectively can make your content more organized and easier to understand for all users.
## 11. Adding Line Breaks with
The
tag inserts a line break in the text, making it a useful tool for separating lines within a paragraph. It is a **self-closing tag, meaning** you don’t need to add an end tag for it to work.While
can help in improving readability by creating a clear break in text, it’s essential to use it sparingly. Overuse can lead to cluttered content, making it harder for readers to follow.Here’s a simple example:
“`htmlThis is the first line.
This is the second line.“`
In this example, the
tag breaks the text into two separate lines within the same paragraph.It’s important to avoid using
for layout purposes. Instead, **use CSS for better** control and flexibility over your web page’s design.If you need multiple line breaks, you can use multiple
tags, but again, do so cautiously to maintain content readability. Remember, line breaks do not create new paragraphs; they merely insert a pause or break in the current content.To ensure your HTML is semantically correct, use appropriate HTML elements to structure your content. For instance, use
for paragraphs and
to
for headings.
Screen readers interpret
as a pause or break, so make sure each line break is meaningful and enhances the user experience.## 12. Creating Paragraphs with
The `
` tag is used to define a paragraph of text in HTML. As a block-level element, it helps to create a **clear structure and organization** within your content. Paragraphs are automatically separated by a margin, which **enhances readability** by providing visual breaks between sections of text.
When using the `
` tag, it’s important to avoid using multiple paragraph tags for single sentences. Instead, group sentences that logically belong together within a single `
` tag. This approach ensures your content is well-structured and easy to read.
Paragraphs can include various inline elements such as `` for links or `` for emphasis. These elements allow you to enrich your text with additional context and functionality while maintaining a clear and organized layout.
To style your paragraphs, use CSS to modify attributes like font, color, and spacing. For example, you can change the font size or color to better match your website’s design. Proper styling not only makes your content more visually appealing but also improves user experience.
Ensure that your paragraphs are concise and focused. Long-winded paragraphs can be daunting for readers and may reduce the impact of your message. Aim to convey your points clearly and efficiently.
Properly nested paragraphs make your content more accessible, especially for screen readers. Screen readers interpret `
` tags as blocks of content, so clear and well-structured paragraphs will improve the reading experience for users who rely on these tools.
## 13. Using
for Divisions and ContainersThe `
` tag defines a division or section in the document, acting as a versatile **container for grouping related content** together. As a block-level element, a `` starts on a new line and **takes up the full width** available, making it perfect for structuring your HTML content.One of the major benefits of using `
` is the ability to style these divisions with CSS. By **assigning classes and IDs** to `` elements, you can target them specifically with CSS rules or JavaScript functions, greatly enhancing your control over the layout and interactivity of your web pages.Divisions can contain other block-level or inline elements, allowing you to create complex and nested layouts. However, it’s important to avoid overusing `
` tags to maintain a clear and semantic HTML structure. Overuse can make your code harder to read and understand.For example, you might use a `
` to wrap a group of related elements such as a header, paragraph, and an image. This not only keeps your code organized but also makes it easier to apply styles and scripts to the grouped content.Screen readers interpret `
` as a generic container, which means that while `` is useful for layout purposes, it doesn’t carry any semantic meaning. Thus, it’s crucial to use it appropriately and not as a substitute for more meaningful HTML elements like ``, ` `, or ` `. ## 14. Adding Comments with
HTML comments are a useful tool for providing context and explanations within your code. They are added using the syntax `` and are not displayed in the browser. This means you can add notes and explanations without affecting the page’s appearance.
Comments can be used to explain sections of your code, making it easier for others (or yourself) to understand what the code does. This is especially helpful when working on complex projects or when multiple people are involved.
Another practical use of comments is to **temporarily disable code**. By wrapping the code you want to disable in comment tags, you can easily prevent it from being executed without deleting it. For example:
“`html
“`Ensure your comments are **clear and concise**. Vague or overly long comments can be confusing and counterproductive. Here’s an example of a clear comment:
“`html
“`
While comments are helpful, avoid using them to store sensitive information like passwords or API keys. Comments are visible in the page’s source code, which means anyone can see them.
Comments can span multiple lines if needed. This is useful for longer explanations or notes:
“`html
…“`
Well-commented code is easier to maintain and update. When others (or future you) revisit the code, they will appreciate the additional context. Remember, comments do not affect the performance of the page, and screen readers ignore them, so they won’t interfere with accessibility.
## 15. Using for Inline Elements
The tag is a **versatile tool for handling** inline elements in HTML. Unlike some other tags, does not come with any default styling, making it a **blank canvas for custom styles**. This flexibility allows you to apply specific styles or effects to particular sections of text without affecting the entire paragraph or block.
You can use to enclose text, other inline elements, or a combination of both. By adding classes and IDs to elements, you can target them directly with CSS for styling. This is particularly useful when you need to highlight or differentiate specific parts of your content.
It’s important to remember that should not be used for block-level elements. It’s designed for inline usage, so using it for block-level elements can lead to unexpected results. However, you can nest elements to achieve more complex styling needs.
The tag is also handy for applying JavaScript to specific text segments. This can be useful for adding interactivity or dynamic content to your webpage. However, ensure that the use of elements is meaningful and necessary to avoid cluttering your HTML code.
Screen readers interpret as inline content, so it’s essential to use this tag thoughtfully to maintain accessibility. Properly used, can greatly enhance the styling and functionality of your web pages without compromising on readability or structure.
## 16. Creating Tables with
The `
` tag is used to **define a table** in HTML. Tables are a great way to **organize and display data** in a structured format. Within a `
`, you use `
` to define table rows and ` ` to define standard table cells. For example, here’s a simple table:
“`html
Header 1 Header 2 Data 1 Data 2 “`
In this example, `
` is used to create header cells, which are typically styled in bold and centered by default. Standard cells are created using ` `. To ensure your tables are accessible, it’s important to use proper headers so screen readers can interpret the table structure correctly. Although tables are excellent for organizing data, avoid using them for layout purposes. Instead, rely on CSS grid or flexbox for layouts. This approach not only keeps your HTML cleaner but also enhances the accessibility and responsiveness of your web pages.
Remember, tables can be **styled with CSS** to make them visually appealing and easier to read. For instance, you can add borders, padding, and background colors to your table elements.
## 17. Using
, , and for Table Rows and Cells In HTML, tables are structured using several key elements. The `
` tag is used to **define a table row**. Within each row, you can use the ` ` tag to group the body rows and the ` ` tag to group footer rows. This helps in organizing the table structure and can also enhance accessibility.` tag to define standard table cells and the ` ` tag to **define header cells**. Header cells are usually bold and centered by default, providing a clear distinction from regular cells. To **group header rows**, use the `
` tag. Similarly, use the `Header cells can span multiple columns using the `colspan` attribute or multiple rows using the `rowspan` attribute. This allows for more complex table layouts and better data presentation.
Styling table rows and cells with CSS can significantly improve the readability and appearance of your tables. It’s also crucial to ensure your table structure is accessible for screen readers by using appropriate HTML tags and attributes.
Here’s a simple example of a table structure:
“`html
Header 1 Header 2 Data 1 Data 2 Footer 1 Footer 2 “`
Tag Description Defines a table row. Defines a standard table cell. Defines a header cell. Groups header rows. Groups body rows. Groups footer rows. colspan Header cells can span multiple columns. rowspan Header cells can span multiple rows. CSS Style table rows and cells with CSS. Accessibility Ensure table structure is accessible for screen readers. ## 18. Adding Forms with
- tags to maintain proper HTML structure. This helps in keeping your code clean and ensures that screen readers can interpret the lists correctly, aiding accessibility.
Overall, using
- tags effectively can make your content more organized and easier to understand for all users.
- (ordered list) tags. Each
- represents a single item within the list.
Lists are a great way to organize content and improve readability. HTML provides two primary types of lists: **un**ordered lists**** and ordered lists.
An unordered list is created using the `
- ` tag, and it displays items with bullet points. On the other hand, an ordered list is created using the `
- ` tag, and it displays items with numbers.
Each item within these lists is defined using the `
- ` tag. You can **nest lists** within other lists to create sublists, which helps in organizing content hierarchically.