HTML Elements

HTML Elements

HTML (HyperText Markup Language) is the standard language for creating web pages. It consists of a series of elements that define the structure and content of a web page. Here is an overview of some common HTML elements and their uses:

Basic Structure

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <!-- Content goes here -->

</body>
</html>
  • <!DOCTYPE html>: Declares the document type and version of HTML.
  • <html>: The root element of an HTML page.
  • <head>: Contains meta-information about the HTML document (e.g., title, links to stylesheets).
  • <title>: Sets the title of the web page (shown in the browser’s title bar or tab).
  • <body>: Contains the content of the HTML document.

Text Content

  • <h1> to <h6>: Headings, where <h1> is the highest (most important) level and <h6> is the lowest.
  • <p>: Paragraph.
  • <br>: Line break.
  • <hr>: Horizontal rule (a thematic break in content).
  • <strong>: Bold text.
  • <em>: Italicized text.
  • <small>: Smaller text.
  • <blockquote>: A section quoted from another source.

Lists

  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.

Links and Images

  • <a>: Anchor (hyperlink).
  <a href="https://www.example.com">Visit Example.com</a>
  • <img>: Image.
  <img src="image.jpg" alt="Description of image">

Tables

  • <table>: Table.
  • <tr>: Table row.
  • <th>: Table header cell.
  • <td>: Table data cell.

Forms

  • <form>: Form element.
  • <input>: Input field.
  • <textarea>: Text area (multi-line text input).
  • <button>: Button.
  • <label>: Label for form elements.
  • <select>: Drop-down list.
  • <option>: Option in a drop-down list.

Semantic Elements

  • <header>: Header section.
  • <nav>: Navigation links.
  • <section>: Section of content.
  • <article>: Independent, self-contained content.
  • <aside>: Content aside from the main content (like a sidebar).
  • <footer>: Footer section.

Multimedia

  • <audio>: Audio content.
  <audio controls>
      <source src="audio.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  • <video>: Video content.
  <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      Your browser does not support the video tag.
  </video>

Scripting

  • <script>: JavaScript.
  <script src="script.js"></script>

Inline and Block Elements

  • Inline elements: Do not start on a new line and only take up as much width as necessary (e.g., <span>, <a>, <img>, <strong>, <em>).
  • Block elements: Start on a new line and take up the full width available (e.g., <div>, <p>, <h1> to <h6>, <header>, <footer>).

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *