Basic Structure
- `<!DOCTYPE html>`: Defines the document type and version of HTML.
- `<html>`: The root element of an HTML document.
- `<head>`: Contains meta-information about the HTML document.
- `<title>`: Sets the title of the document.
- `<body>`: Contains the content of the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph.</p>
</body>
</html>
Text Formatting
- `<h1> to <h6>`: Header tags, `<h1>` being the largest and `<h6>` the smallest.
- `<p>`: Defines a paragraph.
- `<br>`: Inserts a single line break.
- `<hr>`: Creates a horizontal rule (line).
- `<strong>`: Defines important text.
- `<em>`: Emphasizes text.
- `<b>`: Makes text bold.
- `<i>`: Makes text italic.
<h1>This is a Heading 1</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph with a <strong>bold</strong> word and an <em>italic</em> word.</p>
<hr>
<p>This is a paragraph with a line break.<br>Here is the next line.</p>
Links and Images
- `<a>`: Defines a hyperlink.
- `<img>`: Embeds an image.
<a href="https://www.example.com">Visit Example.com</a>
<img src="image.jpg" alt="Description of Image">
Lists
- `<ul>`: Unordered list.
- `<ol>`: Ordered list.
- `<li>`: List item.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Tables
- `<table>`: Defines a table.
- `<tr>`: Table row.
- `<td>`: Table cell.
- `<th>`: Table header cell.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Forms
- `<form>`: Defines an HTML form.
- `<input>`: Defines an input control.
- `<textarea>`: Defines a multiline input control (text area).
- `<button>`: Defines a clickable button.
- `<label>`: Defines a label for an input element.
- `<select>`: Defines a dropdown list.
- `<option>`: Defines an option in a dropdown list.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<br>
<button type="submit">Submit</button>
</form>
Semantic Elements
- `<header>`: Defines a header for a document or section.
- `<nav>`: Defines navigation links.
- `<section>`: Defines a section in a document.
- `<article>`: Defines an independent, self-contained content.
- `<aside>`: Defines content aside from the main content (like a sidebar).
- `<footer>`: Defines a footer for a document or section.
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>About Us</h2>
<p>This is the about section.</p>
</section>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
</ul>
</aside>
<footer>
<p>© 2023 My Website</p>
</footer>
Media Elements
- `<audio>`: Embeds audio content.
- `<video>`: Embeds video content.
- `<source>`: Specifies multiple media resources for `<audio>` and `<video>`.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Document Metadata
- `<meta>`: Provides metadata about the HTML document.
- `<link>`: Defines the relationship between a document and an external resource.
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<link rel="stylesheet" href="styles.css">
<title>My HTML Page</title>
</head>