Pareto's law applied in Frontend development. Learn the 20% that gives you the 80% that's the rule.
The html is the language to create content in web development.
An important thing to know when building web applications or websites is to create a content hierarchy. To do so, I recommend to:
- Create websites without styles so we can see if the content makes sense on it's own
- Place the most relevant content as before as possible
- At least one
<h1>should be present. - At least one
<main>should be present. - Usually a
<footer>should be present. - If there is a block with many
<a>, a<nav>should be present. - If there is a
datesomewhere, a<time>should be present. - If there is content that makes sense on its own, an
<article>should be present.
<html> is a mix of tags and text content. Long time ago the tags used to be non-semantic what derived everyone to use the <div> for everything.
Semantic markup is built by tags that add meaning to the web (for example, the <main> tag says to the crawler: Here you have the main content of a document). To be able to do semantic markup you don't need to know all the html tags. If you're going to create something and you don't know if there is a tag that fits that need, you can check here the existent tags.
- Better maintanibility (Gives context and it's easier to read)
- Better SEO (Semntic html makes easier the robots to read and understand the page)
- Massive accessibility improvement
- The tag is used to group inline-elements in a document.
- The tag provides no visual change by itself.
- The tag provides a way to add a hook to a part of a text or a part of a document.
- The tag defines a division or a section in an HTML document.
- The element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.
- Defines a hyperlink, which is used to link from one page to another.
- Specifies independent, self-contained content.
- Should make sense on its own and it should be possible to distribute it independently from the rest of the site.
- Potential sources for the element:
- Forum post
- Blog post
- News story
- Comment
- Defines some content aside from the content it is placed in.
- The aside content should be related to the surrounding content.
- Defines a caption for a element.
- Can be placed as the first or last child of the element.
- Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
- While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
- Defines a footer for a document or section.
- Should contain information about its containing element.
- You can have several
<footer>elements in one document. - A
<footer>element typically contains:- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
- Used to create an HTML form for user input.
- Can contain one or more of the following form elements:
<input>,<textarea>,<button>,<select>,<option>,<fieldset>,<label>
- Used to define HTML headings.
- Represents a container for introductory content or a set of navigational links.
- You can have several elements in one document.
- A element typically contains:
- one or more heading elements (
<h1>-<h6>) - logo or icon
- authorship information
- one or more heading elements (
- Defines an image in an HTML page.
- Has two required attributes:
src: Specifies the URL of an image.alt: Specifies an alternate text for an image
- Has optional attributes:
srcset: Specifies the URL of the image to use in different situations
- Specifies an input field where the user can enter data.
- Used within a
<form>element to declare input controls that allow users to input data. - The attribute type` which express the type of data will be introduced, can have many values:
checkboxdateemailfilehiddennumberpasswordradiosearchteltexturl
PS: I recommend to (check the <input>specifications)[https://www.w3schools.com/tags/tag_input.asp]
- Does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
- The
forattribute of the<label>tag should be equal to the id attribute of the related element to bind them together.
Tip: A label can be bound to an element either by using the forattribute, or by placing the element inside the` element.
- Specifies the main content of a document
- The content inside the
<main>element should be unique to the document
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header> or <nav> element.
- Defines a set of navigation links.
- Notice that NOT all links of a document should be inside a element. The element is intended only for major block of navigation links.
- Defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
- Used to create a drop-down list.
- Defines an unordered (bulleted) list.
- Defines an ordered list. An ordered list can be numerical or alphabetical.
- Defines a list item.
- Defines an HTML table.
- Defines a human-readable date/time.