Basic HTML

Created by Andrés Roberto Rojas
Modified 01 Mar 2012 12:40

About this

This conference was about the basics of the HyperText Markup Language (HTML). It covered topics such as HTML basics, best practices, suggestions, etc. Its goals were to explain the basics of the HTML, stimulate the research of techniques and helpful technologies, and keep the use of best practices. It also focused on the importance of semantic when doing markup.

Annotations

  1. There are some important things to remember: HTML is a markup language. It's NOT a programming language, and should also be as cleanest as possible of scripts and style. Both scripts and styles should be in external files.
  2. Closing tags, indenting and keeping lowercase tags names are good practices for keeping a clean and easy to read code.
  3. Create a structure to your content before coding. Think about information levels, titles hierarchy and elements meaning.
  4. Use tags for give meaning to content elements not for styling purposes.
  5. Use lists for elements that share the same semantic meaning and tables for tabular data. Don't use them for layout purpose.
  6. Use submit buttons when sending data. If not sending data, use links instead.
  7. Don't use deprecated tags and attributes, and use classes and ids with semantic in mind.
  8. Just some suggestions: Use DOM inspectors and other useful tools, learn all the tags and attributes, read a lot and keep informed about the last changes of official specifications.

Resources

Exercise

<!DOCTYPE html>

<head>
    <title>Lorem ipsum</title>
</head>

<body>

<div id="wrapper">

    <!-- Cabecera -->
    <div id="header">

        <div id="logo">
            <h1><span>LOGOTIPO</span></h1>
        </div>

        <div id="search">
            <form action="#" method="post">
                <label for="search-field">Buscar</label>
                <input name="busqueda" type="text" id="search-field" />
            </form>
        </div>

        <ul id="main-menu">
            <li><a href="#">Lorem</a></li>
            <li><a href="#">Ipsum</a></li>
            <li><a href="#">Dolor</a></li>
            <li><a href="#">Sit</a></li>
            <li><a href="#">Amet</a></li>
        </ul>

    </div>
    <!-- /Cabecera -->

    <!-- Menu principal -->

    <!-- Lateral -->
    <div class="aside">

        <!-- Noticias -->
        <div id="news">
            <h2>
                <a href="#">Noticias</a>
            </h2>
            <ol>
                <li>
                    <span class="fecha">dd/mm/aaaa</span> <a href="#">Lorem ipsum dolor sit amet</a>
                </li>
                <li>
                    <span class="fecha">dd/mm/aaaa</span> <a href="#">Consectetuer adipiscing elit</a>
                </li>
                <li>
                    <span class="fecha">dd/mm/aaaa</span> <a href="#">Donec molestie nunc eu sapien</a>
                </li>
                <li>
                    <span class="fecha">dd/mm/aaaa</span> <a href="#">Maecenas aliquam dolor eget metus</a>
                </li>
                <li>
                    <span class="fecha">dd/mm/aaaa</span> <a href="#">Fusce tristique lorem id metus</a>
                </li>
            </ol>

            <h2>
                <a href="#">Enlaces relacionados</a>
            </h2>
            <ul>
                <li><a href="#">Proin placerat</a></li>
                <li><a href="#">Nulla in felis</a></li>
                <li><a href="#">Nam luctus</a></li>
            </ul>

        </div>
        <!-- /Noticias -->

        <!-- Publicidad -->
        <div id="ad">
            <h2><a href="#">Publicidad</a></h2>
            <p>Etiam fermentum, nisl tincidunt blandit interdum, massa velit posuere dolor, sed euismod sem odio at mi.</p>
            <p>Duis porta placerat arcu. Nullam felis pede, commodo vel, suscipit a, molestie vel, felis. Maecenas mattis est vel est. <a href="#">Seguir leyendo...</a></p>
        </div>
        <!-- /Publicidad -->

    </div>
    <!-- /Lateral -->

    <div id="content">

            <div class="articulo">
                <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>

                <img src="imagenes/imagen.png" alt="Imagen generica" />

                <p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet pede diam tempor tortor.
                Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet laoreet. Quisque eget ipsum.
                Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est. <a href="#">Seguir leyendo...</a> </p>
            </div>

            <div class="articulo">
                <h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2>

                <img src="imagenes/imagen.png" alt="Imagen genérica" />

                <p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet pede diam tempor tortor.
                Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet laoreet. Quisque eget ipsum.
                Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est. <a href="#">Seguir leyendo...</a> </p>
            </div>

    </div>
    <!-- /Contenido -->

    <!-- Secundario -->
    <div class="aside">
        <h2>Phasellus blandit</h2>
        <p>Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu, sollicitudin eget, sem. Nulla facilisi. Morbi ut enim ut enim ultricies dapibus. <a href="#">Seguir leyendo...</a></p>

        <h2>Nullam vel turpis</h2>
        <p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est. <a href="#">Seguir leyendo...</a></p>
    </div>
    <!-- /Secundario -->

    <!-- Footer -->
    <div id="footer">
        <ul id="footer-nav">
            <li>
                <a href="#">Nulla</a>
            </li>
            <li>
                <a href="#">Pharetra</a>
            </li>
            <li>
                <a href="#">Luctus</a>
            </li>
            <li>
                <a href="#">Ipsum</a>
            </li>
            <li>
                <a href="#">Proin</a>
            </li>
            <li>
                <a href="#">Placerat</a>
                </li>
        </ul>

        <span class="copyright">
            &copy; Copyright Lorem ipsum
        </span>
    </div>
    <!-- /Pie -->

</div>
<!-- /Contenedor -->

</body>
</html>
Bibliography
1. World Wide Web Consortium (W3C) - HTML 4.01 Specification [Link]
2. World Wide Web Consortium (W3C) - HTML 5 Specification [Link]
2. Way, J. [Link]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License