In Module 2 of our HTML course, we’ll delve into the fundamental building blocks of web development: Basic HTML Elements. These elements form the structure and content of a web page, and are essential for creating well-structured and visually appealing websites.
Headings
Headings are the titles of a web page, and are crucial for defining the hierarchy of content. HTML provides six levels of headings, ranging from <h1> to <h6>. The <h1> tag represents the most important heading, while <h6> represents the least important.Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
Syntax:
<h1-6>content</h1-6>
Paragraphs
Paragraphs are the meat of a web page's content. The <p> tag defines a paragraph of text, and is used to wrap text that forms a cohesive thought or idea.
Example:
<p>This is a paragraph of text.</p>
Syntax:
<p>content</p>
Links
Links are the connections between web pages. The <a> tag defines a hyperlink, which can point to another web page, an email address, or even a specific section within a web page.
Example:
<a href="(link unavailable)">Visit Example</a>
Syntax:
<a href="url" target="_blank">content</a>
Images
Images add visual appeal to a web page and help convey complex ideas. The <img> tag defines an image, and requires two essential attributes: src (source) and alt (alternative text).
Example:
<img src="image.jpg" alt="An image on the web page">
Syntax:
<img src="url" alt="text">
Lists
Lists are used to present information in a clear and concise manner. HTML provides two types of lists: unordered lists (<ul>) and ordered lists (<ol>). Unordered lists use bullet points, while ordered lists use numbers or letters.
Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Syntax:
<ul>
<li>content</li>
</ul>
<ol>
<li>content</li>
</ol>
Divisions
Divisions are used to group elements together for styling or layout purposes. The <div> tag defines a division, and is commonly used to wrap sections of content or apply CSS styles.
Example:
<div>
<h2>Section Heading</h2>
<p>This is a paragraph of text.</p>
</div>
Syntax:
<div>content</div>
Spans
Spans are similar to divisions, but are used for inline elements. The <span> tag defines a span, and is commonly used to apply CSS styles or highlight text.
Example:
<p>This is a paragraph of text with a <span style="color: red;">highlighted</span> word.</p>
Syntax:
<span>content</span>
Line Breaks
Line breaks are used to separate lines of text. The <br> tag defines a line break, and is commonly used in poems, addresses, or song lyrics.
Example:
<p>This is a line of text.<br>This is another line of text.</p>
Syntax:
<br>
Horizontal Rules
Horizontal rules are used to separate sections of content. The <hr> tag defines a horizontal rule, and is commonly used to divide content or add visual interest.
Example:
<hr>
Syntax:
<hr>
Conclusion
In this module, we've explored the basic HTML elements that make up the structure and content of a web page, along with examples and syntax. By mastering these elements, you'll be able to create well-structured and visually appealing web pages. Remember to follow best practices when working with basic HTML elements to ensure your web pages are accessible, readable, and maintainable.