Technology

Top HTML tags to get started in web design

HTML, which stands for HyperText Markup Language, is the standard language used to create web pages. Web pages are structured using a variety of HTML tags, each with a specific purpose. Here are some of the basic HTML tags:

1. **'<! DOCTYPE html>’**: This declaration defines the version of HTML you’re using. In HTML5 documents, ‘< is always used! DOCTYPE html>’ to indicate that you’re using the latest version of the HTML standard. Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your title here</title>
</head>
<body>
    <!-- Page content goes here  -->
</body>
</html>

2. **'<html>’**: This tag delimits the start and end of the HTML document. All content on the website is within these tags.

3. **'<head>’**: This section contains information about the document, such as the page title, links to CSS files, metadata, and scripts. The content within ‘<head>’ is not displayed directly on the website.

•4. **'<title>’**: Defines the title of the web page, which appears in the browser’s title bar or browser tabs when users visit the page.

5. **'<body>’**: This tag delimits the visible content of the web page. Everything you want users to see on the page (text, images, links, etc.) is placed inside the ‘<body>’ tags.

6. **'<h1>’, ‘<h2>’, ‘<h3>’, ‘<h4>’, ‘<h5>’, ‘<h6>’**: These tags are used to define headers of different levels. ‘<h1>’ is the most important header and ‘<h6>’ is the least important. Headings are used to structure and organize page content.

<h1>Level 1</h1>
<h2>Level 2</h2>
<h3>Level 3</h3>
<!-- ... up to h6 -->

7. **'<p>’**: Defines a paragraph of text. All text that is inside the ‘<p>’ tags will be displayed as a paragraph on the web page.

8. **'<a>’**: Create a link to another web page or online resource. The ‘href’ attribute within the ‘<to>’ tag specifies the URL to which the link should lead.

<a href="https://www.example.com">Link to Example.com</a>

9. **'<img>’**: Used to display images on the web page. The ‘src’ attribute specifies the source (URL) of the image.

<img src="imagen.jpg" alt="Image description">

10. **'<ul>’**, ‘<ol>’, ‘<li>’: These are used to create lists. ‘<ul>’ represents an unordered list (bullets), ‘<ol>’ represents an ordered list (numbers or letters), and ‘<li>’ represents each item in the list.

<ol>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ol>

11. **'<div>’**: It is a division tag that is used to organize and structure the content of the web page into blocks. Elements within ‘<div>’ tags can be stylized or manipulated as a group using CSS or JavaScript.

<div>
    <!-- Content grouped here  -->
</div>

<section>
    <!-- section of the page here  -->
</section>

12. **'<span>’**: Similar to ‘<div>’, but instead of blocking content, ‘<span>’ is used to apply specific styles or manipulations to individual parts of inline text.