> ← Home

100 Days Of Code - Semantic HTML

Zenmi's Portfolio


Typography Showcase

Heading Lvl 3

This is an example of a standard paragraph, Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo culpa eveniet nulla modi enim nihil perspiciatis accusamus, atque, alias molestiae repellendus praesentium harum sit voluptatum quae voluptatem laudantium tenetur ad.
Highlighted Inline elements were also used:

  • strong (Bold) for Importance
  • em (Italic) for Emphasis and stress
  • Small Text for disclaimers
  • Deleted text and Inserted text for edits
  • l 2 for superscript and E=MC 5 for subscripts
  • console.log('Hello world, Zenmi Has arrived') for inline code
  • Press Ctrl + C to copy
"This is a blackquote. It visually indents text to show it is from another source. " -MDN Web Docs
                        function codeBlock() {
                            return "Preserve whitespace and formatting";
                        }
                    

Media Elements

srcset="https://via.placeholder.com/600x400.webp" type="image/webp"> placeholderimage
Fig 1.1 : A responsive image using the picture tag.

Video Player


Data Representation

Weekly Study Schedule
Day Topic Hours
Monday HTML5 Deep Dive 5Hrs 😭😭
Tuesday CSS Box Model 2Hrs
Total Hours 7Hrs

Definition List

HTML
HyperText Markup Language The skeleton of the web.
CSS
Cascading Style Sheets - The Makeup of the web.

Interactive & New Semantic Elements

Click to Reveal the UNKNOWN (Native Accordion)

This content is hidden by default and only revealed when the user clicks the summary. No JavaScript required.


50%
70%

Native Dialog Modal

Note: Without JS, this is just statically visible, but regardless its still a very good and useful tag

This is the new <dialog>element


Complex Form Elements.

User Informaation





Preferences