HTML5 course — Part 2/2

[clique aqui para português]

Semantic Texts

It is used to define the meaning, structure, or style of a word, line, or any other type of text.

• <abbr> Represents an abbreviation and optionally provides a complete description for it. If present, the title attribute must contain the complete description and only it.
• <b> Represents a range of text stylistically different from normal text, without conveying any importance or relevance. It is generally used to highlight keywords in a summary, product names in a comment, or other text spaces whose typical presentation would be bold. Another example of its use is to mark the main sentence of each paragraph of an article.
• <br> (Break-Row) Line break, produces a line break in a text (carriage-return). It is useful for writing poems or an address, where the line split is significant.
• <cite> Represents a reference to an artwork. It must include the title of the paper or a reference URL, which can be in an abbreviated form according to the conventions used for adding the citation metadata.
• <em> Marks the text with emphasis. The <em> element can be aligned, with each level of nesting indicating a greater degree of emphasis.
• <i> It represents a part of the text that is highlighted from the rest for some reason, for example, technical terms, expressions from other languages ​​or thoughts of fictional characters. Usually, it is presented using the “italic” type.
• <span> It is a generic online container for phrased content, which does not represent anything by nature. It can be used to group elements for style purposes (using the class or id attributes), or to share attribute values ​​like lang. It should be used only when no other semantic elements are appropriate. <span> is very similar to the <div> element, however <div> is a block level element while <span> is an inline element.
• <strong> This element includes only global attributes.
• <p> Represents a paragraph of the text. Paragraphs are generally represented in visual media, as a block of text that are separated from the adjacent blocks by vertical white spaces and / or first-line indentation. Paragraphs are block elements.

Lists

• <ul> The HTML element of Disordered List represents a list of items in no strict order, that is, a collection of items that do not have a numerical order and their positions in that list are irrelevant. Characteristically, items in an unordered list are displayed with a marker that can take various forms, such as a point, a circle, or a square. The type of bookmark is not defined in the HTML description of the page, but in the associated CSS, using the list-style-type property.
• <li> The HTML element <li> (or the Item List of an HTML element) is used to represent an item that is part of a list. This item must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>) and represents a single entity on that list. In menus and cluttered lists the list of items is usually displayed using marking points (the balls). In ordered lists they are usually shown with an ascending counter — like a number, or letter — to their left.
• <ol> The ordered list HTML element represents a list of ordered items. These items sorted in a list are typically shown with a preceding count, which can be of any type, such as numerals, letters, Roman numerals, or simple symbols. This numerical model is not defined in the html description of the page, but in the associated CSS style sheet, by the list-style-type property.

Image

• <img> Represents the image insertion in the document, being also implemented by HTML5 for a better experience with the element <figure> and <figcaption>.
• <figure> Represents independent content, often with a caption (<figcaption>), and is usually referred to as a single unit.
• <figcaption> Represents the image caption.

Tables

• <table> Represents data in two or more dimensions.
• <caption> The HTML Table Subtitle Element represents the title of a table. Although he is always the first child of a <table>, his style, using CSS, can place him anywhere relative to the table.
• <tbody> The HTML element encapsulates a set of table rows (<tr> elements), indicating that they make up the body of the table (<table>).
• <td> The HTML table cell element (<td>) defines a cell in a table that contains the data. Participate in the table model.
• <tfoot> Defines a set of lines that will be part of the footer of an HTML table.
• <th> Defines a header cell in the cell group of your table. The natural accuracy of this group is defined by the scope and headers attributes.
• <thead> Defines a set of rows that define the table’s column header.
• <tr> Defines a row of cells in a table. Row cells can be established using a combination of <td> (data cell) and <th> (header cell) elements.

Separation of content

• <div> It is a generic container for streaming content, which in a way represents nothing. It can be used to group elements for style purposes (using class or id), or because they share attribute values, such as lang. It should be used only when there is no other semantic element (such as <article> or <nav>).
• <hr> Represents a thematic break between paragraph-level elements (for example, a change in the scene of a story, or a change of theme with a section). In previous versions of HTML, it represented a horizontal line. It can continue to be displayed as a horizontal line in browsers, but it is now defined in semantic terms, rather than in terms of presentation.
• <iframe> The HTML inline frame element represents a nested navigation context, effectively incorporating another HTML page into the current page. In HTML 4.01, a document can contain a head and a body or a head and a set of frames, but not so much a body and set of frames. However, an <iframe> can be used within a normal document body. Each navigation context has its own session history and the active document. The navigation context that contains the embedded content is called the navigation context parent. The top-level navigation context (which does not have a parent) is usually the browser window.
• <address> Provides contact information for your nearest <article> or <body> ancestor; in the second case, it applies to the entire document.
• <article> Represents an independent composition in a document, page, application, or website, or that is intended to be distributed independently or reusable, for example, in syndication. This could be a forum post, a magazine or newspaper article, a blog post, a user-submitted comment, an interactive gadget or widget, or any other form of independent content.*
• <aside> Represents a section of a page that consists of content that is tangentially related to the content of its surroundings, which could be considered separate from the content. These sections are often represented as sidebars. They often contain side explanations, such as the definition of a glossary; loosely related content, such as notices; the author’s biography; or, in web applications, profile information or related blog links.
• <footer> Represents a footer for your nearest sectioning content or sectioning root element (ie, your closest relative <article>, <aside>, <nav>, <section>, <blockquote>, , <details>, <fieldset>, <figure>, <td>). Usually a footer contains information about the author of the data section, copyright or links to related documents.
• <header> Represents an introductory or navigational support group. It can contain some header elements but also other elements like a logo, header sections, search form, and others.
• <main> Defines the main content within <body> in your document or application. Main content is understood to be that directly related to the central topic of the page or to the central functionality of the application. It must be unique on the page, that is, within the <main> element, sections of the page that are common to the entire site or application, such as navigation mechanisms, copyright information, logo and search fields ( unless, of course, if the main function of the document is to do some kind of search).
• <nav> Represents a section of a page that points to other pages or other areas of the page, that is, a section with navigation links.
• <section> Represents a generic section contained in an HTML document, usually with a title, when there is no more specific semantic element to represent it.

Forms

• <button> Represents a clickable button.
• <datalist> Contains a set of elements that represent the possible options for the value of other controls.
• <fieldset> It is used to group elements, as well as labels (<label>), within a web form.
• <form> Represents a section of a document that contains interactive controls that allow the user to submit information to a specific web server.
• <input> This element includes global attributes.
• <label> Represents a caption for an item in a user interface. It can be associated with a control element, placing it inside the label element, or using the for attribute. Such a control is called the labeled control of the label element. An input can be associated with several tags (<label>).
• <legend> Represents a label for the content of its ancestor <fieldset>.
• <meter> It can represent a scalar value within a known range or a fractional value.
• <optgroup> In a Web Form, the HTML <optgroup> element creates a grouping of options within the <select> element.
• <option> In a web form, the HTML <option> element is used to create a control that represents an item within an HTML5 <select>, <optgroup> or <datalist> element. <output> The output element () is an element in which a website or application can inject the results of a calculation or the result of a user’s action.
• <progress> It is used to view the progress of a task. Although the specifics of how it is shown are up to the developer, it is typically shown as a progress bar.
• <select> Represents a control that presents a menu of options. The options within the menu are represented by the element, which can be grouped by <optgroup> elements. The options can be pre-selected for the user.
• <textarea> Represents an edit control for a text box, useful when you want to allow the user to enter extensive text in free form, such as a comment or return form.

Interactive elements

• <details> It is used as a tool from which the user will obtain additional information.
• <summary> It is used as a summary or caption for the content of an element.
• <dialog> Represents a dialog box or other interactive component, such as an inspector or window.

HTML5 structure

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Título da Página</title>
   <link rel="stylesheet" href="css/stylesheet.css" />
   <script src="scripts/script.js"></script>
</head>

<body>
   <header>
       <nav>
           <ul>
               <li>Inicio</li>
               <li>Contato</li>
           </ul>
       </nav>
   </header>

   <section>

       <h2>Artigos</h2>

       <article>
           <header>
               <h2>O título do artigo é aqui</h2>
           </header>
           <p>Lorem ipsum dolor sit amet, consectetur a.</p>
       </article>

   </section>

   <aside>
       <h2>Entre em contato</h2>
       <p>Lorem ipsum dolor sit amet magna aliqua.</p>
   </aside>

   <footer>
       <p>Copyright 2020 ©</p>
   </footer>
</body>

</html>

Validator

W3 offers a link to analyze the structure of HTML and check for syntax errors.
https://validator.w3.org/

Coding Standard

Every language leaves a range of possibilities to work with it, HTML is no different, you can write tags in uppercase or lowercase or not put certain attributes and so on.

To make writing more compatible, the ideal is to have a coding standard.

Documentation

Every language has documentation and HTML would be no different, a tool I really like to read documentation is DevDocs.

If you need any tips faster use devhints

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊