Jazzo.co.uk uses cookies to provide necessary site functionality and improve your experience. By using our website, you agree to our Privacy Policy and our Terms & Condition.

HTML

Start Tutorials

Introduction Tags & Elements Attributes Structure Building First Page Tags In Action Choosing Our IDE Adding Content To Pages Indentation Overview

Tags & Elements

<!DOCTYPE> <a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <u> <ul> <var> <video> <wbr>

Entities

CSS

Introduction

MATERIAL-ICONS

Introduction Icons - Action Icons - Alert Icons - AV Icons - Communication Icons - Content Icons - Device Icons - Editor Icons - File Icons - Hardware Icons - Image Icons - Maps Icons - Navigation Icons - Notification Icons - Places Icons - Social Icons - Toggle

HTML <header>

10th February 2020 | Christopher Pisani

The HTML element <header> contains information for a section, like a heading (h1-h6) element, a logo and navigation links.

<style>
header.page-header {
    background: no-repeat left/cover url(https://interactive-examples.mdn.mozilla.net/media/examples/puppy-header-logo.jpg);
    display: flex;
    height: 120px;
    min-width: 120px;
    align-items: center;
    color: #fff;
    text-shadow: #000 0 0 .2em;
}
header.page-header > h1 {
    font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive,
        fantasy;
    margin: 2%;
}

main {
    font: 1rem 'Fira Sans', sans-serif;
}
</style>

<header class="page-header">
    <h1>Cute Puppies Express!</h1>
</header>

<main>
    <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>

Available Attributes

No specific attributes are assigned for this element, other than the standard global attributes.

Please Note: Although we try our utmost to deliver the correct information, some of the data properties might have changed after this information was published on our website. If you believe there is incorrect information on this section, please report error on our contact form.