Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.
<address>
Content line with a link: www.somedomain.com.
<article>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat sed voluptatem dolores, inventore aspernatur dolore enim similique rem consequuntur quaerat ut distinctio ipsam, porro odit nemo, in veritatis aliquid necessitatibus.
<aside>
Main line of thought comment, discussion, prose, poetry, thesis, etc.
Continuing back on the original line of thought.
<footer>
<header>
navigation links often exist inside a header
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<nav>
<section>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem qui repellendus a sed similique odio porro aperiam, aliquid dignissimos amet quas, neque modi voluptas nulla dolorum earum ipsa odit laboriosam?
Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.
<blockquote>
The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life; and the procedure, the process is its own reward.
<dd>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam iste similique minus pariatur natus! Minima aliquam iusto, ea suscipit ut repellat animi hic! Quae id expedita, obcaecati accusamus iste aut.
<dl>
<dt>
<figcaption>
<figure>
<hr>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio laudantium ex facere nihil at perspiciatis, placeat omnis et aut numquam rerum unde accusamus dolorum hic repellat enim inventore. Dolore, ut?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque similique sapiente vitae quam temporibus assumenda magni sint. Ea ullam delectus hic praesentium odio, sint aliquid harum iure corporis recusandae eveniet.
<li>
<ol>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eaque placeat rem obcaecati perspiciatis sed quasi aliquid non? Eum, doloremque in dolorem reiciendis perferendis earum at ea? Ullam, vero hic.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, autem. Veniam dolor facere obcaecati commodi voluptatum quae provident tenetur, architecto cum eum, ipsum totam accusantium placeat perspiciatis saepe. In, inventore!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci aperiam atque deleniti quidem molestias nostrum nulla nihil maxime, officia, repudiandae quod praesentium quisquam! Autem voluptatibus quidem at laudantium nobis corrupti?
<pre>
After a moment, a black loafer steps down from the cab of the garbage truck.
Agent Smith inspect the wreckage. There is no body. Trinity is gone.
His jaw sets as he grinds his molars in frustration.
Agent Jones and Brown walk up behind him.
AGENT JONES
She got out.
AGENT SMITH
It doesn't matter.
AGENT BROWN
The informant is real.
Agent Smith almost smiles.
AGENT SMITH
Yes.
AGENT JONES
We have the name of their next target.
AGENT BROWN
The name is Neo.
The handset of the pay phone lays on the ground, separated
in the crash like a severed limb.
AGENT SMITH
We'll need a search running.
AGENT JONES
It's already begun.
<ul>
Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
<a>
The anchor tag doesn’t always have to contain a url, but it often does. This one does not.
<abbr>
Abbreviations are fun, until they’re misused. For instance, if you tell me to use my PIN number as I am using an ATM machine, I might get a wee bit upset.
After all these years, it seems to be that the winning combination is still, without a doubt, HTML, CSS and JavaScript.
Without making an RSVP ASAP, you will probably miss out on visiting the facilities of JPL.
<b>
Here is a sample of text that draws your attention within a section of text.
<bdo>
BDO overrides default text direction. Special characters, at least in UTC-8, seem to not be affected.
This text will go right to left, and honestly, I am pretty sure only e.e. cummings and Lewis Carroll would have found an honest use for it. However, check the special characters: # ? & % $ @ , , ;
<br>
You can't see it
but it's there
and should probably be used less
than an average bear.
<cite>
Do not use the cite tag with <blockquote> or <q>. For citations connected to quotes, use the cite attribute.
Stephenson, Neal (2015) Seveneves. Harper Collins.
<code>
We like to code. Code is king. Old King Code was a merry old soul and then ERR! unable to compile.
<data>
<dfn>
<em>
Emphasis is used when a certain type of voice is desired for the reader to understand. For example: Oh hey Billy, you should probably stop hand-writing all the examples and just scam them from somewhere else, otherwise you'll be doing this forever.
<i>
Italics is used to set apart text from its surrounding text, like foreign language phrases, ciao, bella, or carpe diem, and can also be used for a fictional character's thoughts or for technical terms. Italics is not to be used simply to italicize text. For that, use CSS font-style property.
<kbd>
Use the command help me, please to view help pages on your life.
<mark>
First of all, keep him out of the light, he hates bright light, especially sunlight, it'll kill him. Second, don't give him any water, not even to drink. But the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs, never feed him after midnight.
<q>
Like
, omg
, gag me with a spoon
, and tonarrrr, man!
, are phrases that refuse to extricate themselves from my brain. Oh well.
<rp>
not a repeat
<rt>
not a retweet
<ruby>
not what you think it is
<s>
Strike! You're out! And with that, I learned to hate baseball.
<samp>
<small>
Here is some small text among other, regular, (taller) text.
Obligatory: you’re killin’ me, Smalls!
<span>
SPAN SPAN SPAN SPAN, EGGS AND SPAN, BACON AND SPAN, SPAN HAM AND BACON, BACON BACON HAM AND SPAN. SPAN SPAN SPAN!
Another span.
<strong>
There is of course, the average, does a good, decent, job, text. And then there is strong text. Bigger, better, faster, stronger!
<sub>
Poor Willie worked in chem lab.
Poor Willie is no more.
For what he thought was H2O was actually H2SO4!
<sup>
107 is what I would like to be making next year, in USD.
My English teacher often wrotecitationneededonmypapers because it seemed like I just made things up. I have no idea why she thought that1.
<time>
<var>
HTML supports various multimedia resources such as images, audio, and video.
<img>
<video>
In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.
<picture>
These elements let you provide indications that specific parts of the text have been altered.
<del>
<ins>
The elements here are used to create and handle tabular data.
<caption>
<col>
<colgroup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr>
HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to a website or application.
<button>
Not my gumdrop buttons!
<datalist>
<fieldset>
<form>
The <form> element must be used for any input wanted from the user.
<input>
Inputs are awesome, when they are constructive.
There are several types of input available that are widely accepted. It would be a good thing to learn them, as they have inherit value checks for each type of input.
Types of input with broad support: number, color, checkbox, radio, date, file, month, password, range, time.
This is a standard text input.
This is an email address input. Notice red outline when incorrect format.
<label>
<legend>
<meter>
Meter is used to show a value within a range of values.
He got a
As you can see above, the actual value is not being shown, merely the relational amount in visual form.
<optgroup>
Everyone should know their alignment. It helps immensely. For instance, when I randomly set fire to various objects, I know that it's simply because I am chaotic evil. Simple!
<option>
See <select> below for html example.
<output>
Many people probably do not know about this one, since we use some form of JavaScript to do it.
But it exists in the HTML specification! Use it when you can - it's awesome!
<progress>
The current completion status of this document is:
<select>
Please select one:
<textarea>
This is a textarea. Neat.
1 - Yes I do. Because I did.