Skip to main content
Engineering LibreTexts

3.2: Document Structure Tags

  • Page ID
    93791
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    HTML 5 includes a new set of semantic document structural tags to define different parts or structure of a web page. A semantic element clearly describes its meaning to both the browser and the web developer.

    Simple Structure of a Page

    Figure \(\PageIndex{1}\): A simple template "MGA Web Development Tutorials" by Floyd, Kevin; Kwak, Myungjae; and Stines, Alan, Computer Science and Information Technology Ancillary Materials. 4GALILEO Open Learning Materials is licensed under CC BY-SA 4.0

     

    Some of the most common HTML 5 structural elements are described below.

    The <header> tag

    The <header> element is used as a container for page heading content. The tag typically contains heading tags (<h1> - <h6>), a logo image, or other content that introduces the content. It is possible to have more than one <header> tag per page; however, the <header> cannot be coded within a <footer> or another <header> tag.

    The <nav> tag

    The <nav> tag is a block level element used to define major blocks of navigation links or navigation menus.

    The <main> tag

    The <main> tag is used to serve a container for major page content that is not repeated in other parts of the page. A web page can include only one <main> element. Additionally, it cannot be included as a child element within a <header><nav>footer><article>, or <aside> tag.

    The <section> tag

    The <section> tag defines generic sections in a web page such as headers, footers, or any other sections of the document. In this context, a section is a thematic grouping of content.

    The <article> tag

    The <article> element represents a complete, or self-contained, composition in a document, page, application, or site that is, in principle, independently distributable or reusable.

    The <aside> tag

    The <aside> tag is a block level element that defines content aside from the content it is placed in. The aside content should be related to the surrounding content.

    The <footer> tag

    The <footer> tag is a block level element that defines footer information for an entire web page or section of the document. The content of the <footer> typically consists of contact information, copyright, links, or logos. In some cases, a web page may contain multiple <footer> tags.

    The <figure> tag

    The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, or code sections. By default, this is a block level element with 40px right and left margin settings.

    The <figcaption> tag

    The <figcaption> is a block level tag that defines a caption for a <figure> element discussed in the previous section. The <figcaption> tag is normally coded as the first or last child element of the <figure> tag.


    3.2: Document Structure Tags is shared under a CC BY-SA 4.0 license and was authored, remixed, and/or curated by LibreTexts.

    • Was this article helpful?