SW 2022-03-11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The anchor element</title>
</head>
<body>
    <!-- nav tem a semântica de ser um conjunto de estruturas
    para navegação interna ou externa -->
    <nav>
    Dois exemplos de navegação INTERNA para fragmentos DESTE MESMO doc:
    <ul>
        <li>
            <a href="#idSectionTheoryAboutAnchor">
                Definições em English em Português
            </a>
        </li>
        <li>
            <a href="#idSectionAnchorExamples">
                Exemplos de âncoras externas / externals anchors
            </a>
        </li>
    </ul>

    <hr>

    Dois exemplos de navegação externa:
    <ul>
        <li>
            <a href="https://xrds.acm.org/">https://xrds.acm.org/</a>
        </li>
        <li>
            <a href="https://www.formula1.com/index.htm#primaryNav">https://www.formula1.com/index.htm#primaryNav</a>
        </li>
    </ul>


    </nav>
    <section id="idSectionTheoryAboutAnchor">
        <header>
            <h1>The anchor element</h1>
            <h2>The most important element in hypertext</h2>
        </header>
        <article>
        <details>
            <summary>Anchor in english</summary>
            <p lang="en">The anchor element is used for creating navigational
            resources to browse to different parts of the same
            document or to other documents.</p>
        </details>
        <hr>
        <details open>
            <summary>Anchor em Português</summary>
            <p lang="pt">O element âncora serve para criar elementos
                de navegação para outras partes do mesmo documento, ou
                para outros documentos.</p>
        </details>
        </article>
    </section>
    <hr>
    <section id="idSectionAnchorExamples">
        <header>
            <h1>Some anchor examples</h1>
        </header>
        <ol>
        <li>
            Empty anchor, invisible and useless:
            <mark>
                <a></a><!-- empty anchor (no visibile expression) -->
            </mark>
        </li>
        <li>
            Not empty anchor, visible, but still useless:
            <mark>
                <a>anchor</a> <!-- visible, but useless -->
            </mark>
        </li>
        <li>
            Not empty and serving for navigation:
            <a
                href="https://arturmarques.com/edu/sw"
            >
                Página de Suporte
            </a>
        </li>
        <li>
            <a href="https://badsite.su/">
            https://www.cgd.pt/
            </a>
        </li>
        </ol>
    </section>
</body>
</html>