Skip to main content

HTML Markup

Basic Structure of an HTML Document​

HTML, or Hypertext Markup Language, is the standard language used to create web pages. An HTML document typically starts with a <!DOCTYPE html> declaration, which defines the document type and version of HTML. This is followed by the <html> tag, which encloses the entire document. Inside the <html> tag, there are two main sections: the <head> and the <body>.

  • <!DOCTYPE html> Declares the document type and version.
  • <html> Root element of the HTML document.
  • <head> Contains meta-information about the document, such as the title, character set, styles, and links to external resources.
  • <body> Contains the content of the HTML document, including text, images, links, tables, forms, etc.

Here’s an example of a basic HTML document structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a sample HTML document.</p>
  </body>
</html>

To display reserved characters or special symbols in an HTML document, character entities are used. For example:

  • &lt; represents <
  • &gt; represents >
  • &amp; represents &
  • &quot; represents "
  • &apos; represents '

Text Formatting and Paragraphs​

  • <p> Defines a paragraph.
  • <br> Inserts a line break.
  • <strong> Marks text as important (bold by default).
  • <em> Emphasizes text (italic by default).
  • <u> Marks text with a non-textual annotation (underlined by default).
  • <h1> to <h6> Define headings from level 1 to 6.
  • <span> Used for inline formatting without adding any semantics.
<p>
  This is a <strong>bold</strong> paragraph with an <em>emphasized</em> word.
</p>

Links are created using the <a> tag.

  • href attribute specifies the URL of the linked page.

  • target attribute specifies where to open the linked document.

    • _self Default. Opens in the same window/tab.
    • _blank Opens in a new window/tab.
    • _parent Opens in the parent frame.
    • _top Opens in the full body of the window.

    Security Note: When using target="_blank", it is highly recommended to add rel="noopener noreferrer" to prevent a security vulnerability known as Reverse Tabnabbing, where the newly opened page can maliciously redirect the original page.

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer"
  >Visit Example</a
>

HTML Tables​

Tables are used to display tabular data. Key elements include:

  • <table> Defines the table.
  • <tr> Defines a table row.
  • <td> Defines a table cell.
  • <th> Defines a table header cell.
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Types of Inputs​

HTML forms can contain various input types, each suited for different kinds of data entry:

  • <input type="text"> Single-line text input.
  • <input type="password"> Password input.
  • <input type="email"> Email input.
  • <input type="number"> Numeric input.
  • <input type="date"> Date input.
  • <input type="radio"> Radio button.
  • <input type="checkbox"> Checkbox.
  • <input type="file"> File upload.
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Submit" />
</form>

Types of Buttons​

Buttons are used to trigger actions, typically within forms:

  • <input type="submit" /> A submit button that sends form data to a server.
  • <input type="reset" /> A reset button that resets form fields to their default values.
  • <button type="button"> A button that can be programmed with JavaScript to perform custom actions.
<button type="button" onclick="alert('Button clicked!')">Click Me</button>

Working with Forms​

Forms are used to collect user input and submit it to a server.

  • action attribute specifies where to send the form data.
  • method attribute specifies the HTTP method (GET or POST) to use when sending form data.
<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <button type="submit">Submit</button>
</form>

Adding Scripts​

Scripts, typically JavaScript, can be added to HTML documents to enhance interactivity and functionality.

src attribute can be used to include an external script file.

<script>
  function showAlert() {
    alert('Hello, World!');
  }
</script>
<button type="button" onclick="showAlert()">Show Alert</button>

Media Elements​

Media elements in HTML include images, audio, and video, which are used to embed media content into web pages.

<img src="image.jpg" alt="Sample Image" />
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video element.
</video>