HTML HyperText Markup Language

HTML is the standard markup language used to create and design the structure of web pages. It defines the content and structure of a web document using a series of elements or tags. HTML is the foundation of every website and serves as the skeleton that other technologies (like CSS and JavaScript) build upon.

Key Concepts:

Markup Language: HTML is considered a markup language because it defines how content should be structured and displayed, rather than describing how it behaves (that’s the job of JavaScript).
Tags/Elements: HTML uses tags to define different parts of a webpage. Each tag provides instructions about how the content should be displayed, like headings, paragraphs, images, tables, links, etc.

Structure of an HTML Document:

An HTML document has a basic structure that looks like this:

htmlCopy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on the webpage.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>

Key Parts of an HTML Document:

<!DOCTYPE html>: Declares the document type and version of HTML. In modern web development, <!DOCTYPE html> indicates that the document is using HTML5, the latest version of HTML.
<html>: The root element that wraps the entire HTML document. The lang="en" attribute specifies that the content is in English.
<head>: Contains meta-information about the HTML document that isn’t visible on the page, such as the title, character encoding, and links to stylesheets or scripts.
- <meta charset="UTF-8">: Defines the character encoding for the document (UTF-8 is the most common).
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures that the page is mobile-friendly and scales properly on different screen sizes.
- <title>: Specifies the title of the webpage that appears in the browser tab.
<body>: Contains the visible content of the webpage. Everything that appears on the webpage (text, images, links, etc.) is placed within the <body> tags.
- <h1>: A heading element. HTML uses <h1> to <h6> tags to define headings, with <h1> being the largest and most important.
- <p>: A paragraph element. It’s used to group text into separate paragraphs.
- <a>: An anchor tag used to create hyperlinks. The href attribute specifies the URL to which the link points.

Common HTML Tags:

Text Elements:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> – Heading tags used to define headings.
- <p> – Paragraph tag to define a block of text.
- <b> – Bold text (use <strong> for semantic boldness).
- <i> – Italic text (use <em> for semantic emphasis).
Links:
- <a href="URL">Link text</a> – Anchor tag for hyperlinks.
Images:
- <img src="image.jpg" alt="Image description"> – Image tag for embedding images on the page.
Lists:
- <ul> – Unordered (bulleted) list.
- <ol> – Ordered (numbered) list.
- <li> – List item.
Tables:
- <table> – Defines a table.
- <tr> – Table row.
- <th> – Table header.
- <td> – Table data (cell).
Forms:
- <form> – Form tag to collect user input.
- <input> – Input field for text, radio buttons, checkboxes, etc.
- <button> – Button tag for user interactions.

Example of a Simple Webpage in HTML:

htmlCopy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a simple webpage created using HTML.</p>
    
    <h2>Here's a List of My Favorite Fruits:</h2>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
    
    <h2>Check out this link:</h2>
    <a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>

How HTML Works:

When you type HTML code and open it in a web browser, the browser interprets the tags to display the content.
The browser knows to display text within <h1> as a large heading, the text inside <p> as a paragraph, and any content inside <a> as a clickable link.

Importance of HTML:

Foundation of the Web: Every webpage, no matter how complex, is built using HTML. It is the basic structure that forms the framework for websites.
SEO: Proper use of HTML tags helps search engines understand the content and context of your page, which is crucial for search engine optimization (SEO).
Accessibility: HTML elements can be used to ensure web content is accessible, especially for screen readers, by using semantic HTML (correctly structured tags).

Encyclopedia