HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides a way to structure content on the web, making it both human-readable and machine-readable. At the core of HTML are elements, which are the building blocks that make up a webpage.
An HTML element is defined by a start tag, some content, and an end tag. For example:
1<p>This is a paragraph.</p>
In this example, <p> is the start tag, This is a paragraph. is the content, and </p> is the end tag.
HTML elements are categorized into different types based on their purpose. Some common categories include:
<html>, <head>, <body>.<p>, <h1> to <h6>, <a>.<ul>, <ol>, <li>.<img>, <video>.<input>, <textarea>, <button>.Each HTML element can have attributes that provide additional information about the element. Attributes are added within the start tag of an element and consist of a name-value pair separated by an equals sign (=). For example:
1<a href="https://www.example.com">Visit Example</a>
In this example, href is an attribute that specifies the URL the link points to.
Let's look at some practical examples of HTML elements and their attributes.
Headings are used to define titles within a webpage. There are six levels of headings, from <h1> (the highest level) to <h6> (the lowest level).
1<h1>This is an H1 Heading</h1>2<h2>This is an H2 Heading</h2>3<h3>This is an H3 Heading</h3>4<h4>This is an H4 Heading</h4>5<h5>This is an H5 Heading</h5>6<h6>This is an H6 Heading</h6>
Paragraphs are defined using the <p> element.
1<p>This is a paragraph of text. It can contain multiple sentences and will be displayed as a block-level element.</p>
Links are created using the <a> (anchor) element. The href attribute specifies the URL the link points to.
1<a href="https://www.example.com">Visit Example</a>
Images are embedded using the <img> element. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image.
1<img src="path/to/image.jpg" alt="Description of the image">
Lists can be either ordered or unordered. Ordered lists use the <ol> element, and unordered lists use the <ul> element. Each list item is defined using the <li> element.
1<ul>2<li>Item 1</li>3<li>Item 2</li>4<li>Item 3</li>5</ul>67<ol>8<li>First Item</li>9<li>Second Item</li>10<li>Third Item</li>11</ol>
Now that you have a good understanding of HTML elements and their attributes, the next step is to learn about CSS selectors. CSS selectors allow you to target specific HTML elements and apply styles to them, making your web pages visually appealing.
Stay tuned for more tutorials on CSS Selectors!
Info
Remember, practice makes perfect! Try creating your own HTML documents with different elements and attributes to reinforce what you've learned.