Last modified: October 13, 2024

This article is written in: 🇺🇸

HTML

Key Points about HTML

Skills Every HTML Developer Should Have

  1. A solid grasp of basic tags is essential, including tags like <h1> for headers, <p> for paragraphs, <ul> for lists, and others that define page content.
  2. Understanding the document structure is crucial, as an HTML document is organized with a <head> for metadata, a <body> for content, and commonly includes <header> and <footer> sections.
  3. Familiarity with forms and inputs is important, as they allow user interactions. Tags like <form>, <input>, <textarea>, and <button> enable data collection on websites.
  4. Knowing how to embed media such as images, videos, and audio into web pages enriches the user experience. Tags like <img>, <video>, and <audio> facilitate this process.
  5. The ability to link content is key to web navigation. The <a> tag is used to create hyperlinks to other pages or external resources, providing essential connectivity.
  6. Responsive design skills are necessary, as HTML developers need to ensure that web content is accessible and looks good across various devices and screen sizes.
  7. It’s useful to reference resources like MDN (Mozilla Developer Network) for up-to-date documentation, examples, and best practices for writing effective HTML code.
  8. A valuable skill is the ability to recreate web pages using HTML, ensuring that the developer can accurately mirror design specifications and build functional, accessible content layouts.

Document Structure

The HTML document structure provides a standardized way to structure content on the web. Adhering to this structure ensures browser compatibility and proper rendering of web pages.

Below is a foundational structure of an HTML document:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Sample Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

The <head> section of an HTML document contains metadata (information about the document) and links to resources like stylesheets, scripts, and favicons. While not directly displayed to users, its contents influence how browsers present the page and how search engines interpret it.

The Document's Title

The <title> tag defines the title of the document, which appears in the browser's title bar or tab.

Here is an example:

<title>My Awesome Website</title>

Metadata Information

<meta> tags provide additional details about the document, influencing its behavior on devices and its appearance in search results.

  1. Character Encoding: The charset attribute defines the character encoding for the webpage. This ensures characters display correctly across all browsers.

html
<meta charset="utf-8"/>

  1. Viewport: This tag optimizes display settings for mobile devices, ensuring a responsive design. It's essential for modern web development to accommodate varying screen sizes.

<meta content="width=device-width, initial-scale=1.0" name="viewport"/>

  1. Description: Provides a brief summary of the page's content. This is often displayed in search engine results, affecting click-through rates.

<meta content="Discover the latest updates and features of My Awesome Website." name="description"/>

  1. Keywords: While modern search engines don't heavily rely on this metadata for ranking, it can still be included for potential SEO benefits.

<meta content="innovation, tech, design" name="keywords"/>

  1. Favicon: The favicon (short for "favorite icon") represents the website in browser tabs, bookmarks, and other UI elements.

<link href="favicon.ico" rel="icon" type="image/x-icon"/>

If the website does not provide an explicit favicon link in the <head>, browsers default to searching for a file named favicon.ico in the website's root directory.

Tags and Attributes

At the core of HTML lies the concept of tags and attributes. These elements enable the creation of structured documents and provide a way to describe the content's presentation and semantic meaning.

While a vast number of tags are defined in the HTML specification, only a subset is frequently used in day-to-day web development. For a comprehensive list of all available tags, refer to the MDN's HTML element reference.

How Tags Work

HTML tags represent elements and come in pairs: an opening tag and a closing tag. The content of the element resides between these tags. Some tags, called void elements (like <img> and <br>), don't have a closing tag.

<elementname> Content of the element </elementname>

Nesting Tags

It's common in HTML to nest one tag within another, establishing a parent-child relationship between the elements.

<parentelement>
<childelement> Content inside child element </childelement>
</parentelement>

This hierarchical structure forms the basis for the Document Object Model (DOM), a tree-like representation of the content.

Attributes

Attributes provide additional information about an element and are always specified in the opening tag. They come in name/value pairs like this: name="value".

For instance, the tag often uses the href attribute to specify the link destination:

<a href="https://www.example.com">Visit Example</a>

In this example, href is the attribute name, and https://www.example.com is its value.

Void (Self-closing) Elements in HTML

Void elements, also known as self-closing elements, are unique HTML tags that don't require a closing tag. While they don't wrap around content, they can have attributes which give them functionality or provide additional context.

Characteristics

Examples

<img alt="a cute puppy" src="example.jpg"/>

This is some text.<br/>And this is a new line.

<input name="username" placeholder="Enter your username" type="text"/>

<hr/>

Grouping elements

In HTML, div and span are two of the most versatile elements used to control and group content for various purposes, especially when combined with CSS.

Understanding div

Understanding span

Examples:

<div class="section">
This is a paragraph within a div.
</div>

html
This is a <span class="highlight">highlighted</span> text.

<div>
<span>This is a span inside a div.</span>
</div>

However, since div is a block-level element and span is an inline-level element, placing a div inside a span is considered incorrect and goes against HTML specifications:

<!-- Incorrect Usage -->
<span> This is a <div>This is a div</div> span.</span>

Readonly elements

Some elements are only used for displaying information and users can't interact with them. We can call them readonly elements.

Headers and paragraphs

Basic elements that are used to display text in a document are headers and paragraphs. Headers are used to display titles and paragraphs are used to display large amounts of text. There are many levels of headers, from H1 to H6.

Example:

<h1>This is a header</h1>
This is a paragraph

Links are used to link to other pages. When clicked, the user is taken to the linked page.

Example:

The link below will take the user to the Wikipedia website.

<a href="https://en.wikipedia.org/wiki/HTML">Wikipedia</a>

This link will trigger email client to send an email to the address foo@bar.com:

<a href="mailto:foo@bar.com">send e-mail</a>

You may also connect links to files stored on the server. Users may download the file by clicking on the link: 

<a download="" href="report.txt">report</a>

Lists

To display a list of items, we use lists. There are two types of lists: ordered and unordered.

An example of unordered list:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Short summary:

The following tags are used to create lists:

Element Description Usage Example
<ul> Unordered List Creates a bulleted list <ul><li>Item</li></ul>
<ol> Ordered List Creates a numbered list <ol><li>Item</li></ol>
<li> List Item Represents an item within a list <ul><li>First item</li></ul>

Tables

Tables are used to display data using rows and columns of cells.

Example:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>

Short summary:

The following tags are used to create tables:

Element Description Usage Example
<table> Table Defines a table <table><tr><td>Data</td></tr></table>
<tr> Table Row Defines a row within a table <tr><td>Data</td></tr>
<th> Table Header Defines a header cell in a table row <tr><th>Header</th></tr>
<td> Table Cell Defines a standard cell within a row <tr><td>Data</td></tr>

Interactive elements

As opposed to readonly elements, there are some elements that users can interact with and trigger actions based on their state.

Buttons

Buttons are used to trigger actions. They are used to submit forms, to open links, and to trigger media playback.

A simple button:

<button type="submit">press me!</button>

Whenever the button is clicked, the event handler will be triggered.

Short summary:

There are following types of buttons:

Element Description Usage Example
<button> Default Button Creates a clickable button <button>Click Me</button>
<input type="submit"> Submit Button Submits form data to a server <input type="submit" value="Submit">
<input type="reset"> Reset Button Resets all fields in a form to default values <input type="reset" value="Reset">

Input

Input is used to collect data from the user.

A simple example with placeholder text:

<input placeholder="enter your name" type="text"/>

A more complex example with a label and validation:

<label for="name">Name</label>
<input id="name" maxlength="10" minlength="3" name="name" required="" type="text"/>

Short summary:

Input can be one of the many types. The default type is text. Other types include:

Element Description Usage Example
<input type="text"> Text Input Creates a single-line text input field <input type="text" placeholder="Name">
<input type="password"> Password Input Creates a field for entering passwords <input type="password" placeholder="Password">
<input type="email"> Email Input Creates a field for email addresses <input type="email" placeholder="Email">
<input type="number"> Number Input Creates a field for numeric input <input type="number" min="0" max="10">
<input type="radio"> Radio Button Creates a radio button for selection <input type="radio" name="gender" value="male">
<input type="checkbox"> Checkbox Creates a checkbox for selection <input type="checkbox" name="agree">
<input type="search"> Search Input Creates a search field <input type="search" placeholder="Search...">

Input attributes include:

Attribute Description Usage Example
placeholder Text that appears when input is empty Provides a hint inside the input field <input type="text" placeholder="Enter name">
autofocus Input is focused when the page loads Sets the initial focus to this input <input type="text" autofocus>
disabled Input is disabled Prevents input and makes it non-editable <input type="text" disabled>
readonly Input is readonly Makes the input non-editable but selectable <input type="text" readonly>
size Size of the input field Defines the width of the input (in characters) <input type="text" size="20">
list List of options for the input Links input to a <datalist> for suggested options <input type="text" list="options"><datalist id="options"><option value="Option1"><option value="Option2"></datalist>

Possible values for the validation attribute:

Attribute Description Usage Example
minlength Minimum length of the input Specifies the minimum number of characters <input type="text" minlength="5">
maxlength Maximum length of the input Specifies the maximum number of characters <input type="text" maxlength="10">
required Input is required Makes the input mandatory before submission <input type="text" required>

Forms

Forms are way of grouping many inputs in a signle structure.

Let's create a simple form:

<form>
<label for="name">Name</label>
<input id="name" name="name" type="text"/>
<button type="submit">Submit</button>
</form>

In this example, there is a single input field with a label. The label is used to describe the input. The input is used to collect data from the user. The button is used to submit the form.

Short summary:

Element Description Usage Example
<form> Form container Wraps form elements and allows data submission <form action="/submit" method="post">...</form>
<label> Label Provides a label for an input, aiding accessibility <label for="username">Username:</label>
<input> Input field Allows various types of user input, such as text, email, and password <input type="text" id="username">
<button> Button Creates a clickable button for form actions, such as submit or reset <button type="submit">Submit</button>

Text area

Inputs are great, but they are displayed as a single line. Sometimes we need to collect more than one line of text and then we use text areas.

Let's take a look at the following example:

<textarea cols="50" name="description" rows="5">
  Enter your description here
</textarea>

In the example above, we have a text area with a name description which consists of 5 rows and 50 columns.

Style

For styling elements, we generally use CSS. There are however some ways to style text using only HTML.

Text formatting

Text formatting includes making text bold, italic, underlined, and strikethrough.

The following example shows how to make text bold:

This is <b>bold</b> text.

Short summary:

Element Description Usage Example
b or strong Bold Text Emphasizes text by making it bold b Bold Text b, strong Bold Text strong
i or em Italic Text Emphasizes text by making it italicized i Italic Text i, em Italic Text em
u Underline Underlines the text u Underlined Text u
s Strikethrough Adds a strikethrough effect to the text s Strikethrough Text s

Special characters

There are some special characters that should be escaped in HTML in order to be correctly displayed in the browser.

Example:

This is <b>bold</b> text.

Short summary:

The following characters should always be escaped:

Character Entity Description Usage Example
& Ampersand Escaped by using &amp; &amp;
&lt; Less Than Escaped by using &amp;lt; &amp;lt;
&gt; Greater Than Escaped by using &amp;gt; &amp;gt;
&quot; Double Quote Escaped by using &amp;quot; &amp;quot;

Whitespace

Any sequence of whitespace characters (space, line break, tab) is treated as a single space in HTML.

Media

We may use three types of media:

Image

Images are specified using the img tag.

Let's take a look at the following example:

<img alt="A cute cat" src="https://placekitten.com/g/200/300" srcset="https://placekitten.com/g/400/600 400w, https://placekitten.com/g/600/900 600w, https://placekitten.com/g/800/1200 800w"/>

We use the srcset attribute to specify multiple image paths for different resolutions. The first image path is the one that is displayed by default.

Short summary:

The following attributes are used to specify images:

Attribute Description Usage Example
src Path to the image Specifies the image file location img src="image.jpg" alt="Description"
srcset Multiple paths to the image Provides multiple image sources for different resolutions img src="image.jpg" srcset="image-2x.jpg 2x" alt="Description"
alt Alternative text Displays text if the image cannot be loaded img src="image.jpg" alt="Description"

Some of the commenly used image formats are:

Format Description Usage Example File Extension
jpg JPEG image Used for photographs and complex images with gradients image.jpg
jpeg JPEG image Same as jpg, often interchangeable image.jpeg
png PNG image Supports transparency, good for graphics and icons image.png
gif GIF image Supports animation, limited color palette image.gif
svg SVG image Vector format, scalable without quality loss image.svg

Video

Videos are specified using the video tag.

Let's take a look at the following example:

<video controls="">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"/>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/>
  Your browser does not support HTML5 video.
</video>

A video can have multiple sources. The first source is the one that is displayed by default. The second source is used if the first source is not supported. Finally, the text Your browser does not support HTML5 video. is displayed if the browser does not support any of the formats.

Short summary:

The following attributes are used to specify videos:

Attribute Description Usage Example
src Path to the video Specifies the video file location video src="video.mp4" controls
type Type of the video Specifies the video format (e.g., video/mp4) source src="video.mp4" type="video/mp4"
controls Video with playback controls Displays play, pause, and volume controls video src="video.mp4" controls
autoplay Automatically plays the video Begins playing the video upon page load video src="video.mp4" autoplay
loop Video plays in a loop Repeats the video automatically when it ends video src="video.mp4" loop

Some of the commenly used video formats are:

Format Description Usage Example File Extension
webm WebM video Open, compressed format for web videos video.webm
mp4 MP4 video Widely used video format compatible with most devices video.mp4

Audio

Audio is specified using the audio tag.

Let us take a look at the following example:

<audio controls="">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg"/>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.ogg" type="audio/ogg"/>
  Your browser does not support the audio element.
</audio>

The first source is the one that is played by default. The second source is used if the first source is not supported. Finally, the text Your browser does not support the audio element. is displayed if the browser does not support any of the formats.

Short summary:

The following attributes are used to specify audio:

Attribute Description Usage Example
src Path to the audio Specifies the audio file location audio src="audio.mp3" controls
type Type of the audio Specifies the audio format (e.g., audio/mpeg) source src="audio.mp3" type="audio/mpeg"
controls Audio with playback controls Displays play, pause, and volume controls audio src="audio.mp3" controls
autoplay Automatically plays the audio Begins playing the audio upon page load audio src="audio.mp3" autoplay
loop Audio plays in a loop Repeats the audio automatically when it ends audio src="audio.mp3" loop

The following are some of the commonly used audio formats:

Format Description Usage Example File Extension
mp3 MP3 audio Widely used for compressed audio files audio.mp3
wav WAV audio Uncompressed, high-quality audio format audio.wav

Best Practices

General

Formatting

Semantic and Accessibility

HTML Structure

CSS and JavaScript Integration

Performance and Optimization

Security

SEO (Search Engine Optimization)

Table of Contents

    HTML
    1. Key Points about HTML
    2. Skills Every HTML Developer Should Have
    3. Document Structure
    4. Head
      1. The Document's Title
      2. Metadata Information
    5. Tags and Attributes
      1. How Tags Work
      2. Nesting Tags
      3. Attributes
    6. Void (Self-closing) Elements in HTML
      1. Characteristics
      2. Examples
    7. Grouping elements
      1. Understanding div
      2. Understanding span
    8. Readonly elements
      1. Headers and paragraphs
      2. Links
      3. Lists
      4. Tables
    9. Interactive elements
      1. Buttons
      2. Input
      3. Forms
      4. Text area
    10. Style
      1. Text formatting
      2. Special characters
      3. Whitespace
    11. Media
      1. Image
      2. Video
      3. Audio
    12. Best Practices
      1. General
      2. Formatting
      3. Semantic and Accessibility
      4. HTML Structure
      5. CSS and JavaScript Integration
      6. Performance and Optimization
      7. Security
      8. SEO (Search Engine Optimization)
    13. Links