Text related tags

Headings are used to structure content. They are the most common HTML tags, and are used to create titles, subtitles, and subheadings. The <h1> tag is the largest, and the <h6> tag is the smallest. By default, all headings take up the full available width and include a top and bottom margin.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The <p> tag is used to structure paragraphs. By default, all paragraphs take up the full available width and include a top and bottom margin.

The <a> tag is used to link to other pages or file. The href attribute specifies the link's destination. You can also specify the link's target using the target attribute, _blank for opening the link in a new tab, and _self(default) for opening the link in the same tab.

<p>Qui esse aute deserunt <a href="/html-basics/attributes/" target="_blank">ullamco minim</a> amet eiusmod do dolor qui anim excepteur labore Lorem labore magna. Dolore duis ut culpa deserunt elit sunt qui sint quis culpa enim ad. Nisi enim consequat et voluptate anim cillum adipisicing. Fugiat cupidatat adipisicing ipsum sunt nulla consequat eu sit. Adipisicing nisi excepteur quis proident culpa pariatur elit excepteur eu. Ut ad excepteur esse irure enim in eu enim.</p>

Lists are denoted by the <ul> (unordered) and <ol> (ordered) tags. The <li> tag is used to structure each list item. By default, lists have a top and bottom margin take up the full available width.

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Media related tags

The <img> tag is used to display images. The src attribute specifies the image's source. The alt attribute specifies the image's alternative text, a description of the image for screenreaders and other assistive technologies.

<img src="assets/media/placeholder.jpg" alt="Grey placeholder rectangle" />

→

The <video> tag is used to display videos. The src attribute specifies the video's source. The controls attribute specifies whether the video should have controls, such as a play/pause button.

<video src="assets/media/placeholder.mp4" type="video/mp4" controls autoplay playsinline muted loop /></video>

You can also embed audio using the <audio> tag. The src attribute specifies the audio's source. The controls attribute specifies whether the audio should have controls, such as a play/pause button.

<audio src="assets/media/placeholder.mp3" controls loop /></audio>

Containers

The most common way to structure content is with the <div> tag, since it is the most semantically neutral. Other containers include but are not limited to the <section> (for larger blocks of content) and <article> tags (for smaller repetitive blocks of content).

<section>
  <h2>Section title</h2>
  <article>
    <h3>Article title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, voluptatibus.</p>
    <div>
      <span>Some action</span>
      <button>Do it now</button>
    <div/>
  </article>
  <article>
    <h3>Article title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, voluptatibus.</p>
    <div>
      <span>Some action</span>
      <button>Do it now</button>
    <div/>
  </article>
</section>

Common section tags

When structuring content, you might want to use more descriptive tags for the sections depending on their layout and purpose. Commonly, the <header> tag is used to structure the header of a page, while the <footer> tag is used to structure the footer of a page. The <main> tag is used to structure the main content of a page and, in some cases, the <aside> tag is used to structure the sidebar of a page.

Navigation

The <nav> tag is typically used to structure the navigation of a website. You typically place the navigation in the header of the page, but it can also be placed in the footer.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>