HTML is the standard markup language used to create the structure and content of web pages. It consists of a series of elements that define the different parts of a webpage. Here are the basics:
1. HTML Document Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html><!DOCTYPE html>: Declaration of HTML5 document type.<html>: Root element of an HTML page.<head>: Contains metadata like character set, viewport settings, and page title.<meta>: Provides additional information about the document.<title>: Sets the title of the webpage.<body>: Contains the content of the webpage.
2. HTML Elements:
- Elements are composed of tags, attributes, and content.
- Tags: Enclosed in angle brackets (
< >), they define the beginning and end of an element. - Attributes: Provide additional information about an element and are always included in the opening tag.
3. Common HTML Elements:
- Headings:
<h1>Heading 1</h1> <h2>Heading 2</h2> <!-- ... --> <h6>Heading 6</h6> - Paragraphs:
<p>This is a paragraph.</p> - Links:
<a href="https://example.com">Visit Example</a> - Lists:
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> </ol> - Images:
<img src="image.jpg" alt="Description"> - Forms:
<form action="/submit" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <input type="submit" value="Submit"> </form> - Semantic Elements:
<header> <h1>Website Header</h1> </header> <article> <h2>Article Title</h2> <p>Article content goes here.</p> </article> <footer> <p>Copyright © 2023</p> </footer>
4. Attributes:
- Class and ID:
<p class="highlight">This paragraph has a class.</p> <div id="main-content">This is the main content.</div> - Style:
<p style="color: red;">This paragraph is red.</p> - Href (for Links):
<a href="#section2">Jump to Section 2</a> - Src (for Images):
html <img src="image.jpg" alt="Description">
5. HTML Comments:
- Comments are ignored by browsers and can be used for adding notes within the code.
html ¨K30K
6. Validation:
- Always ensure your HTML code is well-formed and follows the proper structure.
Conclusion:
Understanding the basics of HTML is fundamental for anyone involved in web development. It serves as the foundation for creating content-rich and structured web pages. As you progress, you’ll explore more advanced HTML features and its integration with other technologies for building dynamic and interactive web applications.