HTML Block Elements

HTML Block Elements, these are all elements that are considered block elements, which have certain characteristics. The most important characteristic is that they take up the full width that is available.

In this post, we will consider block elements to be elements with display: ‘block’.

<address>

<address> defines the ways to contact the author or authors who created the page, and it is generally used in the <footer> or at the end of <main>.

<article>

<article> defines an element in an HTML document that is intended to be distributable or reusable.

<aside>

<aside> defines content that is related to the content of the page. This can offer additional content, for example, in a blog, the sidebar may offer the last 4 articles if you wish to read them.

<blockquote>

<blockquote> creates a block that will be a quote from another page or location where the information was taken from.

<canvas>

<canvas> is an HTML element that is used to draw graphics on the web page using JavaScript.

<div>

<div> is a block element that we can use to style a web page. Before HTML5, this element was used to represent various parts of a web page, so if you see a web page using it too much, don’t criticize it. It serves to create sections or group content.

<dl>

<dl> represents a descriptive list in HTML5.

<dt>

<dt> will be the element that defines the term.

<dd>

<dd> is the element within a descriptive list that describes the term.

<ol>

<ol> defines an ordered list.

<fieldset>

<fieldset> defines a group of fields in a form.

<figure>

<figure> is an HTML element used to group an image and its caption, so both <img> and <figcaption> are typically used as child elements.

The <figure> tag is used to represent content that is considered separate from the main flow of the document, such as an image, diagram, table, code snippet, etc.

<figcaption>

<figcaption> creates a caption for a figure. This element is a child element of <figure>.

<footer>

<footer> indicates the footer of a web page. In general, every website has the same footer. In this tag, information about the page is usually provided, such as different social networks in some cases, contact information, address, phone, etc., terms and conditions, copyright, etc.

<footer>
Los elementos del footer deben ir aqui.
</footer>

<form>

<form> and </form> indicate the beginning and end of a form. Within a form, you can use a long list of tags, such as textarea, inputs, label, buttons, etc.

<h1>-<h6>

From <h1> to <h6> indicate headings in an HTML document. For example, H1 defines the main title of the page. There should only be one H1 per page. For the others, you can have as many as you want.

Please note that the headings should be tiered h1, h2, h3, h4, etc.

<h1>
Este es el titulo principal
<h1>

<header>

<header> defines the header of the page, generally where our logo, login, logout are located. Sometimes we also have categories and the search bar of our page.

<hr>

<hr> defines a separating line.

<main>

<main> is the tag where you should present the main content in HTML5.

<nav>

<nav> serves the function of grouping navigation links.

<noscript>

<noscript> will provide this message in case JavaScript scripts cannot be executed.

<p>

Defines a paragraph, everything between the <p> and </p> tags will be a paragraph.

<pre>

The <pre> element is used to define preformatted text in an HTML document. It preserves both spaces and line breaks, which means the text will appear exactly as it does in the HTML

<section>

<section> defines a section in a page, which will be a section in our text consisting of a title, paragraph, and elements such as images and separators belonging to these, even other sections with their respective titles and paragraphs, etc..

<H1>Mi titulo principal</H1>
<section>
  <h2>Titulo 2</h2>
  <p>Parrafo del segundo titulo</p>
  <section>
     <h3>Titulo de la subseccion</h3>
     <p>parrafo de la subseccion</p>
  </section>
</section>

<table>

<table> will represent or define a table in our HTML document.

<video>

The <video> element in HTML5 is used to embed video files into a web page. It supports multiple video formats and allows for basic video controls, such as play, pause, and seeking.

Referencia: https://www.w3.org/wiki/Category:HTML