Introduction to HTML
HTML (Hypertext Markup Language) is the standard language for creating web pages. It describes the structure of web pages using markup.
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>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
-
<!DOCTYPE html>declares the document type and version. -
<html>is the root element. -
<head>contains meta-information about the HTML document. -
<meta charset="UTF-8">sets the character encoding. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">ensures proper rendering on various devices. -
<title>sets the title of the web page. -
<body>contains the content of the HTML document. -
<h1>to<h6>are heading tags. -
<p>is a paragraph tag.
HTML Elements and Attributes
HTML elements are the building blocks of a webpage, and they can have attributes.
<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
-
<a>is an anchor (link) element. -
hrefis an attribute specifying the link's destination. -
target="_blank"opens the link in a new tab. -
<img>is an image element. -
srcis an attribute specifying the image source. -
altprovides alternative text for accessibility.
Lists and Tables
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
-
<ul>creates an unordered list. -
<ol>creates an ordered list. -
<li>is a list item. -
<table>creates a table. -
<tr>defines a table row. -
<th>defines a table header cell. -
<td>defines a table data cell.
Forms and Input Elements
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Submit">
</form>
-
<form>creates a form. -
actionspecifies where the form data should be sent. -
methoddefines the HTTP method (e.g., "post"). -
<label>creates a label for an input field. -
forassociates the label with the input field. -
<input>is an input element. -
typedefines the input type (e.g., "text", "password"). -
idprovides a unique identifier. -
namespecifies the name for form submission. -
requiredmakes the input mandatory. -
<submit>is a submit button.
HTML5 Semantic Elements
HTML5 introduced semantic elements for better page structure.
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<h2>Article Title</h2>
<p>Content goes here.</p>
</article>
<article>
<h2>Another Article</h2>
<p>More content.</p>
</article>
</section>
<footer>
<p>© 2024 My Website</p>
</footer>
-
<header>defines a header for a section or a page. -
<nav>represents a navigation menu. -
<section>groups related content. -
<article>defines independent, self-contained content. -
<footer>contains footer information.
Conclusion
I Hope this course provides a foundational understanding of HTML and HTML5. Practice by creating your own HTML pages in Visual Studio Code, exploring additional elements, and diving into CSS for styling will be our next watch out>> :). Happy coding!
Top comments (0)