HTML Basics: Tags, Attributes, and Structure
HTML Elements and Tag Names
Tag names communicate what the browser should render. For example, the p tag corresponds to a paragraph element. An <hr> creates a horizontal line used to separate content; its thickness, color, and style can be controlled later with CSS. The root element of every HTML document is <html>, which contains the rest of the content and is closed on the last line. Modern HTML provides roughly different tags, but only a few are needed to start.
Attributes and Basic Syntax
Attributes provide additional information about an element and appear inside the opening tag after the tag name, separated by spaces. Examples include src for images and alt for alternative text. The general syntax is name="value". Attributes may be required for proper rendering in some cases. For instance, an image needs the src attribute to locate the image file, and often an alt attribute for accessibility.
The Image Element and Its Attributes
The <img> element is self-closing (a void element): it starts with <img ...> and does not have a separate closing tag in HTML. Some syntax allows a trailing slash (<img ... />), but both forms are interpreted the same in HTML. The src attribute specifies the image URL to display. The alt attribute provides text describing the image for accessibility and when the image cannot be loaded.
Document Structure: head, body, and Title
An HTML document is organized into a head and a body. The head contains metadata the browser uses to render the page, while the body contains the visible content. The title element, which resides in the head, sets the browser tab title. The order of elements (head first, then body) typically reflects how content is rendered and organized.
Exploring Attributes and References
Attributes can be explored by their names to see which elements support them and what they do. References and examples in the material show how attributes extend element behavior. When you save changes in the editor, you may see the layout update as attributes are added or adjusted.
Quick Note on CSS (Preview)
Cascading Style Sheets (CSS) will control presentation details such as element size, color, borders, and line styles. These visual properties are separate from the HTML structure and are introduced to customize the look of the page.