<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sementic layout</title>
</head>
<body>
<header>
<h3> == header ==</h3>
<h1> mobile page</h1>
</header>
<nav>
<h3> == navigation == </h3>
<span><a href="">경력</a></span>
<span><a href="">학술</a></span>
<span><a href="">인적</a></span>
<span><a href="">소개</a></span>
</nav>
<div class="content">
<section class="section1">
<h3> == section1 == </h3>
<article class="article1">
<h3> == article1 == </h3>
<h3> 인적 사항 </h3>
<ul>
<li>성명 : </li>
<li>생년월일 : </li>
<li>주소 : </li>
<li>연락처 : </li>
<li>학력 : </li>
</ul>
</article>
</section>
<aside>
<h3> == aside == </h3>
<h3>참조 링크 : </h3>
<a href="#"><img class="portal" src="#" alt=" "></a>
<a href="#"><img class="portal" src="#" alt=" "></a>
<a href="#"><img class="portal" src="#" alt=" "></a>
</aside>
</div>
<footer>
<h3> == footer == </h3>
<h2>Copyright © 2023 Kim, Dongmin</h2>
</footer>
</body>
</html>1. **Header**:
- The `<header>` tag is used to encapsulate the introductory content of the page. It includes the website's main title (`<h1>`) and a secondary heading (`<h3>`) that highlights the section as the page header.
2. **Navigation**:
- The `<nav>` element defines navigation links for the site. It contains multiple `<span>` elements, each wrapping an anchor (`<a>`) that links to different sections of the site such as "경력" (Career), "학술" (Academia), "인적" (Personal), and "소개" (Introduction). This structure emphasizes the site's main areas accessible to users.
3. **Content**:
- Within a `<div>` designated as "content," a `<section>` element categorized as "section1" includes an `<article>` tag. This article tag, "article1," represents a self-contained piece of the content related to "인적 사항" (Personal Details), further structured with a list (`<ul>`) detailing personal information like name, birthdate, address, contact, and education.
- This semantic use of `<section>` and `<article>` helps outline the content's hierarchy and organization, making it more accessible and understandable both for users and search engines.
4. **Aside**:
- An `<aside>` element contains additional content related to the site but not essential to the main content, such as "참조 링크" (Reference Links) with images acting as links. It's used here to provide supplementary information that enhances the main article but stands apart from it.
5. **Footer**:
- The `<footer>` tag includes a closing `<h3>` and a copyright statement. This section typically contains information about the author, copyright data, or links to legal notices and privacy policy.
### Key Points:
- The document effectively utilizes semantic HTML elements to structure the content, making it more accessible and easier for search engines to interpret.
- Each semantic element (`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, and `<footer>`) is used purposefully to organize the webpage content logically and intuitively.
- The structure provided is a solid foundation for a mobile webpage, emphasizing content organization, navigation, and additional information in a manner that's conducive to both user experience and SEO.
### Possible Improvements:
- **Accessibility Enhancements**: Adding `alt` text for images and ensuring links are descriptive can further improve accessibility.
- **Responsive Design**: While the layout is structured semantically, additional CSS and possibly JavaScript would be needed to ensure the page is responsive and visually appealing across various devices.
- **Content Enhancement**: Actual content, meaningful link addresses, and images would need to be added to replace the placeholders, making the page informative and engaging for users.
- **Styling**: To enhance the visual appeal and user experience, styling with CSS could be applied to the navigation links, content sections, and aside elements, ensuring they are not only semantically correct but also aesthetically pleasing.
'개념 > HTML+CSS' 카테고리의 다른 글
| CSS) CSS Style for Button States Example (0) | 2025.02.22 |
|---|---|
| CSS) CSS Customization for HTML Lists (0) | 2025.02.20 |
| CSS) Stylish HTML Table with CSS (0) | 2025.02.19 |
| CSS) Semantic Web Page Layout with CSS Styling (0) | 2025.02.18 |
| HTML) HTML Media Tag Usage Example (0) | 2025.02.16 |