WikiGalaxy
HTML Elements
Basic Structure of an HTML Document
DOCTYPE Declaration
The <!DOCTYPE html> declaration defines the document type and version of HTML. It ensures that the browser renders the page correctly.
HTML Element
The <html> element is the root element of an HTML page, containing all other elements.
Head Element
The <head> element contains meta-information about the document, such as its title and links to stylesheets.
Body Element
The <body> element contains the content of the HTML document, such as text, images, and other media.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Text Formatting Elements
Bold Text
The <strong> element is used to indicate strong importance, typically rendered in bold.
Italic Text
The <em> element is used to emphasize text, often displayed in italics.
Underlined Text
The <u> element represents text that should be stylistically different, such as underlined.
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <u>underlined</u> text.</p>
List Elements
Ordered List
The <ol> element is used to create an ordered list, where each list item is numbered.
Unordered List
The <ul> element is used to create an unordered list, where each item is marked with a bullet.
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
<li>Bullet item 1</li>
<li>Bullet item 2</li>
</ul>
Image and Link Elements
Image Element
The <img> element is used to embed images in an HTML page. It requires a src attribute to specify the image source.
Link Element
The <a> element is used to create hyperlinks, allowing users to navigate between pages.
<img src="image.jpg" alt="Description of image">
<a href="https://example.com">Visit Example</a>
Table Elements
Table Structure
The <table> element is used to create tables. It contains rows (<tr>) and cells (<td>).
Table Headers
The <th> element defines a header cell in a table, typically displayed in bold.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
</table>
Form Elements
Form Tag
The <form> element is used to create an HTML form for user input. It can contain various input elements.
Input Element
The <input> element is used to create interactive controls in a form, such as text fields and buttons.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Semantic Elements
Header Element
The <header> element represents introductory content, typically containing headings and navigation links.
Footer Element
The <footer> element represents the footer of a document or section, often containing metadata or links.
<header>
<h1>Welcome to My Website</h1>
</header>
<footer>
<p>© 2023 My Website</p>
</footer>
Media Elements
Video Element
The <video> element is used to embed video content in an HTML page, supporting multiple formats via the <source> element.
Audio Element
The <audio> element is used to embed sound content, supporting various audio formats.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML (HyperText Markup Language) is the foundation of web development, allowing developers to create structured and semantic web pages. In this chapter, we will explore HTML elements from beginner to advanced levels, focusing on syntax, attributes, and use cases. Each concept will be accompanied by code examples and explanations for clarity.
Headings (<h1> to <h6>)
Headings are used to define the titles and subtitles of a web page. They range from <h1> (highest importance) to <h6> (least importance).
<!DOCTYPE html>
<html>
<head>
<title>Headings Example</title>
</head>
<body>
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Detailed Heading</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>
</body>
</html>
Output:
Headings appear in decreasing font size from <h1> to <h6>.
Paragraphs (<p>)
Paragraphs are used to define blocks of text. They group sentences and ideas.
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is the first paragraph of the document.</p>
<p>This is another paragraph with more text.</p>
</body>
</html>
Output:
Paragraphs are displayed as blocks with spacing between them.
Nested Elements
HTML allows elements to be nested within each other for better structure.
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements</title>
</head>
<body>
<div>
<h1>Main Title</h1>
<p>This is a paragraph inside a div.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
Output:
Elements appear hierarchically based on their nesting.
Case Sensitivity
HTML is not case-sensitive, but it is best practice to use lowercase for consistency and compatibility.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Case Sensitivity</TITLE>
</HEAD>
<BODY>
<H1>Heading in Uppercase</H1>
<p>Paragraph in Lowercase</p>
</BODY>
</HTML>
Output:
The browser renders both uppercase and lowercase tags correctly.
Common Attributes
Attributes enhance the functionality of elements. Key attributes include:
id: Unique identifier for an element.
class: Specifies a class for styling.
style: Inline styling for elements.
<!DOCTYPE html>
<html>
<head>
<title>Attributes Example</title>
</head>
<body>
<p id="unique-paragraph" class="text-class" style="color: blue;">
This paragraph uses attributes.
</p>
</body>
</html>
Output:
The paragraph appears blue and can be styled using its id or class.
HTML elements provide the framework for creating structured, interactive, and visually appealing web pages.
