HTML Core Concepts

With the basic structure in place, let's look closer at the core components you'll use to build the content of your HTML documents: elements, tags, attributes, nesting rules, and comments. Understanding these concepts is crucial for writing valid and effective HTML.

Elements and Tags

As mentioned earlier, HTML documents are constructed from HTML elements. You define these elements using tags.

• Tags are markers used to structure content. Most elements use an opening tag (e.g., <p>) and a closing tag ( e.g., </p>). The content goes between these tags.
• An element typically refers to the complete structure: the opening tag, the content, and the closing tag.

<p>This is the content of the paragraph.</p>

Elements in HTML generally fall into two main display categories:

Block-level Elements

• These elements typically start on a new line in the browser window.
• They usually occupy the full width available to them, stretching from the left margin to the right margin of their container.
• Common examples include headings (<h1> to <h6>), paragraphs (<p>), divisions (<div>), lists (<ul>, <ol>), list items (<li>), and forms (<form>).

<h1>Main Heading</h1>
<p>This is a paragraph of text.</p>
<div>This is a content division.</div>

Inline Elements

• These elements appear within the flow of the text; they do not start on a new line.
• They only occupy as much width as their content requires.
• They are typically used to format text or define parts of a sentence/phrase.
• Common examples include links (<a>), emphasized text (<em>), strongly important text (<strong>), images ( <img>), and generic inline containers (<span>).

<p>
  This paragraph contains an <a>inline link</a>,
  some <strong>strong text</strong>, and an <em>emphasized word</em>.
  All appear within the same line.
</p>

Empty (Void) Elements

Some elements don't enclose content because they represent a self-contained item or instruction. These are called * empty* or void elements. They only have an opening tag and do not use a closing tag in HTML5.

• Common examples: <br> (line break), <hr> (thematic break/horizontal rule), <img> (image), <input> (form input), <link> (resource link), <meta> (metadata).

<p>This line will break here.<br>And continue on the next line.</p>
<hr> <img src="image.jpg" alt="Description">

Attributes

Attributes provide additional information about an HTML element or modify its default behavior. They are always included in the opening tag.

Syntax

Attributes are specified as name="value" pairs:

• name: The name of the property you want to set (e.g., href, src, id, class).
• value: The value or setting for that property, enclosed in quotation marks (double quotes " are most common, but single quotes ' are also valid).

<a href="https://example.com">A link with an href attribute</a>
<img src="logo.png" alt="Company Logo">

While HTML5 is sometimes flexible with unquoted attribute values under certain conditions, it's strongly recommended to always quote your attribute values for clarity and consistency.

Global Attributes

Some attributes are considered global, meaning they can be applied to virtually any HTML element. Here are some of the most common and important global attributes:

• id: Assigns a unique identifier to an element within the page. This ID must be unique within the entire HTML document. It's often used for CSS styling (targeting a specific element) and JavaScript manipulation, as well as creating page anchors.

  <div id="main-content">...</div>

• class: Assigns one or more class names to an element. Unlike id, multiple elements can share the same class name, and an element can have multiple classes (separated by spaces). Classes are heavily used for CSS styling and JavaScript selection (targeting groups of elements).

  <p class="highlight important">This paragraph has two classes.</p>

• style: Allows you to apply CSS styles directly to an element (inline styles). While functional, it's generally * not recommended* for significant styling, as it mixes presentation with structure. Using external CSS files with class or id selectors is preferred for maintainability.

  <p style="color: blue; margin-top: 10px;">Inline styled paragraph.</p>

• title: Provides advisory text about an element or its content. Browsers typically display this text as a tooltip when the user hovers over the element.

  <button title="Click to save your changes">Save</button>

• lang: Specifies the language of the element's content. Useful for accessibility tools and search engines. It can be used on specific elements if their content language differs from the main document language declared in the <html> tag.

  <p>Here is a quote in French: <q lang="fr">Bonjour le monde!</q></p>

• hidden: A boolean attribute indicating that the element is not yet, or is no longer, relevant. Browsers will not render elements with the hidden attribute. JavaScript can be used to toggle this attribute.

  <div hidden>This content is hidden.</div>

• tabindex: Controls whether an element is focusable via keyboard navigation (e.g., using the Tab key) and its relative order in the tabbing sequence.
• data-*: Allows you to store custom data private to the page or application, which can be easily accessed by JavaScript. The attribute name must start with data- followed by the custom name (e.g., data-user-id).

  <article data-post-id="123" data-category="news">...</article>

Element-Specific Attributes

Most attributes are designed to work only with specific elements or groups of elements. For example:

• href is primarily used with <a> (links) and <link> (resource links).
• src (source) is used with <img>, <audio>, <video>, <script>, <iframe>.
• alt (alternative text) is used with <img> and <input type="image">.
• type is used with <input>, <button>, <script>, <style>, <link>.
• action and method are used with <form>.

We will cover these specific attributes when discussing the relevant HTML elements in later sections.

Nesting Elements

HTML allows you to place elements inside other elements. This is called nesting. Proper nesting is essential for creating valid and well-structured HTML.

The rule is simple: An element opened inside another element must be closed before the outer element is closed.

Correct Nesting:

<div>
  <p>
    This paragraph is nested inside the div.
    <strong>Even deeper nesting!</strong>
  </p>
</div>

Incorrect Nesting:

<p>
  Here is some <strong>bold text that starts...
</p>
...and ends after the paragraph is closed.</strong>

Browsers often try to correct poorly nested HTML, but the results can be unpredictable. Always ensure your tags are nested correctly like matching pairs of parentheses or brackets.

Generally, block-level elements can contain other block-level elements or inline elements. Inline elements should typically only contain text or other inline elements. While there are nuances (e.g., an <a> tag, though inline, can wrap block elements in HTML5), sticking to this general rule helps create logical structures.

HTML Comments

You can add comments to your HTML code to leave notes, explanations, or reminders for yourself or other developers. Comments are ignored by the browser and are not displayed on the web page.

HTML comments start with <!-- and end with -->.

<!-- This is a comment. -->

Important: While comments are not displayed on the page, they are visible to anyone who views the page source code (usually via right-click > View Page Source in the browser). Therefore, do not put sensitive information inside HTML comments.