There are several tags that make up the basic structures of HTML, and one of them is the Declaration (or Doc Type Definition - DTD). Each version of HTML has its own version of the Doctype declaration. In the case of the latest version, HTML5, it is possible to include it at the beginning of the file simply by writing <!DOCTYPE html>. This declaration informs the browser which version of HTML should be used to display the page correctly. Therefore, it is important to always include it at the beginning of the HTML code.
HTML
HTML elements define the structure and semantics of a page’s content. In HTML5, the structure remains the same as in other versions, but with changes to the “Doctype”, the elements are classified as:
1. Inline elements(inline): They have their closing tag in the same opening statement, for example:
2. Block elements(block): These are elements that open and close in different statements, and can contain other groups of elements as content, which we also call sub-elements, for example:
Document of type accompanied by the chosen language.
Head
Another very important markup is the tag, which defines the header of your HTML. (not visible on your browser page)".
Meta
Within the <head> section, we have the <meta> tag. It serves to provide information about certain settings for your website, either to the user’s browser or even to search engines on the internet. By using the <meta> tag, you can define the character encoding your text is using and other relevant information. Here are some examples:
-
Charset=“UTF-8”: This is used for words with special characters and accents.
-
Http-equiv=“” content=“”: This relates to compatibility with Internet Explorer (IE) and Microsoft Edge.
-
Name=“viewport” content=“”: It determines the visible area of the content across various dimensions. To prevent users from having to manually zoom in on their devices, we apply this tag.
Links
Title
<Title> defines the title that the page will display in the visitor’s web browser window. It should be placed within the <head> section.
Body
Everything that needs to be rendered is within the tag. It is part of the basic structure of the file, delimiting the beginning and end of your page’s content. This is where you’ll place the content that is visible to your visitors.
Header
The HTML element <header> should only be seen by the system and is located within the <body>. The header is nothing more than the titles and subtitles used throughout a text. To improve organic search results, it is necessary to adopt a series of optimization strategies and practices. When it comes to a web page, we also need to facilitate the reading of the content by search engines. Robots will only be able to differentiate a title and the most important topics from the rest of the page content. The goal of some techniques is to facilitate the reading of your pages by robots, others can provide a better user experience. There are SEO techniques that meet these two needs simultaneously. The use of heading tags translated as “header tags” will be a good example to follow.
The header tag has two uses:
-
When used in content, it will serve to organize the title of a section or article.
-
When used outside, it serves to represent the top of the visible header on your page.
Text Markup H1 to H6
The header tags <h1> to <h6> are used to indicate which sections of the content should be linked to the title, subtitles, and highlight topics of the page. It defines a hierarchical organization of information, the <h1> tag is the most important. Do not replicate the same content from the <h1> tag to other pages, that is, each page should have an exclusive <h1> tag. After all, each page of your site should have a different focus, therefore, different keywords. Duplicate content can cause problems for your performance.
Nav
Speaking about semantic weight, the <nav> tag will group some elements where you will have navigation links for your site. You can repeat this tag in your HTML code, and each one can have different links, repeated links, or even all the links to your site.
The <a> anchor element with the “href” attribute defines a hyperlink, used to link pages, indicates the destination of the link, and the “alt” is an alternative text.
The global <class> attribute is a list of an element’s classes, allowing CSS and Javascript to select and access specific elements through class selectors.
Unordered Lists
When you want to put items in an HTML document of a page in the form of an unordered list, you can put them in any order, there is no priority, the elements do not need to be numbered for example and these items are identified by markers, usually a small circle or any symbol, the tag we use for an unordered list is <ul> which stands for (Unordered List Element). Each item within it is defined with the <li> tag (list item).
Main
The <main> tag defines the main content of your HTML document. There should only be one <main> tag per page.
Div
The <div> is a container for any element, it is an organizational component, it serves to position the elements within the page, practically to assemble the layout of our page.
Botton
<button> represents a clickable button.
Section
The <section> tag can contain text and other tags within it. It allows defining new sections in the document, in various parts. But be careful before using a <section> tag, evaluate what kind of section this is within your page on your site, for example:
For a header section, it’s better to use <header>
If it’s a footer section, it’s better to use <footer>
If it’s the main section of your site, it’s better to use <main>
<p> Delimits a paragraph.
<hr> “Horizontal Rule” is used to insert a horizontal line on an HTML page.
<br> “Line Break” is intended to perform a line break in the text.
Article
It represents an independent section, a container, an area of the page. I can have as many as necessary, each one representing an area of the document with a specific subject or area with content different from the header, navigation, and footer. An example could be a “post” within a forum, an article from a newspaper or magazine, or a comment. Any content that I want to section off, I use the <article> tag; it will have more semantic weight than the <section> tag. Independent of the rest of the site, the <article> can have distributed information.
Span
The <span> tag allows for a visual change without altering the text flow. It creates a box without disrupting the flow, similar to how you would select only a part of your text in Word and change the formatting of that specific part. This does not interfere with the rest of your text, which is what the <span> tag does when using CSS.
Aside
The <aside> tag is a sectioning element that is part of the new HTML5 semantics. It represents a section within the page with content not necessarily related to the main content, something entirely separate from the context, surrounding the main content.
Footer
The <footer> element represents the footer of a section or is also used as the footer of the page. For example, it may contain information related to the author and copyright, navigation blocks, or related links.
Spec Home
Spec Spec Activities
Second page
Link rel=”stylesheet”
rel: (relationship) is used to specify the relationship of the file you want to use with the current file. The following syntax: rel=”stylesheet”, the imported file is the file responsible for the style of the page.
Input
Used to create interactive controls for web-based forms to receive data from the user, it defines an input field. The semantics of an varies considerably depending on the value of its attribute.
Label
Label defines a label for a field. It can be associated with a control element by placing it inside the element.
Using the “for” attribute. Such control is called the labeled control of the label element. An input can be associated with several labels (s).
End of the second page
#passosdDev…