- Header element: Used to define the header of a document or section
<header>
<h1>Frontend Developer & UX/UI Designer</h1>
<p>I transform ideas into functional components</p>
</header>
- Main element: used to contain the main content of the web page.
<main>
<section>
<h2>Cat Photos</h2>
<p>Browse adorable cat pictures.</p>
</section>
</main>
- Section element: used to divide up content into smaller sections.
<section>
<h2>About Me</h2>
<p>Hi, I am Jane Doe and I am a web developer.</p>
</section>
- Navigation Section (
nav) element: represents a section with navigation links.
<nav>
<ul>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</li>
<li><a href="https://jmperezbu-cv.netlify.app/" target="_blank">Resume</li>
</ul>
</nav>
- Figure element: used to contain illustrations and diagrams.
<figure>
<img
src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"
alt="Two tabby kittens sleeping together on a couch."
/>
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
- Emphasis (
em) element: marks text that has stress emphasis.
<p>
Never give up on <em>your</em> dreams.
</p>
- Idiomatic Text (
i) element: used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
<p>
There is a certain <i lang="fr">je ne sais quoi</i> in the air.
</p>
- Strong Importance (
strong) element: marks text that has strong importance.
<p>
<strong>Warning:</strong> This product may cause allergic reactions.
</p>
- Bring Attention To (
b) element: used to bring attention to text that is not important for the meaning of the content. It's commonly used to highlight keywords in summaries or product names in reviews.
<p>
We tested several products, including the <b>SuperSound 3000</b> for audio quality, the <b>QuickCharge Pro</b> for fast charging, and the <b>Ecoclean Vacuum</b> for cleaning. The first two performed well, but the <b>Ecoclean Vacuum</b> did not meet expectations.
</p>
- Description List (
dl) element: used to represent a list of term-description groupings. - Description Term (
dt) element: used to represent the term being defined. - Description Details (
dd) element: used to represent the description of the term.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
- Block Quotation (
blockquote) element: used to represent a section that is quoted from another source. This element has a cite attribute. The value of the cite attribute is the URL of the source.
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
"Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?"
</blockquote>
- Inline Quotation (
q) element: used to represent a short inline quotation.
<p>
As Socrates said,
<q cite="https://www.brainyquote.com/authors/socrates-quotes">
The only true wisdom is in knowing you know nothing.
</q>
</p>
- Abbreviation (
abbr) element: used to represent an abbreviation or acronym. To help users understand what the abbreviation or acronym is, you can show its full form, a human readable description, with the title attribute.
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is the foundation of the web.
</p>
- Contact Address (
address) element: used to represent the contact information. - (Date) Time (
time) element: used to represent a date and/or time. The datetime attribute is used to translate dates and times into a machine-readable format.
<p>
The offer expires at <time datetime="20:00">20:00 </time>
</p>
- Inline Code (
code) element: used to represent a fragment of computer code. - Preformatted Text (
pre) element: represents preformatted text
<pre>
<code>
.subscription__card--normal {
border-color: var(--border-color);
}
</code>
</pre>
- Strikethrough (
s) element: used to represent content that is no longer accurate or relevant.
<p>
Special <strong>discount offer<strong>
</p>
<p>
<s>300€</s>
</p>
<h3>
150€
</h3>